TUGAS AKHIR
Disusun oleh :
RAHMAWATI FEBRIFYANNING TIAS
NPM. 0634 310 285
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL
″
VETERAN
″
JAWA TIMUR
SURABAYA
TUGAS AKHIR
Diajukan Untuk Memenuhi Sebagai Persyaratan
Dalam Memperoleh Gelar Sarjana Komputer
Jurusan Teknik Informatika
Disusun oleh :
RAHMAWATI FEBRIFYANNING TIAS
NPM. 0634 310 284
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL
″
VETERAN
″
JAWA TIMUR
SURABAYA
APLIKASI PEMUTAR MP3 MENGGUNAKAN EXTJS
FRAMEWORK DAN ADOBE AIR LIBRARY
Disusun Oleh :
RAHMAWATI FEBRIFYANNING TIAS
0634 310 285
Telah disetujui untuk mengikuti Ujian Negara Lisan Gelombang III Tahun Akademik 2009/2010
Pembimbing Utama Pembimbing Pendamping
Prof. Dr. Ir. H. Akhmad Fauzi, MMT Nur Cahyo Wibowo, S.Kom, M.Kom NIP. 196 511 091 991 031 002 NPT. 37903 040 197
Mengetahui,
Ketua Jurusan Teknik Informatika Fakultas Teknologi Industri UPN ”Veteran” Jawa Timur
FAKULTAS TEKNOLOGI INDUSTRI
PANITIA UJIAN SKRIPSI / KOMPREHENSIF
KETERANGAN REVISI
Mahasiswa di bawah ini:
Nama : Rahmawati Febrifyanning Tias NPM : 0634 310 285
Jurusan : Teknik Informatika
Telah mengerjakan revisi/ tidak ada revisi*) TUGAS AKHIR Ujian Lisan Gelombang III, TA 2009/2010 dengan judul:
″APLIKASI PEMUTAR MP3 MENGGUNAKAN EXTJS DAN ADOBE AIR
FRAMEWORK″
Surabaya, 05 Maret 2010 Dosen Penguji yang memerintahkan revisi:
{
}
1) Prof. Dr. Ir. H. Akhmad Fauzi, MMT NIP. 196 511 091 991 031 002
{
}
2) Nur Cahyo Wibowo,S.Kom,M.Kom NPT. 279 030 440 197
{
}
3) Ysron
Mengetahui,
Pembimbing I Pembimbing II
Prof. Dr. Ir. H. Akhmad Fauzi, MMT Nur Cahyo Wibowo,S.Kom,M.Kom
APLIKASI PEMUTAR MP3 MENGGUNAKAN EXTJS FRAMEWORK DAN ADOBE AIR LIBRARY
Disusun Oleh :
RAHMAWATI FEBRIFYANNING TIAS 0634 310 285
Telah dipertahankan di hadapan dan diterima oleh Tim Penguji Tugas Akhir Jurusan Teknik Informatika Fakultas Teknologi Industri Universitas Pembangunan Nasional “Veteran” Jawa Timur
Pada Tanggal 25 Februari 2010
Pembimbing : 1.
Prof. Dr. Ir. H. Akhmad Fauzi, MMT
NIP. 196 511 091 991 031 002
Tim Penguji : 1
Prof. Dr. Ir. H. Akhmad Fauzi, MMT
NIP. 196 511 091 991 031 002 2
Nur Cahyo Wibowo, S.Kom, M.Kom NPT. 37903 040 197
2
Nur Cahyo Wibowo, S.Kom, M.Kom NPT. 37903 040 197
3.
Yusron Rijal, S.Si, MT
Mengetahui
Dekan Fakultas Teknologi Industri
Universitas Pembangunan Nasional “Veteran” Jawa Timur Surabaya
Bismillahirrahmannirahim,
Syukur Alhamdulillaahi rabbil ‘alamin terucap ke hadirat Allah SWT
atas segala limpahan Kekuatan-Nya sehingga dengan segala keterbatasan waktu, tenaga, pikiran dan keberuntungan yang dimiliki penyusun, akhirnya penyusun
dapat menyelesaikan Skripsi yang berjudul ″APLIKASI PEMUTAR MP3
MENGGUNAKAN EXTJS FRAMEWORK DAN ADOBE AIR LIBRARY″
dengan tepat waktu, Shalawat dan salam diperuntukkan kepada junjungan kita nabi besar Muhammad SAW.
Skripsi dengan beban 4 SKS ini disusun guna diajukan sebagai salah satu syarat untuk menyelesaikan program Strata Satu (S1) pada jurusan Teknik
Informatika, Fakultas Teknologi Industri, UPN
″
VETERAN″
Jawa Timur.Melalui Skripsi ini penyusun merasa mendapatkan kesempatan emas untuk memperdalam ilmu pengetahuan yang diperoleh selama di bangku perkuliahan, terutama berkenaan tentang penerapan teknologi perangkat bergerak. Namun, penyusun menyadari bahwa Skripsi ini masih jauh dari sempurna. Oleh karena itu penyusun sangat mengharapkan saran dan kritik dari para pembaca untuk pengembangan aplikasi lebih lanjut.
Surabaya, 25 Februari 2010
Penyusun
Rahmawati Febrifyanning Tias
ABSTRAK... i
KATA PENGANTAR... ii
UCAPAN TERIMA KASIH... iii
DAFTAR ISI... v
DAFTAR GAMBAR... viii
DAFTAR TABEL... x
BAB I PENDAHULUAN... 1
1.1. Latar Belakang... 1
1.2. Perumusan Masalah... 2
1.3. Batasan Masalah... 3
1.4. Tujuan... 3
1.5 Manfaat... 4
1.6. Metodologi Pembuatan Skripsi... 4
1.7. Sistematika Penulisan... 5
BAB II TINJAUAN PUSTAKA ... 8
2.1 ExtJs (Extended JavaScript)... 8
2.1.1 Konsep JavaScript... 9
2.1.2 Adapter………..……… 2.1.3 Konfigurasi ExtJS ….……… 2.2 Adobe AIR (Adobe Integreted Runtime)..……….. 12 14 19 2.2.1 Adobe AIR Configuration……….………… 20
2.2.2 Instal Extention AIR Untuk Dreamweaver……… 24
2.3 Mengenal Web Server……… 2.4 Pengertian PHP ……… 26 27 2.4.1 Dasar-dasar PHP……… 29
2.4.2 Kelebihan PHP………..………. 29
2.4.3 Struktur Program PHP.……… 30
2.6.1 Use Case... 32
2.6.2 Aktor... 32
2.6.3 Identifikasi Use Case... 36
2.6.4 Pendokumentasian Model Use Case... 38
BAB III ANALISA DAN PERANCANGAN SISTEM... 39
3.1 Analisis Permasalahan... 39
3.2 Perancangan Sistem... 39
3.2.1 Deskripsi Umum Sistem... 39
3.2.2 Kebutuhan Sistem... 40
3.2.2.1 Kebutuhan Pengguna... 41
3.2.3 Use Case Digram... 41
3.2.4 Activity Diagram... 43
3.2.5 Perancangan Antarmuka……... 47
BAB IV IMPLEMENTASI SISTEM……… 51
4.1 Lingkungan Implementasi………. 51
4.2 Instalasi Apache……… 52
4.3 Instalasi AIR SDK Untuk Windows………. 52
4.4 Instalasi Adobe AIR Extention Untuk Dreamweaver………….. 53
4.5 Implementasi Antarmuka……… 53
4.5.1 Form Web Server……… 54
4.5.2 Form Player……….… 55
4.5.3 Form Playlist………..………..……… 56
4.5.3 1 Form Tambah……… 56
4.5.3.2 Form Simpan………..……… 59
4.5.3.3 Form Hapus……… 59
BAB V UJI COBA DAN EVALUASI………. 61
5.1 Skenario Uji Coba... 62
5.2.2 Uji Coba Koneksi LAN... 64
5.2.3 Uji Coba Menjalankan Server... 65
5.2.4 Uji Coba Menambah Lagu... 67
5.2.5 Uji Coba Memutar Lagu……… 70
5.2.6 Uji Coba Pause Lagu…….……… 71
5.2.7 Uji Coba Stop Lagu... 72
5.2.8 Uji Coba Next Lagu... 72
5.2.9 Uji Coba Previous Lagu... 73
5.2.10 Uji Coba Hapus Lagu... 74
BABVI PENUTUP……… 78
6.1. Kesimpulan... 78
6.2. Saran... 78
DAFTAR PUSTAKA... 79
LAMPIRAN... 80
Gambar 2.1. Rancang Web Develop... 13
Gambar 2.2. Hello Word... 18
Gambar 2.3 Arsitektur Adobe AIR... 20
Gambar 2.4 Direktori SDKPATH... 21
Gambar 2.5 Konfigurasi PATH……….………. 22
Gambar 2.6 Terminal Bush……….……… 23
Gambar 2.7 Hasil Dari File Contoh PHP……… 29
Gambar 2.8 Contoh Aktifitas Aktor Dan Use Case……… 32
Gambar 2.9 Contoh Aktor Pengukur Waktu……….. 35
Gambar 2.10 Aktor Dan Use Case Dalam Sistem Bank…….……….. 37
Gambar 3.1 Deskripsi Sistem Aplikasi Pemutar MP3.……… 40
Gambar 3.2 Use Case Diagram Aplikasi Pemutar MP3..……… 42
Gambar 3.3 Activity Diagram Player Lagu……… 44
Gambar 3.4 Activity diagram Tambah Data……… 45
Gambar 3.5 Activity diagram Simpan Lagu….………46
Gambar 3.6 Activity diagram Hapus Lagu…..……… 47
Gambar 3.7 Antarmuka Web Server..………. 48
Gambar 3.8 Antarmuka Menu Player.……… 49
Gambar 3.9 Antarmuka Menu Playlist…………..………. 50
Gambar 4.1 Halaman Web Server………….………54
Gambar 4.2 Form Save File……….……… 55
Gambar 4.3 Form Player…..……… 55
Gambar 4.4 Form Playlist……… 56
Gambar 4.5 Form Tambah Lagu Di Folder..….………. 57
Gambar 4.6 Form Tambah Lagu Playlist……… 57
Gambar 4.7 Browse Direktori……….……… 58
Gambar 4.8 Pilih Playlist……….……… 58
Gambar 4.9 Form Simpan…………..…………..……….. 59
Gambar 4.10 Form Hapus….…………..………60
Gambar 4.11 Form Hapus Semua…..….………60
Gambar 5.1 Adobe AIR Setup……….……… 62
Gambar 5.2 Installing Adobe AIR………63
Gambar 5.3 Finish Instal Adobe AIR………. 63
Gambar 5.4 Installing Aplikasi Player……… 64
Gambar 5.5 Menu Player…….……… 64
Gambar 5.6 Local Area Connection Properties………65
Gambar 5.7 TCP/IPv4………. 65
Gambar 5.8 Console……… 66
Gambar 5.9 Web Server.………. 66
Gambar 5.10 Save File………67
Gambar 5.11 Menu Playlist……….………67
Gambar 5.12 Menu Buka Playlist………. 68
Gambar 5.13 Menu Explorer……….……… 68
Gambar 5.14 Menu Buka Folder..………. 69
Gambar 5.18 Memutar Lagu……….……… 71
Gambar 5.19 Pause Lagu..……… 71
Gambar 5.20 Putar Lagu Yang Di Hapus………. 71
Gambar 5.21 Stop Lagu……….……… 72
Gambar 5.22 Putar Lagu Yang Di Stop……… 72
Gambar 5.23 Next Lagu……… 73
Gambar 5.24 Urutan Lagu Berikutnya..……… 73
Gambar 5.25 Previous Lagu……….. 74
Gambar 5.26 Urutan Lagu Sebelumnya………..……….. 74
Gambar 5.27 Pilih Lagu Hapus………. 75
Gambar 5.28 Hapus Lagu…….……… 75
Gambar 5.29 Lagu Yang Sudah Terhapus.……… 76
Gambar 5.30 Hapus Semua Lagu………. 76
Gambar 5.31 Data Playlist Terhapus Semua……… 77
x
Tabel 2.1 Perintah AIR SDK………... 24
Tabel 3.1 Keterangan Antarmuka Web Server……… 48
Tabel 3.2 Keterangan Menu Player……….……… 49
Penyusun : Rahmawati Febrifyanning Tias
ABSTRAK
Perkembangan teknologi saat ini semakin tinggi terutama di bidang teknologi informatika sehingga tidak menutup kemungkinan untuk berkembangnya suatu bahasa pemrograman baru yang mulai bermunculan, seperti halnya dalam pembuatan suatu web banyak sekali teknologi-teknologi Framework yang bermunculan pada saat ini, salah satunya adalah ExtJs yaitu suatu Framework yang telah di dukung dengan javascript, sehingga menjadi nilai tambah library ini untuk menjadikan pilihan pemrograman masa kini.
Selain teknologi baru dalam pengembangan web, terdapat juga teknologi untuk menjadikan suatu aplikasi web menjadi aplikasi desktop dengan menggunakan Adobe AIR (Adobe Integrated Runtime) yaitu merupakan software yang digunakan untuk membangun aplikasi berbasis RIA (Rich Internet Applications) yang dapat dipasang sebagai aplikasi desktop.
Aplikasi MP3 menggunakan ExtJS Framework dan Adobe AIR Library ini telah diuji coba dengan berbagai uji kelayakan. Hasil uji coba menunjukkan bahwa seorang pengguna dapat melakukan simpan data, hapus data, serta memutar mp3 secara streaming.
Keywords : ExtJs,Adobe Air,Aplikasi,mp3
BAB I
PENDAHULUAN
1.1 Latar Belakang
Komputer merupakan salah satu media komunikasi yang memiliki peranan sangat penting di dalam kehidupan sehari-hari. Beberapa teknologi informasi yang menyongsong pasar bebas memegang peranan sangat penting sehingga memerlukan sumber daya manusia yang berkualitas. Sumber daya manusia dengan mengikuti perkembangan jaman bisa berperan penting dalam merubah kecanggihan suatu teknologi.
Seiring perkembangan zaman dan teknologi yang semakin lama berkembang dengan pesat sejalan dengan ditemukannya teknologi dan alat – alat canggih, hal ini mengakibatkan semakin tingginya tingkat persaingan dalam dunia usaha dan ini merupakan sebuah tantangan yang harus dihadapi oleh semua pihak. Perubahan dan pembaharuan yang telah dicapai dalam bidang teknologi informasi seperti otomatisasi dan komputerisasi telah berkembang dengan cepat dan menuntut kalangan industri dan praktisi yang berkecimpung di dalamnya untuk lebih siap menghadapi kemajuan yang ada, dengan selalu mencari inovasi – inovasi baru sebagai solusi pemecahan dari setiap persoalan yang dihadapi.
Banyak sekali pada era globalisasi seperti ini suatu bahasa pemrograman baru bermunculan, misalnya saja dalam hal pembuatan suatu Web banyak sekali teknologi-teknologi Framework baru yang bermunculan pada saat ini, salah satunya adalah ExtJS yaitu suatu framewok yang telah didukung dengan javascript, sehingga menjadi nilai tambah library ini untuk menjadi pilihan pemrograman web masa kini.
Selain teknologi baru dalam pengembangan web, terdapat juga teknologi untuk menjadikan suatu aplikasi web menjadi aplikasi desktop dengan menggunakan Adobe AIR (Adobe Integrated Runtime) yaitu merupakan software yang digunakan untuk membangun aplikasi berbasis RIA (Rich Internet
Applications) yang dapat dipasang sebagai aplikasi desktop.
Dalam hal ini, implementasi dari adanya teknologi-teknologi baru yang bermunculan, yaitu dengan membuat suatu aplikasi pemutar mp3, yang dalam pembuatannya mendukung adanya teknologi berupa ExtJS dan Adobe AIR (Adobe
Integrated Application).
Akan tetapi dalam hal ini yang mendasari dibuatnya aplikasi pemutar mp3 dengan menggunakan ExtJS dan Adobe AIR (Adobe Integrated Runtime)
Framework adalah untuk memperkenalkan kepada mahasiswa Teknik Informatika
di UPN “Veteran” Jatim, bahwasannya ada framework baru yang bisa digunakan untuk mengembangkan suatu web serta memperkenalkan pula bagaimana mendesktopkan suatu aplikasi web yang dalam tugas akhir ini dengan membuat aplikasi pemutar mp3.
1.2 Perumusan Masalah
Berdasarkan latar belakang yang telah dijelaskan diatas, maka dapat dirumuskan masalah dalam Tugas Akhir ini, yaitu :
1. Bagaimana membuat aplikasi pemutar mp3 dengan menggunakan HTML dan
Java Script sebagai librarynya ?
1.3 Batasan Masalah
Pada pembuatan aplikasi ini perlu didefinisikan batasan masalah mengenai sejauh mana pembuatan aplikasi ini akan dikerjakan. Beberapa batasan masalah tersebut antara lain:
1. Aplikasi ini dibuat menggunakan Framework ExtJS yang dimana terdapat
JavaScript sebagai librarynya.
2. Aplikasi ini dibuat menggunakan Adobe AIR library yang berfungsi untuk menjadikan aplikasi mp3 ini berupa aplikasi desktop .
3. Aplikasi yang dibuat ini hanya bisa memutar musik yang mempunyai
extended mp3 saja.
4. Aplikasi yang dibuat tidak bisa menampilkan video klip.
5. Aplikasi yang dibuat tidak bisa menyimpan lagu dalam playlist.
6. Aplikasi yang dibuat tidak bisa mengganti skin pada tampilan pemutar mp3. 7. Aplikasi yang di buat hanya bisa melakukan aktivitas tambah, hapus, dan
hapus semua list lagu pada playlist
1.4 Tujuan
Tujuan dari membuat aplikasi pemutar mp3 dengan menggunakan ExtJS dan Adobe AIR Framework adalah:
1. Mengimplementasikan pembuatan aplikasi pemutar mp3 dengan menggunakan extJS Framework.
2. Mengimplementasikan bagaimana menjadikan aplikasi pemutar mp3 menjadi suatu aplikasi desktop yang dibuat dalam bentuk HTML dan memakai
1.5 Manfaat
Adanya tugas akhir ini diharapkan dapat bermanfaat bagi:
1. Mahasiswa dapat menerapkan ilmu yang sudah di dapat dari bangku kuliah ke dalam dunia kerja serta memecahkan suatu permasalahan yang ada dan mencari solusi yang baik.
2. Mahasiswa dapat berfikir logis dalam menyelesaikan permasalahan.
1.6 Metodologi Pembuatan Skripsi
Dalam pembuatan Tugas Akhir kali ini, penulis akan menjelaskan tentang metode yang digunakan selama penulis menyusun dan membuat Tugas Akhir ini. 1. Studi literatur.
Mengumpulkan referensi baik dari internet, maupun sumber-sumber yang lainnya mengenai pembuatan aplikasi yang menggunakan ExJS dan Adobe
AIR Framework, serta mencari contoh-contoh aplikasi apa saja yang sudah di
buat menggunkan ExtJS dan Adobe AIR sebagai tambahan referensi Tugas Akhir ini.
2. Analisa dan perancangan Aplikasi.
Menganalisa dan merancang suatu aplikasi pemutar mp3 secara interface dan fasilitas dan fiturnya dengan membandingkan atau melihat aplikasi pemutar
mp3 yang sudah dikenal saat ini.
3. Pembuatan Aplikasi.
4. Uji coba dan evaluasi aplikasi.
Pada tahap ini setelah aplikasi selesai dibuat maka dilakukan pengujian aplikasi untuk mengetahui apakah aplikasi tersebut telah bekerja dengan benar sesuai dengan konsep yang di ajukan.
5. Penyusunan Buku Tugas Akhir.
Pada tahap ini merupakan tahap terakhir dari pengerjaan Tugas Akhir. Buku ini disusun sebagai laporan dari seluruh proses pengerjaan Tugas Akhir. dari penyusunan buku ini diharapkan dapat memudahkan pembaca yang ingin menyempurnakan dan mengembangkan aplikasi lebih lanjut.
6. Pembuatan Kesimpulan.
Pada tahap ini dalam bagian akhir pembuatan Tugas Akhir. Dibuat kesimpulan dan saran dari hasil pembuatan aplikasi yang diperoleh sesuai dengan dasar teori yang mendukung dalam pembuatan aplikasi tersebut yang telah dikerjakan secara keseluruhan.
1.7 Sistematika Penulisan
Pada laporan Tugas Akhir ini akan menjelaskan tentang pembuatan aplikasi pemutar mp3 dengan menggunakan ExtJS dan Adobe AIR Framework. Agar lebih memahami materi, laporan Tugas Akhir ini dibagi menjadi enam bab yang dilengkapi dengan penjelasan langkah-langkah dan ilustrasinya.
BAB I PENDAHULUAN
BAB II TINJAUAN PUSTAKA
Bab ini menjelaskan tentang dasar teori yang digunakan sebagai penunjang serta referensi dalam pembuatan laporan Tugas Akhir ini. Penjelasannya meliputi definisi
HTML, JavaScript, ExtJS Framework, Adobe AIR dan RIA (Rich
Internet Aplication) Framework.
BAB III ANALISA DAN PERANCANGAN SISTEM
Dalam bab ini dijelaskan tentang analisa dan perancangan sistem informasi yang antara lain berisi tentang analisa aplikasi pemutar mp3 yang sudah dikenal dengan aplikasi pemutar mp3 yang dibuat sendiri secara interface, fasilitas dan fitunya dengan menggunakan ExtJS
Framework. Dalam bab ini juga akan dijelaskan semua kebutuhan
yang diperlukan dalam membuat aplikasi pemutar mp3.
BAB IV IMPLEMENTASI SISTEM
Pada bab ini akan membahas tentang implementasi berdasarkan konsep perancangan yang ada pada BAB III beserta penjelasan tentang kebutuhan sistem supaya aplikasi yang dikerjakan sesuai dengan tujuan dari penulisan Tugas Akhir.
BAB V UJI COBA DAN ANALISA SISTEM
BAB VI PENUTUP
Bab ini akan menjelaskan tentang Kesimpulan dari keseluruhan isi dari laporan Tugas Akhir serta Saran yang disampaikan penulis untuk pengembangan aplikasi yang ada demi kesempurnaan aplikasi yang lebih baik.
DAFTAR PUSTAKA
BAB II
TINJAUAN PUSTAKA
2.1 ExtJS (Extended JavaScript)
ExtJS adalah sebuah library (framework) Javascript yang powerfull yang
dapat menyederhanakan pembuatan aplikasi web berbasis AJAX. Selain mempermudah proses request dan response secara asynchronous, ExtJS juga menyediakan komponen-komponen yang bisa di gunakan untuk membangun antarmuka aplikasi web. Komponen-komponen yang disediakan juga sangat banyak seperti tombol, grid, tab, tree, menu dan lainnya.
Library extjs adalah librari JavaScript yang dikembangkan untuk
memudahkan pembuatan user interface. Library ini awalnya adalah extension dari
library Yahoo User Interface (YUI/yui), awalnya dikenal sebagai yui-ext. extjs
adalah nama baru dari yui-ext. extjs dikembangkan pertama kali oleh Jack Slockum, sebagai library khusus dari yui.
Kini extjs bukanlah library khusus untuk yui saja, tetapi merupakan
library JavaScript yang bisa digunakan oleh banyak library dan framework
lainnya, seperti JQuery, Prototype, atau Scriptaculous (extension dari Prototype). Kini pemrogram web dapat dengan mudah membuat tampilan aplikasi berbasis web. tampilan tidak seperti halaman HTML, tetapi lebih mirip seperti aplikasi berbasis Windows. Kita dapat memiliki sebuah div atau iframe, yang dapat didrag (geser) atau diubah ukurannya (resize) dengan mudah. Dapat memiliki model menu seperti menu pada aplikasi Windows (menu bar atau pun toolbar), tanpa harus bersusah payah membuat program dengan JavaScript.
Library extjs sangat memudahkan untuk membuat tampilan, dan
menggunakan teknik pemrograman AJAX, sehingga aplikasi berbasis web yang dihasilkan menjadi seperti aplikasi Windows pada umumnya. ExtJS dapat dijalankan pada semua web browser yang populer saat ini dengan tampilan yang sama antar browser (cross browser). Beberapa web browser yang mendukung ExtJS diantaranya adalah:
Internet Explorer versi 6 keatas
Mozilla Firefox versi 1.5 keatas
Apple Safari versi 2 keatas
Opera versi 9 keatas
ExtJS yang demikian fleksibel dengan tampilan GUI-nya yang manis merupakan pengembangan dari YUI, yaitu yahoo javascript library yang dipadu dengan Jquery dan prototype. Integrasi ketiga librari dengan mengedepankan paradigma OOP yang telah didukung oleh Javascript menjadi nilai tambah librari ini untuk menjadi pilihan pemrograman web masa kini.
Keinginan untuk memiliki aplikasi berbasis web layaknya aplikasi desktop yang menyediakan kemampuan listener atau event handler mengharuskan untuk mencari contoh kode yang sudah menyediakan fitur tersebut.
2.1.1 Konsep Javascript
Javascript tidak mengenal tipe data, akan tetapi mendeteksi tipe data secara otomatis. Konsep oop javascript sudah mendukung object yang memiliki property dan method, konstruktor dan konsep pewarisan.
Sebagai contoh dibawah ini :
width : 500,
height : 400,
initEvents : function(){
MainPanel.superclass.initEvents.call(this);
}
//more action handler for this panel
});
Code diatas adalah contoh class turunan MainPanel dari class TabPanel. Dalam class ini membolehkan deklarasi method dan property. Contoh property adalah
width, dan height, sementara contoh method adalah initEvents.
Kelebihan dari ExtJs konsep AJAX yang digunakan, dibuat sederhana sehingga mudah digunakan namun jangan mengharapkan koneksi antara client - server akan seperti koneksi client-servernya applikasi desktop biasa (non-webbase) karena memang inilah AJAX (asynchronous JavaScript and XML).
Asynchronous ini yang harus diperhatikan karena koneksi internet bukanlah
koneksi yang besifat terus menerus yang menjadi dasar dari hubungan
asynchronous. code yang sederhana bisa membuat suatu aplikasi yang menarik.
tampilan yang dahulu hanya bisa di buat di desktop base application, sekarang bisa di buat pada web based application menggunakan ExtJs. kelebihan lain dari ExtJs yaitu memiliki cross browser compatibility yang bisa menangani
compatibility antar browser.
web application development juga lebih mudah karena beberapa hal :
o Cross browser compatibility yaitu perbedaan interpretasi browser terhadap source
code javascript.
keystrokes, mouse click dan monitoring window dalam browser kaya windows resize atau perubahan font.
o Extjs memakai script AJAX yang berfungsi untuk handle request ke atau dari server. komunikasi dengan server akan dilakukan di background tanpa perlu refresh-refreshan lagi.
Pengambilan data oleh client (frontend-ExtJs) terhadap server (backend) dilakukan dengan menggunakan objectnya ExtJs Ext.data.Store dengan konsep AJAX, dilakukan dengan proses delay yang secara default dilakukan selama 30
second, apa bila proses data yang dilakukan oleh server melebihi batas waktu
tersebut maka data store tidak mengembalikan nilai apa-apa dikarenakan terputusnya koneksi tersebut, untuk itu perlu kiranya menambah waktu untuk delay agar benar-benar client mendapatkan reponse dari server dimana waktu tersebut disesuaikan dengan lamanya server memproses data, adapun contoh script nya adalah sebagai berikut :
var store_tot = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '../../php/getDashboard-data.php?load=grid'
,timeout:100000
}),
reader: reader_grid
});
store_tot.load({
callback: function(opts, success, response)
{
if (success) {doOCF();}
Pada script di atas koneksi dilakukan dengan menggunakan metode proxy dan menset waktu tunggu sebanyak 10.000 second, dengan asumsi server memproses hingga menghasilkan data kurang dari 10.000 second dan apabila di bawah waktu itu server telah mersepon maka proses tinggu dari data store di hentikan.
Response diterima oleh client terdiri dari 3 paket yaitu totalCount, data, dan success dimana nilai-nilai tersebut menjadi salah satu standar yang diterapkan oleh ExtJs untuk data yang dihasilkan oleh server, berikut ini adalah contoh script PHP untuk respon server :
$nodes['totalCount']=7;
$nodes['transaksi']=$el;
$nodes['success']=true;
echo json_encode($nodes);
2.1.2 Adapter
Pertama kali Ext di kembangkan menggunakan nama "yui-ext". Ext di beri pilihan untuk menggunakan dua kerangka yaitu berupa jQuery atau Prototype dengan Scriptaculous (Protaculous). Ext mempunyai fungsi yang sama, dan semua komponen akan bekerja secara identik, apapun adaptor di pilih. Ext tidak memiliki preferensi untuk library lain atau kerangka lain, akan tetapi memiliki Ext built-in adaptor.
default script termasuk adaptor Ext yang sesuai dengan garis-garis untuk spesifik
library, seperti yang ditunjukkan di bawah ini:
Kegagalan ext adapter:
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
Untuk jQuery, termasuk file-file Document:
<script src="lib/jquery.js"></script>
<script src="lib/jquery-plugins.js"></script>
<script
src="lib/extjs/adapter/jquery/ext-jquery-adapter.js"></script>
Untuk YUI, termasuk file-file di HEAD. The utilitas file tersebut berada di build / folder utilitas library YUI download:
<script src="lib/utilities.js"></script>
<script src="lib/extjs/adapter/yui/ext-yui-adapter.js"></script>
Untuk "Prototype + Scriptaculous", termasuk file-file di HEAD:
<script src="lib/prototype.js"></script>
<script src="lib/scriptaculous.js?load=effects"></script>
<script
src="lib/extjs/adapter/prototype/ext-prototype-adapter.js"></script>
Setelah adaptor dan basis library sudah disertakan, setelah itu hanya perlu memasukkan ext-all.js atau ext-all-debug.js file. Dengan menggunakan Ext, dapat dengan mudah mulai membuat suatu program.
Hal ini di maksudkan tidak lagi dipaksa untuk mengambil script secara baris per baris untuk pengembangan suatu web. Metode ini berpikir tentang halaman web yang dianggap sulit bagi kebanyakan web development yang akan membangun suatu web.
2.1.3 Konfigurasi Extjs
Sebelum dapat menggunakan Extjs pada program yang akan buat, terlebih dahulu melihat file library Ext, serta menyertakan beberapa file pada HEAD dari halaman HTML yang sudah disediakan dalam SDK. Seperti contoh di bawah ini :
<html>
<head>
<title>Getting Started Example</title>
<link rel="stylesheet" type="text/css"
href="lib/extjs/resources/css/ext-all.css" />
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
<script src="lib/extjs/ext-all-debug.js"></script>
</head>
<body>
<!-- Nothing in the body -->
</body>
</html>
Pada contoh diatas, path file Ext harus benar dan harus relative terhadap lokasi file HTML yang sudah di buat. File-file ini disertakan dalam urutan sebagai berikut :
memodifikasi. Setiap perubahan CSS ke dalam file ini akan langsung di
upgrade.
o ext-base.js : adalah ext “adapter” atau file ini menyediakan fungsionalitas dari ext. kita bisa merubah file yang kita inginkan dengan cara kita harus menggunakan library lain, seperti jQuery menggunakan Ext.
o ext-all.js atau ext-all-debug.js : adalah ext utama pada file library, yaitu semua
widget yang berada pada file ini. Versi debug digunakan untuk membangun
dan versi non-debug digunakan untuk produksi.
untuk memulai membuat aplikasi dengan ExtJS anda membutuhkan minimal 3 file.. Ke-3 file itu adalah file HTML, file Javascript dan file CSS. Dalam file HTML berisi code untuk menyertakan resource file aplikasi yaitu file
Javascript dan file CSS, dan biasanya file HTML ini akan dipanggil atau direquest
oleh user.
Aplikasi membutuhkan library ExtJS, dimana harus mengincludekan file
javascript dari ExtJS yaitu base.js dan all.js untuk production atau
ext-base-debug.js dan ext-all-debug.js saat development, serta file css ext-all.css.
Sesuaikan lokasi path dengan lokasi path library extjs pada komputer.
Di dalam tag body bisa di tambahkan informasi apapun atau tag div dari
DOM. Kemudian file Javascript lain applyayout.js, ini adalah file javascript baru
yang di buat. Di dalamnya berisi kode javascript untuk pembuatan aplikasi web ini dalamnya berisi kode javascript untuk pembuatan aplikasi web ini. Misalnya kita akan menampilkan window, kodenya seperti berikut:
/**
* Application Layout
*///
reference local blank image
Ext.BLANK_IMAGE_URL = ‘../extjs/resources/images/default/s.gif’;
// create namespace
Ext.namespace(‘myNameSpace’);
// create application
myNameSpace.app = function() {
// do NOT access DOM from here; elements don’t exist yet
// private variables
var btn1;
var privVar1 = 11;
// private functions
var btn1Handler = function(button, event) {
alert(‘privVar1=’ + privVar1);
alert(‘this.btn1Text=’ + this.btn1Text);
};
// public space
return {
// public properties, e.g. strings to translate
btn1Text: ‘Button 1′,
// public methods
init: function() {
if (Ext.Ext2) {
btn1 = new Ext.Button({
renderTo: ‘btn1-ct’,
text: this.btn1Text,
handler: btn1Handler
});
} else {
text: this.btn1Text,
handler: btn1Handler
});
}
}
};
}(); // end of app
Ext.onReady(myNameSpace.app.init, myNameSpace.app);
// end of file
Kode diatas berisi kode minimal. Sangat disarankan kode javascript dalam file JS
JS project harus menggunakan struktur layout ini. Kode-kode diatas akan dibaca mulai dari atas sampai end of file. Tetapi kode javascript akan dieksekusi mulai dari method Ext.obReady() dimana kondisi ini dilakukan setelah semua kode
javascript
dan resource aplikasi dimuat ke browser.
Begitu method Ext.onReady() dieksekusi maka obyek-obyek javascript akan tercipta dan mengeksekusi method dan property. Sehingga kalau di buat kode cara membaca dari bawah ya, atau dari method Ext.onReady(), dengan mengibaratkan method ini adalah method mainnya.
Untuk file CSS bersifat optional, dibutuhkan jika menggunakan CSS untuk mempercantik tampilan. Jika file applayout.html ini di akses dari browser, maka akan muncul 2 button yang kalau diklik akan memunculkan pesan. Terlihat dalam kode javascript kedua button memiliki penanganan action handler, yang didefinisikan dalam properti handler; Bentuk penulisan ini menggunakan format
Setelah semua persayaratan untuk membuat ext terpenuh, maka kita bisa membuat suatu program sederhana dengan menggunakan file ext. seperti contoh berikut ini :
<html>
<head>
<title>Getting Started Example</title>
<link rel="stylesheet" type="text/css"
href="lib/extjs/resources/css/ext-all.css" />
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
<script src="lib/extjs/ext-all-debug.js"></script>
<script>
Ext.onReady(function(){
Ext.Msg.alert('Hello', 'World');
});
</script>
</head>
<body>
<!-- Nothing in the body -->
</body>
</html>
Maka akan muncul tampilan seperti berikut :
2.2 Adobe AIR (Adobe Integrated Runtime )
Adobe AIR adalah platform aplikasi yang sangat populer yang memungkinkan developer membangun aplikasi desktop yang bisa berinteraksi dengan web (internet) tanpa memakai web browser. dan membangun aplikasi Internet kaya (RIA, rich Internet applications) menggunakan Adobe Flash, Adobe
Flex, HTML, dan AJAX, yang dapat dipasang sebagai aplikasi desktop. Aplikasi
adobe air berbasis atas dua teknologi yaitu Html/Js dan Flash. Programmer dapat memilih membangun suatu aplikasi desktop menggunakan Html/Js, Flash atau Flex. Kita dapat membangun aplikasi sederhana menggunakan Html/Js. Adobe mengeluarkan rilis pratayang publik AIR (disebut Apollo) yang disertai dengan kit pengembangan aplikasi (SDK, software development kit) dan ekstensi untuk pengembangan aplikasi Apollo dengan kerangka kerja Flex pada 19 Maret 2007. Pada 10 Juni 2007, nama Apollo diganti dengan AIR, dan rilis beta publiknya diluncurkan. Beta publik versi 2 SDK AIR dirilis pada 1 Oktober 2007, beta publik 3 pada 12 Desember 2007, dan akhirnya versi 1.0 pada 25 Februari 2008. Versi alfa untuk Linux dirilis pada tanggal 31 Maret 2008.
Bahkan sekarang aplikasi-aplikasi AIR telah meluas dalam berbagai bentuk dan kegunaan, untuk web development, produktivitas, finansial, music
streaming, photo sharing, dan sebagainya. Sebagai contohnya TweetDeck, salah
satu aplikasi terpopuler yang memungkinkan pengguna berinteraksi menggunakan
Twitter dan Facebook melalui desktop.
dan Linux (catatan: hanya linux versi beta). Sejak runtime air mengijinkan “menjembatani” antara javascript dan engines ActionScript, kita dapat memanggil kode javascript dari swf, manipulasi dari HTML/DOM menggunakan ActionScript, dll.
Integrasi runtime Adobe Air tidak mudah untuk teknologi HTML/JS dan Flash. runtime adalah kesatuan dari API yang mana mengijinkan apikasi air untuk berinteraksi dengan fungsional operasi system, antara lain:
o Membaca dan menulis file
o Mengatur dan berkreasi ke dalam windows / menu
Gambar 2.3 Arsitektur Adobe Air
Adobe Air sama dengan SQLite, engine databasenya menggunakan penyimpanan local dan retrieve data.
2.2.1 Adobe Air Configuration
untuk SDK, akan menempatkan sebagai SDKPATH. Direktori dari SDK dapat dilihat seperti berikut ini:
Gambar 2.4 Direktori SDKPATH
SDK harus dikonfigurasi terlebih dahulu , dengan cara lain operasi system tidak dapat menemukan perintah untuk menjalankan. Penyebabnya , jika akan membuka tipe adl, operasi system yang akan memunculkan “command not found”. Ini akan bekerja hanya jika akan memindahkan direktori bin dari folder SDK. ketika ingin menjalankan apikasi dan mengetest command dari setiap folder, harus konfigurasi SDK terlebih dahulu. Ini sangat penting untuk path directory bin di folder SDK.
Langkah-langkah pada windows:
1. Klik kanan pada My Computer, pilih properties
2. Pilih Advanced Tab lalu klik Environment Variables button 3. Pilih PATH dari bottom list dan add path folder SDK, dan selesai
Langkah-langkah pada Mac OS X:
1. Membuka terminal (/Applications/Utilities/Terminal). 2. Mengunakan type cd pada home folder
5. Jika path Air SDK berisi white spaces wrap it with a double quote (e.g. "/my pathtosdk/air")
Gambar 2.5 Konfigurasi PATH
package AIR SDK :
1. Adobe AIR SDK berisi baris perintah berikut tools yang akan gunakan untuk
memulai dan paket aplikasinya adalah AIR Debug Launcher (ADL)
2. Memungkinkan untuk menjalankan aplikasi AIR tanpa harus menginstalnya
terlebih dahulu dengan menggunakan Debug AIR Launcher (ADL).
3. AIR paket aplikasi ke dalam paket instalasi didistribusikan. Lihat "Kemasan yang AIR file instalasi menggunakan Perangkat Pengembang AIR (ADT)".
Untuk perintah penulisan AIR memerlukan Java yang harus diinstal terlebih dahulu. dapat menggunakan Java baik dari JRE atau JDK (versi 1.4 atau yang lebih baru). Java JRE dan JDK tersedia di http://java.sun.com/.
Install AIR SDK pada windows :
1. Download AIR SDK file extention.
AIR, ekstrak isi dari SDK ke folder pada komputer (misalnya:C:\Program Files\Adobe\AIRSDK atau C:\AIRSDK).
3. ADT dan ADL terdapat dalam folder bin di SDK AIR, lalu tambahkan path ke folder ini untuk variabel PATH.
Tutup dan buka kembali terminal, atau type source profilUntuk mengetest keberhasilan dari konfigurasi yang sudah di buat, buka terminal adt command:
Gambar 2.6 Terminal Bush
Contoh penulisan ADL :
1. Untuk menjalankan aplikasi dalam direktori :
adl myApp-app.xml.
2. Untuk menjalankan aplikasi dalam sub direktori :
adl source/myApp-app.xml release
3. Untuk menjalankan aplikasi dalam dua argumen baris perintah, "tick" dan "tock" :
adl myApp-app.xml -- tick tock
4. Untuk menjalankan aplikasi dengan runtime tertentu :
5. Untuk menjalankan aplikasi tanpa dukungan debug:
adl myApp-app.xml -nodebug
Untuk informasi tentang memulai menggunakan alat SDK AIR, lihat "Membuat aplikasi AIR menggunakan piranti baris perintah".
Tabel 2.1 Perintah AIR SDK
SDK folder Deskripsi File
BIN
adl.exe -- AIR Debug Launcher (ADL) memungkinkan untuk
menjalankan aplikasi tanpa terlebih dahulu membuka AIR dan menginstalnya.
adt.bat – AIR Developer Tool (ADT) adalah paket-paket aplikasi
untuk file AIR.
FRAMEWORKS
AIRaliases.js – Menyediakan "alias" definisi yang memungkinkan
untuk mengakses kelas runtime ActionScript.
Servicemonitor.swf – AIR Menyediakan aplikasi dengan suatu alat
yang bisa melihat perubahan dalam konektivitas jaringan untuk host tertentu.
LIB adt.jar – adt file eksekusi, yang disebut oleh adt.bat file.
Descriptor.1.0.xsd Skema aplikasi file.
RUNTIME AIR runtime – runtime digunakan oleh ADL untuk meluncurkan aplikasi AIR sebelum diinstal.
SAMPLES Folder ini berisi contoh file descriptor aplikasi, sebuah sampel dari seamless menginstal fitur (badge.swf), dan aplikasi AIR default ikon. SRC Folder ini berisi file sumber untuk menginstal samples.
TEMPLATES descriptor-template.xml - Sebuah template dari aplikasi file descriptor, yang diperlukan untuk setiap aplikasi AIR.
2.2.2 Instal Extention AIR untuk Dreamweaver
mungkin memiliki satu set halaman web yang berinteraksi satu sama lain untuk menampilkan data XML. dapat menggunakan Adobe AIR Extension untuk Dreamweaver untuk paket set halaman ke dalam sebuah aplikasi kecil yang dapat diinstal pada komputer pengguna. Bila pengguna menjalankan aplikasi dari desktop, aplikasi terbuka dan menampilkan situs web dalam jendela aplikasi sendiri, independen dari browser. Pengguna dapat menelusuri situs web secara lokal pada komputer tanpa sambungan Internet.
Halaman dinamis seperti Adobe ColdFusion dan halaman PHP tidak akan berjalan dalam Adobe AIR. Runtime hanya bekerja dengan HTML dan JavaScript. Namun, dapat menggunakan JavaScript dalam halaman untuk memanggil layanan web terbuka di Internet, termasuk ColdFusion atau PHP yang dihasilkan dengan metode seperti Ajax XML, Http Request atau Adobe AIR API tertentu.
Konfigurasi AIR Extention :
Untuk menggunakan Adobe AIR Extension untuk Dreamweaver, software berikut harus diinstal dan dikonfigurasi dengan benar, seperti berikut ini:
• Dreamweaver CS3 atau Dreamweaver CS4 • Adobe Extension Manager CS3
• Java JRE 1.4 diperlukan untuk menciptakan Adobe AIR file. Java JRE tersedia di http://java.sun.com/.
Instal Extention Adobe AIR untuk dreamweaver :
1. Download Extention Adobe AIR untuk dreamweaver di http:// www.adobe.com /products /air /tools /ajax/.
2. Double-click file extention .mxp di Explorer (Windows) atau Finder (macintosh).
3. Ikuti petunjuk selanjutnya untuk menginstal extention. 4. Setelah selesai menginstal, restart dreamweaver.
2.3 Mengenal Web Server
Web server adalah sebuah perangkat lunak server yang berfungsi
menerima permintaan HTTP atau HTTPS dari client, hal ini di kenal dengan nama
web browser, dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman
web yang umumnya berbentuk dokumen HTML. Web server yang terkenal di
antaranya adalah Apache dan Microsoft Internet Information Service (IIS).
Apache (server HTTP Apache atau server web/www Apache) adalah web
server yang dapat di jalankan di banyak sistem operasi (Unix, BSD, Linux,
Microsoft Windows, dan Novell Netware) yang berguna untuk melayani dan memfungsikan web. Protokol yang di gunakan untuk melayani fasilitas web/www ini menggunakan HTTP.
lapisan aplikasi (application layer). IIS juga menjadi fondasi dari platform Internet dan Intranet Microsoft, yang mencakup Microsoft Site Server, Microsoft
Commercial Internet System dan produk-produk Microsoft BackOffice lainnya.
Yang terdapat di pustaka “Tip dan Trik Kolaborasi PHP dan MySQL untuk membuat Website Database yang Interaktif”.
2.4 Pengertian PHP
PHP merupakan bahasa interpreter yang hampir mirip dengan bahasa C
dan perl yang memiliki kesederhanaan dalam perintah. PHP dapat digunakan bersamaan dengan WML sehingga pembangunan situs web site dapat dilakukan dengan cepat dan mudah. PHP dapat digunakan untuk memperbarui
(meng-update) database, menciptakan database, dan mengerjakan perhitungan
matematika. PHP dapat di ambil gratis melalui internet dengan alamat situs
http://www.PHP.net. Menurut dokumen resmi PHP, PHP adalah singkatan dari
Hypertext Preprocessor.
PHP merupakan bahasa scripting (berbentuk script) yang menyatu dengan
HTML dan dijalankan pada server side. Artinya semua sintaks yang penulis berikan akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke
browser (client side) hanya hasilnya saja. Secara khusus, PHP dirancang untuk
membangun sebuah web dinamis. Artinya, ia dapat membentuk suatu tampilan berdasarkan permintaan yang up to date. Misalnya penulis bisa menampilkan isi
database ke dalam halaman web. Pada prinsipnya , PHP mempunyai fungsi yang
2.4.1 Dasar – Dasar PHP
PHP dijalankan dalam file berekstensi .PHP, .PHP3 atau .phtml, tetapi
secara umum ekstensi file PHP adalah (.PHP). Kode PHP menyatu dengan tag – tag HTML dalam satu file. Kode PHP diawali dengan tag <? atau <?PHP dan ditutup dengan ?>.
PHP diawali sebagai berikut :
<?PHP
...
?>
File contoh1.PHP:
<html>
<head>
<title>
Hallo Belajar PHP
</title>
[image:42.595.154.494.494.734.2]Gambar hasil dari eksekusi dari file contoh1.php, seperti yang terlihat pada Gambar 2.7 Hasil dari file contoh 1.PHP :
2.4.2 Kelebihan PHP
PHP terkenal dengan mempunyai 4 kelebihannya yaitu 4P (Four Pee) :
1. Practical / Praktis
PHP adalah bahasa pemrograman yang sangat longgar dalam penulisan,
dan ini meningkatkan kepraktisan buat para penggunanya. Misalnya saja programmer tidak diharuskan untuk menuliskan atau menghapus variabel. Walaupun kadang mereka juga tidak bisa mengatakan dengan mudah yang kemudian dipanggil dalam sebuah skrip, menebak formula terbaik dalam penetapan variabel secara otomatis kemudian menghapus variabel dan dan mengembalikan resource ke sistem setelah skrip berhasil di eksekusi. Pada akhirnya, PHP mampu membuat programmer lebih berpikir pada tujuan akhir dari project yang akan dibuat.
2. Power
Sudah menjadi rahasia umum kalau PHP mampu membuat halaman dinamis, memanipulasi form, dan dapat dihubungkan dengan database. Selain yang disebutkan tadi, ternyata PHP juga dapat melakukan hal – hal di bawah ini :
a. Membuat dan memanipulasi file Macromedia Flash, gambar, dan Portable Document Format PDF.
b. Berkomunikasi dengan LDAP.
c. Berkomunikasi dengan banyak protocol, termasuk IMAP, POP3 dan NNTP. d. Berkomunikasi dengan Credit-Card Processing Solution.
2.4.3 Struktur Program PHP
Kode program PHP menyatu dengan tag-tag HTML (Hypertext Markup
Language) dalam satu file. Kode PHP diawali dengan tag <? Atau <?php dan
ditutup dengan tag ?>. Berikut struktur penulisan sintaks PHP dalam HTML (Hypertext Markup Language) :
<HTML> <HEAD>
<TITLE></TITLE> </HEAD>
<BODY> <?
…
- dokumen PHP- …
?>
</BODY> </HTML>
2.5 CSS
CSS (Cascading Style Sheets) digunakan dalam kode HTML (Hypertext
Markup Language) untuk menciptakan suatu kumpulan Style yang terkadang
dapat digunakan untuk memperluas kemampuan HTML (Hypertext Markup
Language). CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk
direkomendasikan W3C (World Wide Web Consortium) untuk melukiskan gaya seperti huruf, warna, ukuran, jarak, posisi pada dokumen-dokumen web. CSS (Cascading Style Sheet) sangat membantu para web designer untuk memperindah halaman web template.
Tag table punya elemen border, CSS (Cascading Style Sheet) juga punya
format untuk border namun lebih detail lagi seperti : border-top, border-right,
border-bottom, border-left. artinya lebih kompleks karena memungkinkan kita
membuat sisi border yang berbeda.
2.6 Unified Modelling Language (UML)
Dalam suatu proses pengembangan software, analisa dan rancangan telah merupakan terminologi yang sangat tua. Pada saat masalah ditelusuri dan spesifikasi dinegosiasikan, dapat dikatakan bahwa berada pada tahap rancangan. merancang adalah menemukan suatu cara untuk menyelesaikan masalah, salah satu tool/model untuk merancang pengembangan software yang berbasis
object-oriented adalah UML. Alasan mengapa UML digunakan adalah, pertama,
scalability dimana objek lebih mudah dipakai untuk menggambarkan sistem yang
besar dan komplek. Kedua, dynamic modeling, dapat dipakai untuk pemodelan sistem dinamis dan real time. Sebagaimana dalam tulisan pertama, penulis menjelaskan konsep mengenai obyek, OOA&D (Obyek Oriented Analyst/ Design) dan pengenalan UML, maka dalam tulisan kedua ini lebih ditekankan pada cara bagaimana UML digunakan dalam merancang sebuah pengembangan software
2.6.1 Use Case
Sebuah use case menggambarkan suatu urutan interaksi antara satu atau lebih aktor dan sistem. Dalam fase requirements, model use case mengambarkan sistem sebagai sebuah kotak hitam dan interaksi antara aktor dan sistem dalam suatu bentuk naratif, yang terdiri dari input user dan respon-respon sistem. Setiap
use case menggambarkan perilaku sejumlah aspek sistem, tanpa mengurangi
struktur internalnya. Selama pembuatan model use case secara pararel juga harus ditetapkan obyek-obyek yang terlibat dalam setiap use case.
Perhatikan satu contoh sederhana dari proses perbankan, yaitu mesin teller otomatis (Automated Teller Machine-ATM) yang memberikan kemudahan pada
customer - nya untuk mengambil uang dari rekening bank secara langsung. Pada
proses ini terdapat satu aktor, yaitu ATM Customer dan satu use case, yaitu
Penarikan Dana. Proses ini dapat dilihat pada Gambar 2.8. Use case Penarikan
Dana menggambarkan urutan interaksi antara customer dengan sistem, diawali ketika customer memasukan kartu ATM ke dalam mesin pembaca kartu dan akhirnya menerima pengeluaran uang yang dilakukan oleh mesin ATM.
Gambar 2.8 Contoh Aktifitas Aktor Dan Use Case
2.6.2 Aktor
eksternal yang berinteraksi dengan sistem. Terdapat beberapa variasi bagaimana aktor dibentuk [Fowler dan Scott 1999]. Sebuah aktor sering kali merupakan manusia (human user). Pada sejumlah sistem informasi, manusia adalah satu-satunya aktor. Dan mungkin saja dalam sistem informasi, seorang aktor bisa saja menjadi suatu sistem eksternal. Pada aplikasi real-time dan distribusi, sebuah aktor bisa saja menjadi satu perangkat eksternal I/O atau sebuah alat pengatur waktu. Perangkat eksternal I/O dan pengatur waktu aktor secara khusus lazimnya berada dalam real-time yang tersimpan dalam sistem (real-time embedded
systems), sistem berinteraksi dengan lingkungan eksternal melalui sensor dan
aktuator.
Primary actor (aktor utama) memprakarsai sebuah use case. Jadi, suatu
Perhatikan beberapa contoh human aktor (aktor manusia). Pada sistem perbankan, satu contoh aktor adalah manusia yang berperan sebagai teller yang berinteraksi dengan sistem melalui perangkat standar I/O, seperti keyboard, display, atau mouse. Contoh lainnya adalah manusia yang berperan sebagai
customer yang berinteraksi dengan sistem melalui mesin teller otomatis (ATM).
Dalam hal ini, customer berinteraksi dengan sistem dengan menggunakan beberapa perangkat I/O, termasuk perangkat pembaca kartu (card reader), pengeluar uang (cash dispenser), dan pencetak tanda terima (receipt printer), ditambah lagi keyboard dan display.
Pada beberapa kasus, bagaimana pun juga sebuah aktor bisa saja berupa perangkat I/O. Hal ini bisa terjadi ketika sebuah use case tidak melibatkan manusia, seperti yang sering terjadi pada aplikasi-aplikasi real-time. Dalam hal ini, I/O aktor berinteraksi dengan sistem melalui sebuah sensor. Contoh aktor yang merupakan perangkat input adalah Arrival Sensor pada Sistem Kontrol Elevator. Sensor ini mengidentifikasi elevator tersebut pada saat hendak mencapai lantai dan perlu dihentikan. Kemudian sensor tersebut menginisiasikan Stop
Elevator at Floor use case. Aktor lain dalam Elevator Control System adalah
orang yang berada dalam elevator (human passenger) yang berinteraksi dengan sistem melalui tombol-tombol nomor pada tingkat lantai dan tombol-tombol elevator. Input dari aktor secara aktual dideteksi melalui sensor-sensor tombol lantai dan sensor-sensor tombol elevator berturut-turut.
oleh sistem pada suatu basis reguler. Hal ini sangat penting dalam sistem-sistem real-time, dan juga sangat berguna dalam sistem informasi. Walaupun sejumlah metodologi menganggap pengukur waktu merupakan hal internal bagi sistem, dan akan lebih berguna dalam desain aplikasi real-time untuk memperhatikan pengukur-pengukur waktu sebagai eksternal logis bagi sistem dan menganggapnya sebagai primary aktor yang memulai aksi dalam sistem. Contohnya, pada sistem monitoring mobil, beberapa use case di-inisialisasi dengan suatu aktor pengukur waktu. Sebagai contoh dapat dilihat pada Gambar 2.9 Timer aktor mengawali Calculate Trip Speed use case, yang secara periodik menghitung rata-rata kecepatan melalui suatu jalan/ jejak dan menampilkan nilai ini ke driver. Dalam hal ini, pengukur waktu merupakan primary aktor (aktor utama) dan driver merupakan secondary aktor (aktor kedua).
Gambar 2.9 Contoh Aktor Pengukur Waktu
2.6.3 Identifikasi Use Case
Sebuah use case dimulai dengan masukan/input dari seorang aktor. Use case merupakan suatu urutan lengkap kejadian-kejadian yang diajukan oleh seorang aktor, dan spesifikasi interaksi antara aktor dengan sistem. Use case yang sederhana hanya melibatkan satu interaksi/hubungan dengan sebuah aktor, dan use case yang lebih kompleks melibatkan beberapa interaksi dengan aktor. Use cases yang lebih kompleks juga melibatkan lebih dari satu aktor.
Untuk menjabarkan use case dalam sistem, sangat baik bila dimulai dengan memperhatikan aktor dan actions/aksi yang mereka lakukan dalam sistem. Setiap use case menggambarkan suatu urutan interaksi antara aktor dengan sistem. Sebuah use case harus memberikan sejumlah nilai pada satu aktor.
Kemudian, kebutuhan fungsional sistem dijelaskan dalam use case yang merupakan suatu spesifikasi eksternal dari sebuah sistem. Bagaimanapun juga, ketika membuat use case, sangatlah penting menghindari suatu dekomposisi fungsional yang dalam beberapa use case kecil lebih menjelaskan fungsi-fungsi individual sistem daripada menjelaskan urutan kejadian yang memberikan hasil yang berguna bagi aktor.
mengajukan tiga use case seperti yang dapat dilihat di Gambar 2.10 Withdraw
Funds (Penarikan dana), Query Account, dan Transfer Funds (Pentransferan
Dana).
Urutan utama use case menjelaskan urutan interaksi yang paling umum antara aktor dan sistem. Dan mungkin saja terdapat cabang-cabang urutan use case utama, yang mengarah pada berkurangnya frekuensi interaksi antara aktor dengan sistem.Deviasi-deviasi dari urutan utama hanya dilaksanakan pada beberapa situasi, contohnya jika aktor melakukan kesalahan input pada sistem.
Aplikasi kebutuhan, alternatif ini memecahkan use case dan kadang-kadang bersatu kembali dengan urutan utama. Cabang-cabang alternatif digambarkan juga dalam use case. Dalam use case Withdraw Funds, urutan utama adalah urutan tahap-tahap dalam keberhasilan pelaksanaan penarikan (withdrawal). Cabang-cabang alternatif digunakan untuk mengarahkan berbagai
error cases, seperti ketika kartu ATM tidak dikenali atau dilaporkan telah hilang
dan lain sebagainya.
2.6.4 `Pendokumentasian Model Use Case
Use case didokumentasi dalam use case model sebagai berikut:
1. Use Case Name. Setiap use case diberi nama.
2. Summary. Deskripsi singkat use case, biasanya satu atau dua kalimat.
3. Dependency. Bagian ini menggambarkan apakah use case yang satu
tergantung pada use case yang lain, dalam arti apakah use case tersebut termasuk pada use case yang lain atau malah memperluas use case lain.
4. Actors. Bagian ini memberikan nama pada actor dalam use case. Selalu
terdapat use case utama (primary use case) yang memulai use case. Disamping itu terdapat juga secondary use case yang terlibat dalam use case. Contohnya, dalam use case Withdraw Funds, ATM Customer adalah actor-nya.
5. Preconditions. Satu atau lebih kondisi harus berjalan dengan baik pada
permulaan use case; contohnya mesin ATM yang tidak jalan, menampilkan pesan Selamat Datang.
BAB III
ANALISA DAN PERANCANGAN SISTEM
3.1 Analisis Permasalahan
Aplikasi yang akan dibuat pada Skripsi ini adalah sebuah aplikasi pemutar mp3 dan aplikasi ini merupakan suatu aplikasi berbasis ExtJS (Extended
JavaScript) Framework dan Adobe AIR (Adobe Integreted Runtime) library yang
dapat memutar secara streaming melalui web server ataupun dapat memutar secara load data melalui folder yang ada pada laptop ataupun komputer. Data yang diolah adalah data lagu yang mempunyai extended mp3.
3.2 Perancangan Sistem
Perancangan sistem berisikan penjelasan tentang deskripsi umum sistem, proses-proses akan dijabarkan dalam use case diagram, activity diagram, dan perancangan antarmuka aplikasi.
3.2.1 Deskripsi Umum Sistem
Deskripsi dari arsitektur sistem pada Gambar 3.1 adalah sebagai berikut :
1. User atau pengguna memutar lagu yang bisa di cari dalam komputer atau
laptop.
2. Laptop atau komputer adalah media yang digunakan untuk meletakkan aplikasi pemutar mp3.
3. User dapat menambah data, disini pengguna bisa menambahkan lagu dengan
Mengklik tanda tambah pada playlist, kemudian pilih direktori lagu yang anda pilih, lalu klik file lagu.
4. Proses penambahan data terjadi.
5. User dapat menyimpan data lagu, di sini pengguna bisa menyimpan lagu
yang ada pada playlist, kemudian klik menu simpan. 6. Proses penyimpanan terjadi.
7. User dapat menghapus data satu per satu.
8. User mendapatkan data sudah terhapus.
9. User dapat menghapus semua data.
10. User mendapatkan data sudah terhapus semua.
[image:54.595.168.460.323.558.2]Tambah User menambah data lagu Hapus User menghapus data lagu Hapus semua User menghapus semua data lagu 2 3 4 5 6 7 8 Simpan User menyimpan data lagu 1 9 10
Gambar 3.1 Deskripsi Sistem Aplikasi Pemutar MP3
3.2.2 Kebutuhan Sistem
3.2.2.1Kebutuhan Pengguna
Berdasarkan arsitektur pada gambar 3.1 untuk memenuhi kebutuhan pengguna dalam berinteraksi dengan sistem serta untuk mengetahui kebutuhan-kebutuhan apa saja yang berpengaruh pada sistem nantinya, maka perlu dijabarkan kebutuhan apa saja yang akan dibutuhkan oleh pengguna, antara lain:
1. Komputer / Laptop tidak tergantung merk, apapun bisa dipakai.
2. Menu untuk penambahan data, agar user atau pengguna bisa menambah data lagu dalam playlist.
3. Menu simpan playlist pada web server, agar user atau pengguna bisa menyimpan data lagu yang ada pada server.
4. Menu simpan pada form playlist, agar user atau pengguna bisa menyimpan data lagu yang ada pada playlist.
5. Menu hapus, supaya user atau pengguna bisa menghapus file lagu yang di inginkan dalam playlist.
6. Menu hasil, dimana user bisa melihat hasil dari penambahan ataupun penghapusan dalam playlist.
3.2.3 Use Case Diagram
Pemodelan use case mengidentifikasi dan menggambarkan fungsi – fungsi sistem dengan menggunakan alat yang disebut use case. Use case merupakan hasil penyusunan kembali lingkup fungsionalitas sistem menjadi banyak pernyataan fungsionalitas yang lebih kecil.
Pl ayer lagu
Hapus l agu Tambah lagu
Pengguna
(from Acto...
simpan lagu
Gambar 3.2 Use Case Diagram Aplikasi Pemutar MP3
Pada player lagu merupakan aktivitas yang dilakukan pengguna untuk memutar lagu, untuk pause lagu yang sedang berjalan, untuk stop lagu, untuk next lagu ataupun untuk previous lagu. Untuk memutar lagu, pengguna terlebih dahulu memilih lagu pada playlist, kemudian menekan tombol play pada player. Untuk
pause lagu yang sedang berjalan, terlebih dahulu pengguna menekan tombol
pause, maka lagu akan berhenti. Untuk stop lagu, pengguna terlebih dahulu harus
menekan tombol stop, maka lagu akan berhenti. untuk next lagu, pengguna menekan tombol next pada player, maka akan memutar lagu berikutnya sesuai dengan deretan data lagu yang ada dalam playlist, Untuk previous lagu, pengguna menekan tombol previous, maka akan memutar lagu sebelumnya sesuai dengan deretan data lagu yang ada dalam playlist. Tambah data merupakan aktivitas yang dilakukan pengguna dalam menambah data atau deretan lagu. Untuk menambah data pengguna harus menekan tombol tambah terlebih dahulu yang ada di dalam
inginkan, ketika pengguna berhasil menambah data lagu yang di inginkan, hasil dari penambahan data tersebut akan diletakkan pada playlist. Simpan data merupakan aktivitas yang dilakukan pengguna dalam menyimpan data lagu pada
server ataupun pada playlist. Untuk menyimpan data lagu pada server, pengguna
harus membuka web server terlebih dulu, pilih lagu yang di inginkan, kemudian tekan tombol simpan playlist. Untuk menyimpan data lagu pada playlist, pengguna menekan tombol simpan, maka data lagu yang ada pada playlist akan tersimpan. Hapus Data lagu merupakan aktivitas yang dilakukan oleh pengguna dalam proses menghapus data lagu yang sudah ada dalam playlist dengan cara terlebih dahulu memilih lagu yang akan dihapus lalu menekan tombol hapus yang ada pada menu playlist maka lagu yang ingin di hapus pada playlist akan terhapus. Hapus semua data merupakan suatu aktivitas yang dimana pengguna bisa menghapus semua data yang berada dalam playlist dengan cara pengguna terlebih dulu menekan tombol hapus semua maka data lagu yang ada pada playlist akan terhapus semua.
3.2.4 Activity Diagram
Terdapat 4 activity diagram yang perlu dijelaskan dalam sistem ini karena
proses di dalam use case ini tergolong kompleks, yaitu activity diagram player lagu, activity diagram tambah data, activity diagram simpan data,dan activity hapus data.
Pada form player terdapat beberapa aktivitas yang dapat di jalankan
pengguna di antaranya yaitu play lagu, pause lagu, stop lagu, next lagu, dan
main di sini di asumsikan sebagai player, setelah itu pengguna memilih lagu yang
[image:58.595.124.515.193.465.2]di inginkan, kemudian tekan play pada player, maka lagu akan berputar seperti pada Gambar 3.3.
Gambar 3.3. Activity Diagram Player Lagu
sebagai player lalu buka menu playlist, setelah itu tekan tambah folder, maka menu browse direktori akan muncul, pengguna mencari data lagu yang di inginkan dan tekan “ok”, maka data lagu yang di inginkan oleh pengguna akan muncul dalam playlist, seperti Gambar 3.4 di bawah ini.
[image:59.595.134.510.210.591.2]
Gambar 3.4 Activity Diagram Tambah Data
pengguna menekan tombol simpan, maka data lagu yang terdapat pada playlist akan tersimpan, seperti Gambar 3.5 di bawah ini. Pada diagram hapus data, untuk menghapus data lagu, terdapat 2 jenis dalam menghapus data lagu dalam playlist, yaitu menghapus lagu satu per satu dan menghapus semua lagu dalam playlist. Untuk menghapus lagu satu per satu, pengguna harus terlebih dahulu memilih salah satu lagu yang akan di hapus dalam data playlist, kemudian tekan hapus lagu, maka lagu akan terhapus.
[image:60.595.196.431.370.705.2]Untuk Menghapus semua lagu, pengguna menekan tombol hapus semua, maka lagu yang tedapat dalam playlist, akan terhapus semua. Seperti pada Gambar 3.6 berikut.
Gambar 3.6 Activity Diagram Hapus Lagu
3.2.5 Perancangan Antarmuka
1. Gambar 3.7 antarmuka web server, terdapat check box, keterangan judul lagu, dan tombol simpan playlist. dalam antar muka web server terdapat fungsi yang berbeda, seperti yang di jelaskan pada tabel 3.1 di bawah ini.
Simpan Playlist
a b
[image:62.595.153.488.164.381.2]c
Gambar 3.7 Antarmuka Web Server
Keterangan :
Tabel 3.1 Keterangan Antarmuka Web Server
a : Merupakan check box, untuk memilih lagu yang di inginkan. b : Merupakan text lagu, menampilkan judul lagu.
c : Untuk tombol simpan lagu yang telah di pilih.
Gambar 3.8 Antarmuka Menu Player
[image:63.595.119.555.274.563.2]Keterangan :
Tabel 3.2 Keterangan Menu Player
a : Untuk menampilkan nama penyayinya b : Untuk menampilkan judul lagu yang diputar
c : Merupakan keterangan durasi dari lagu yang diputar d : Uuntuk jalan putarnya lagu
A : Untuk tombol previous data lagu sebelumnya B : Untuk tombol pause lagu yang sedang diputar C : Untuk tombol stop lagu yang sedang diputar D : Untuk tombol play lagu
E : Untuk tombol next data lagu berikutnya F : Untuk pengaturan volume lagu
G : Untuk membuka form playlist
2. Gambar 3.9 antarmuka menu playlist, terdapat 3 tombol yaitu tombol tambah,
Gambar 3.9 Antarmuka Menu Playlist
[image:64.595.120.514.86.363.2]Keterangan :
Tabel 3.3 Keterangan Menu Playlist
a : Untuk menampilkan nama judul b : Untuk menampilkan nama artis
c : Untuk menampilkan keterangan durasi lagu A : Untuk tombol tambah lagu
BAB IV
IMPLEMENTASI SISTEM
4.1 Lingkungan Implementasi
Pada bagian ini akan dijelaskan mengenai perangkat keras dan perangkat lunak yang digunakan pada implementasi sistem ini.
Perangkat Keras :
Dibutuhkan satu Personal Computer dengan prosesor minimal Pentium II 266, memori 64 Mb (Windows 98) atau 128 (Windows XP), Harddisk dengan kapasitas minimal 40 Gb dan VGA Card minimal 4 Mb.
Perangkat Lunak :
- Sistem Operasi Windows XP.
- Dreamweaver 8 untuk mendesain aplikasi ini.
Selain Personal Computer, perangkat lain yang digunakan untuk implementasi sistem yaitu laptop dengan spesifikasi berikut:
Perangkat Lunak:
- Microsoft Windows XP SP2
- Dreamweaver CS3 atau Dreamweaver CS4 - Adobe Extension Manager CS3
- Java JRE 1.4 diperlukan untuk menciptakan Adobe AIR file. Java JRE tersedia di http://java.sun.com/.
- PHP yang digunakan untuk Web Server - Web server menggunakan apache 2.2
4.2 Instalasi Apache
Paket Apache untuk Windows disediakan dalam bentuk installer, atau msi (Microsoft Installer). Setelah didownload, jalankan langsung file tersebut dan kita ikuti proses instalasi apache. Pilih mode custom ketika proses instalasi, sehingga kita bisa merubah direktori tempat apache akan diinstal. Jadikan C:\webapp sebagai direktori tempat instalasi apache. Ketika ada pilihan apakah apache akan dijalankan sebagai service, atau dijalankan secara manual, pilih untuk dijalankan secara manual.
Setelah proses instalasi selesai, kita dapat menjalan server Apache melalui menu yang sudah tersedia di start menu. Pastikan juga bahwa tidak ada server web yang sedang berjalan di komputer kita. Untuk menjalankan Apache dapat juga dengan menjalankan langsung file Apache.exe yang ada di direktori C:\webapp\Apache.
Setelah server Apache berjalan, uji menggunakan web browser. Jalankan Internet Explorer atau web browser lain, lalu buka alamat http://localhost Jika sudah terlihat halaman yang berisi informasi oleh Apache, berarti server Apache sudah berjalan dengan baik. Untuk mematikan Apache, jalankan perintah berikut dari menu Run... di start menu C:\webapp\Apache\Apache.exe -k shutdown.
4.3 Instalasi AIR SDK untuk Windows
memungkinkan kita untuk menjalankan aplikasi AIR tanpa harus menginstalnya terlebih dahulu, langkah-langkah instalasi, seperti berikut ini:
1. Download AIR SDK file extention.
2. AIR SDK yang didistribusikan sebagai arsip file standar. Untuk menginstal AIR, ekstrak isi dari SDK ke folder pada komputer Anda (misalnya:C:\Program Files\Adobe\AIRSDK atau C:\AIRSDK).
3. ADT dan ADL terdapat dalam folder bin di SDK AIR, lalu tambahkan path ke folder ini untuk variabel PATH kita.
4.4 Instalasi Adobe AIR Extention untuk Dreamweaver
Untuk dapat menjalankan aplikasi berbasis AIR di dreamweaver , kita harus terlebih dahulu menginstal extention Adobe AIR, seperti berikut ini:
1. Do
