BAB 2 LANDASAN TEORI
2.1
Teori - teori Dasar/Umum Pada bab ini akan dijelaskan teori-teori yang akan digunakan dalam perancangan CASE Tool UML berbasis web ini. Penjelasan akan dibagi menjadi dua bagian, bagian pertama yaitu teori dasar atau umum yang relevan dan dipakai sebagai acuan dalam perancangan software secara umum serta menggambarkan sistem aplikasi yang akan dibuat.
2.1.1 Rekayasa Perangkat Lunak Rekayasa perangkat lunak (Pressman, 2005, p53-54) adalah proses pembentukan dan penggunaan prinsip-prinsip rekayasa untuk mendapatkan software yang ekonomis dan handal serta bekerja secara efisien. Rekayasa perangkat lunak (software engineering) terdiri dari beberapa lapisan atau layer-layer yang berupa : - Tools (Alat Bantu) Menyediakan dukungan untuk proses dan metode baik secara otomatis maupun semi otomatis untuk proses model dan metode. Dapat juga berupa sebuah sistem yang mendukung pengembangan perangkat lunak, yang disebut computer-aided software engineering (CASE). - Method (Metode) Cara yang digunakan untuk membantu dalam merancang sebuah sistem secara teknis yang mencakup analsis kebutuhan (requirement analysis), 8
9
permodelan design (design modeling), program konstruksi (program construction), dan dukungan terhadap sistem (support). - Process (Proses) Merupakan
sebuah
fondasi
dari
sebuah
proses
model
yang
mendefinisikan sebuah framework dari sebuah RPL yang akan dibangun dan dikembangkan secara rasional dan tepat waktu. - A Quality Focus (Berfokus Pada Kualitas) Semua pendekatan dengan teknik apapun pada rekayasa perangkat lunak harus berdasarkan pada standar yang tidak boleh lepas dari fokus utama yang mengutamakan kualitas. Fondasi dasar dan utama yang mendukung rekayasa perangkat lunak yang baik yaitu berfokus pada kualitas.
2.1.1.1 Pengertian Perangkat Lunak Perangkat lunak (Pressman, 2005, p36) adalah sekumpulan instruksi (program komputer) yang ketika dijalankan menyediakan fitur yang diinginkan, fungsi, dan kinerja, struktur data yang memungkinkan program
untuk
menyediakan
informasi
dan
dokumen
yang
menggambarkan sebagian atau keseluruhan dari operasi dan penggunaan program.
2.1.1.2 Karakteristik Perangkat Lunak Ada 3 karakteristik perangkat lunak antara lain : - Perangkat Lunak dikembangkan atau direkayasa, bukan diproduksi
10
Meskipun ada persamaan antara pengembangan dan pembuatan, tetapi dalam hubungannya dengan perangkat lunak hal tersebut merupakan dua hal yang berbeda. Kualitas yang bagus adalah tujuan dari kedua aktivitas tersebut, tetapi pada proses pembuatan, biasanya digunakan untuk membuat perangkat keras dan bukan untuk pengembangan perangkat lunak. -
Perangkat lunak tidak dapat “usang” Perangkat lunak (software) berbeda dengan perangkat keras (hardware), perangkat lunak (software) tidak dapat usang atau tidak bisa ketinggalan jaman seiring dengan berjalannya waktu karena software pada umumnya selalu diperbaharui terus menerus (up to date).
-
Pada industri konstruksi atau pembangunan dilakukan dengan berbasis
kepada
komponen,
sedangkan
pada
software
pembangunan dilakukan dengan cara dikembangakan untuk meningkatkan kualitas dan berbagai fitur.
2.1.1.3 Paradigma Perangkat Lunak Scrum Model Scrum adalah metode handal yang dirancang untuk menambah energi, fokus, kejelasan, tranparansi pengerjaan dan pelaksanaan proyek. (Sutherland, 2010, p3).
11
Scrum Roles terdiri dari : 1. Pemilik Produk ( Scrum Owner ) Pemilik Produk ( Scrum Owner ) bertanggung jawab untuk memaksimalkan pengembalian investasi dengan mengidentifikasi fitur produk, menerjemahkan tersebut ke dalam daftar fitur prioritas, memutuskan yang harus di bagian atas daftar untuk Sprint berikutnya, dan terus memperbaharui dan menyempurnakan daftar. Pemilik Produk memiliki tanggung jawab laba dan rugi untuk produk, dengan asumsi itu adalah produk komersial. Dalam kasus sebuah aplikasi internal, Produk Pemilik tidak bertanggung jawab atas ROI ( Return on investment ) dalam arti suatu komersial produk (yang akan menghasilkan pendapatan), namun mereka masih bertanggung jawab untuk memaksimalkan ROI ( Return on investment ). ROI ( Return on investment ) adalah laba atas investasi yang diberikan kepada masingmasing pemegang saham sesuai dengan saham yang ada pada perusahaan yang bersangkutan. 2. Tim ( Scrum Team ) Tim ( Scrum Team )bertugas membangun produk yang akan digunakan oleh client misalnya aplikasi atau situs website. Tim di Scrum merupakan cross fungsional dan mencakup semua keahlian diperlukan untuk memberikan produk yang berpotensi padasetiap Sprint. Hal ini juga mengorganisir diri (self-managing), dengan tingkat otonomi yang tinggi dan akuntabilitas. Oleh karena itu, tidak ada manajer tim atau manajer proyek di Scrum. Sebaliknya, para
12
anggota tim memutuskan untuk berkomitmen, dan menentukan bagaimana cara terbaik untuk mencapai komitmen tersebut. 3. Ahli ( Scrum Master ) Ahli ( ScrumMaster ) bertugas membantu kelompok belajar memahami dan menerapkan Scrum untuk mencapai nilai bisnis. Scrum Master tidak memiliki kekuasaan, melainkan mereka bertugas untuk membantu tim menjadi sukses. Scrum Master bukanlah manajer tim atau proyek manajer, melainkan melayani tim, melindungi mereka dari gangguan luar, dan mendidik serta membimbing Scrum Owner dan Scrum Team supaya mereka dapat menggunakan metode Scrum secara baik dan benar. Scrum Master memastikan semua orang di tim memahami dan mengikuti praktek Scrum. Mereka juga membantu memimpin organisasi dalam menangani perubahan-perubahan yang sulit dan diperlukan untuk mencapai keberhasilan dengan pengembangan yang handal. Cara kerja metode Scrum yaitu: 1. Product backlog merupakan daftar kebutuhan backlog items, yaitu fitur dan produk yang akan diselesaikan dan diatur berdasarkan skala prioritas. Backlog adalah daftar prioritas apa yang diminta, peringkat dalam urutan nilai kepada pelanggan atau bisnis, dengan nilai barang tertinggi di atas urutan daftar. 2. The Sprint merupakan daftar tahap pengerjaan untuk penyelesaian backlog items yang dibuat secara mandiri oleh Scrum Team.
13
3. Sprint Planning adalah meeting yang dihadiri oleh Scrum Master, Scrum Team, dan Product Owneruntuk membahas perencanaan diawal setiap iterasi(sprint). Fokus meeting ini ada dua hal yaitu: - Menentukan product backlog dan hasil akhir sprint. - Menentukan sprint backlog. 4. Daily Scrum adalah pertemuan singkat sekitar 15 menit yang dipimpin oleh Scrum Master sebelum memulai sprint setiap harinya. Pertanyaan yang biasa ditanyakan pada pertemuan ini adalah: - Apa yang sudah dilakukan pada Scrum terakhir? - Apa yang akan kalian lakukan untuk Scrum berikutnya? - Apa yang membuat pekerjaan kalian tertunda? Tujuan dari pertemuan singkat ini adalah melacak progress dari sprint dan membentuk komitmen yang kuat antar anggota tim. 5. Sprint Review and Retrospective dilaksanakan pada akhir sprint dan mendemonstrasikan hasil sprint kepada Product Owner. Setelah Review Sprint, tim mendapatkan bersama-sama mendapatkan retrospektif
yang
merupakan
kesempatan
bagi
tim
untuk
mendiskusikan apa bekerja dan apa yang tidak bekerja, dan menyetujui perubahan untuk dilakukan percobaan.
2.1.2
Unified Modelling Language (UML) 1. Use case Diagram Kata “Use case” memiliki arti sekumpulan kelompok event dalam sistem berdasarkan perspektive user (Dobing & Parsons, 2000)..Use
14
case diagram adalah diagram yang menggambarkan deskripsi tindakan berurutan yang harus dilakukan user untuk melengkapi tugas/task dari sistem. Ada beberapa komponen utama Use case antara: - Actor adalah sesuatu yang berinteraksi langsung dengan sistem dan mempunyai peran tertentu dalam sistem. - Use case adalah Aksi spesifik yang dilakukan oleh actor terhadap sistem. - Communications Relationship adalah Penghungung antara Use case dengan actor dan menunjukkan hubungan komunikasi anatara actor melalui Use case dengan sistem - System Name adalah nama dari sistem yang akan dijalankan. - System Boundary adalah sebuah batasan untuk membatasi dan mengelompokkan tiap Use case diagram sesuai dengan fungsinya masing-masing.
Gambar 2.1 Komponen Use case Diagram (Sumber : http://stanlysk.blogspot.com/2012/05/use-case-diagram.html,2012)
15
Use case diagram berguna untuk menunjukkan hubungan antara pelaku (actor) untuk setiap aksi yang dilakukan terhadap sistem. Use case diagram sering digunakan untuk : - Memberikan gambaran dari semua atau sebagian dari setiap penggunaan untuk sistem atau oraganisasi dalam bentuk model yang penting. - Mengkomunikasikan lingkup dari suatu proyek pembangunan sistem - Memodelkan analisis syarat penggunaan dalam suatu bentuk sistem Use case.
2. Activity Diagram Activity Diagram adalah diagram yang menggambarkan aliran aktivitas dari sistem berbasis object oriented, struktur diagram ini mirip dengan flow chart yang ditonjolkan disini adalah bagaimana aliran proses dan aktivitas apa saja yang dilakukan system tersebut serta menentukan kontrol dan fungsi
yang akan mengangani
pesan/message yang dikirimsaat user berinteraksi dengan system. Activity diagram memiliki beberapa komponen sebagai berikut: -
Action States adalah sebuah komponen yang menandakan proses mulai dan berakhir pada activity diagram.
-
Activity
States
adalah
komponen
activity
diagram
yang
menjelaskan proses aktivitas yang sedang dilakukan oleh system.
16
-
Transicitions
adalah komponen
yang menandakan
proses
perpindahan atau transisi dari Subactivity States yang satu ke Subactivity States yang lain, digambarkan dalam bentuk tanda panah. -
Decisions adalah kondisi yang harus dipenuhi sehingga jalur aliran aktivitas akan terarah ke Activity States tertentu, jika kondisi tersebut tidak terpenuhi maka aliran aktivitas akan berlanjut ke Activity States yang berbeda.
-
Forks and Joins adalah variasi dari transisi pada activity diagram, Forks terjadi jika tepat satu transisi masuk lalu melewati activity states dan menghasilkan dua atau lebih transisi. Sedangkan Joins terjadi jika dua atau lebih transisi masuk dan melewati activity states menghasilkan tepat satu transisi saja.
Gambar 2.2 Komponen Activity Diagram (Sumber : http://toerzun.blogspot.com/2011/10/activity-diagram.html,2012)
17
3. Sequence Diagram Sequence
Diagram adalah diagram yang digunakan selama
proses pengembangan perangkat lunak untuk menggambarkan hubungan user yang digambarkan dalam bentuk Actor saat berinteraksi dan berkomunikasi dengan system melalui pengiriman dan penerimaan pesan secara berurutan atau sequential (Bruce, 2003). Pada saat tahap requirement membantu mendefinisikan pesan yang dikirim dari Actor ke system dan sebaliknya. Menentukan interaksi yang dilakukan Actor terhadap system serta bagaimana respon system kepada Actor terhadap interaksi tersebut, proses ini terjadi pada tahap system modeling. Pada tahap testing menetukan interaksi yang lebih spesifik dari Actor terhadap system dengan validasi atau syarat tertentu. Komponen sequence diagram antara lain : -
Actor adalah user yang berinteraksi dan menggunakan sistem digambarkan dengan gamabar orang dengan keterangan Register.
-
Comment
untuk menjelaskan bagaimana interaksi sequence
diagram tersebut. -
Message adalah pesan yang dikirim oleh actor agar dapat berkomunikasi dan berinteraksi dengan sistem.
-
Instance
or
Classifier
Role
adalah
sebuah
objek
yang
mengerjakan suatu task atau pekerjaan tertentu saat diberi respon oleh actor.
18
-
Activation adalah tahap yang menandakan proses Instance sequence diagram sedang berjalan dan mengirimkan message ke Instance lain.
-
Object Lifeline adalah suatu tanda yang menjelaskan apakah suatu Instance akan berhubungan dengan Instance lain apa tidak, jika tidak maka Instance tersebut akan dihapus/destroy.
-
Message Flow adalah aliran perpindahan pesan/message yang akan diproses oleh Instance lain.
4. Class Diagram Class diagram (Lethbridge dan Laganiere, 2001, p154) adalah sebuah diagram yang biasanya menunjukkan atribut dan operasi yang ada pada masing-masing kelas. Sebuah kelas diagram menjelaskan pengelompokan dan hubungan antara yang satu dengan yang lainnya.
Gambar 2.3 Komponen Class Diagram (Sumber : http://her0satr.staff.ub.ac.id/page/3/,2012)
19
Notasi-notasi yang ada didalam Class diagram, yaitu : -
Class Merupakan sebuah kategori yang berupa box dan nama dalam kelas tersebut. Dimana objek yang diciptakan dari suatu Class diagram akan memiliki semua yang dimiliki oleh Class diagram tersebut. Class diagram memiliki 3 bagian yaitu Nama Kelas, Attribut, dan Operation.
-
Relationship Merupakan hubungan yang terjadi antara kelas yang satu dengan kelas yang lain.
-
Assosiation Sebuah hubungan yang menunjukan bagaimana dua kelas saling terkait antara satu dengan yang lain. Hubungan digambarkan dengan sebuah garis yang menghubungkan antara sepasang kelas. Didalam sebuah hubungan antar kelas ada simbol yang ditunjukkan untuk menunjukkan arti dari hubungan tersebut. Multiplicity adalah “keterangan yang menunjukkan berapa banyak contoh dari kelas diakhir asosiasi yang dapat dihubungkan ke sebuah contoh dari kelas pada akhir urutan asosiasi”.
-
Aggregation Sebuah relasi dengan perlakuan khusus yang disebut dengan bagian dari yang menangani objek-objek dimana salah satunya adalah bagian dari yang lain. Objek dari agregasi terdiri dari
20
objek-objek yang lain. Agregasi juga merupakan kasus khusus dari asosiasi. -
Composition Komposisi (composition) adalah sebuah tipe agregasi yang kuat dimana bagian dari objek tergantung penuh/secara keseluruhan terhadap objeknya sehingga bila sebuah objek komposit dibuang maka bagian yang bergantung pada komponen tersebut akan terbuang juga pada saat yang bersamaan.
-
Generalization Sebuah kelas (child Class atau subClass) yang dapat mewarisi atribut-atribut dan operasi-operasi dari kelas lainnya (parent Class atau super Class). Generalisasi pada konsep object oriented digunakan untuk menjelaskan hubungan kesamaan antar kelas. Manfaat generalisasi : -
Bisa dibangan struktur logis yang bisa menampilkan derajat kesamaan atau perbedaan diantara kelas-kelas.
-
Memungkinkan untuk penambahan subClass (child Class)
Didalam generalisasi ada inheritance yang merupakan mekanisme pengimplementasian dari generalisasi dan spesialisasi, dengan aturan subClass selalu mewarisi semua sifat dari super Class-nya. Hubungannya menjelaskan bahwa generalisasi menunjukkan hubungan karakteristik
logis
antar
sama,
elemen-elemen
sedangkan
yang
turunannya
menerangkan supaya sharing bisa terjadi.
mempunyai (inheritance)
21
2.1.3
Internet Menurut Hahn (1996, p2) Internet merupakan nama besar, sistem worldwide
yang
terdiri
dari
orang,
informasi,
dan
komputer.
Transmission Control Protocol / Internet Protocol (TCP / IP) yaitu alamat unik yang membedakan antara komputer satu dengan yang lainnya dan (Hyper Text Transfer Protocol) adalah sebuah protokol untuk meminta dan menjawab antara client dan server. 2.1.3.1 Browser Browser adalah sebuah program aplikasi, dimana aplikasi tersebut terhubung dengan internet. Dan isi dari program aplikasi tersebut dapat berupa teks, gambar, audio, dan menyediakan berbagai interaksi antara user dengan internet. Browser juga pada umumnya dilengkapi dengan alat bantu tertentu, seperti : tombol maju, tombol kembali, tombol refresh, tombol home, dan tombol favorite. Dengan memilih tombol maju maka user dapat berpindah ke halaman selanjutnya dan tombol kembali untuk sebaliknya. Tombol refresh dapat digunakan user untuk mereload halaman website yang diakses. Tombol home digunakan sebagai suatu penanda halaman website yang dikunjungi sebelumnya. Tombol favotite dirancang untuk membantu user agar dapat menyimpan halaman website yang sering dikunjungi dan ingin diakses kembali.
22
Contoh dari browser adalah: -
Mozilla
-
Google chorme
-
Internet explore
-
Opera
-
Safari
Setiap browser memiliki fitur – fitur yang berbeda tegantung pada jenis browsernya. Kelengkapan fitur tersebut, antara lain tab browsing, toolbar, dll. Internet browser juga harus di update atau diperbaharui secara berkala, untuk meningkatkan keamanan saat berselancar di dunia maya atau internet.
2.1.4
Website dan URL 2.1.4.1 Pengertian Website Web merupakan sistem hypermedia yang menampilkan data berupa text, gambar, suara, animasi, dan data multimedia lainnyaserta memiliki area luas yang ditujukan untuk akses secara universal. (Chandler, 1995) Ada 2 kategori dalam pemrograman web yaitu pemrograman Server dan Client. Pada pemrograman server, perintah-perintah pemrograman
(script) dijalankan
diserver
web,
kemudian
dikirimkan ke browser dalam bentuk HTML, sedangkan pada client, perintah program dijalankan pada browser web sehingga
23
client meminta dokumen script, maka script dapat diunduh dari server kemudian dijalankan pada browser yang bersangkutan.
2.1.4.2 Pengertian URL Menurut Williams/Sawyer (2007, p66) URL (Uniform Resource Locator) adalah kumpulan karakter yang menunjukan potongan informasi khusus dibagian mana saja pada web.
2.1.5
Hypertext Markup Language (HTML) 2.1.5.1 Pengertian HTML HTML (Hyper Text Media Language) adalah sebuah bahasa penulisan yang digunakan untuk membuat dokumen dalam World Wide Web (Shelly, Woods, dan Dorin, 2008, p8). HTML menggunakan seperangkat instruksi yang disebut tags atau markup untuk mendefinisikan struktur dan layout dari sebuah dokumen
web
dan
menentukan
bagaimana
halaman
itu
ditampilkan di browser.
2.1.5.2 Elemen HTML HTML mengkombinasikan tags deskriptif dan tags khusus yang menunjukkan format style bagaimana seharusnya suatu dokumen ditampilkan dalam webbrowser. Elemen-elemen HTML berupa : -
Headings
24
-
Paragraph
-
Hyperlinks
-
List dan lain-lain.
Kebanyakan elemen HTML terdiri dari 3 bagian yaitu : tag pembuka, isi, dan tag penutup. Contoh tags dari HTML : -
dan untuk memberikan nama judul yang muncul pada title bar dihalaman web.
-
dan untuk menspesifikasikan apa yang muncul dari halaman web. Didalam body ini juga biasa disebut sebagai isi dari halaman web.
-
dan
untuk memasukkan sebuah baris kosong sebelum teks paragraph.
-
untuk memasukkan sebuah jeda baris sebelum elemen berikutnya.
2.1.5.3 Javascript Javascript adalah pendekatan lain untuk membuat halaman web menjadi lebih interaktif, baik dalam deteksi maupun tanggapan ke interaksi pengguna dengan halaman web (Ellsworth dan
Matthew,
1997,
p179).
Javascript
dapat
langsung
digabungkan dengan HTMl tanpa harus dicompile terlebih dahulu. Javascript juga merupakan bahasa pemrograman yang sederhana karena bahasa ini tidak dapat digunakan untuk membuat aplikasi
25
ataupun applet. Dengan Javascript, seorang engineer dapat dengan mudah membuat sebuah halaman web menjadi lebih interaktif.
2.1.5.4 Jquery Jquery adalah libray fungsi pemrograman dari sebuah framework tertentu. Untuk dapat mengaktifkan dan menggunakan library ini,
maka plugin harus disertakan dalam file HTML.
Fungsi-fungsi pada library Jquery dirancang dengan bahasa Javascript, tujuan dari jquery adalah mengurangi penulisan code Javascript yang terlalu panjang serta mengintegrasikan antara Javascript dan HTML.
2.1.5.5 Database Database terdiri dari dua suku kata, yakni data dan base (Joseph, 2007, pp. 2-3). Data adalah suatu fakta yang ditulis dalam bentuk tulisan di suatu media dengan suatu nilai tertentu seperti angka, huruf dan symbol. Sedangkan base adalah sesuatu yang berbasiskan data secara konseptual. Maka database adalah kumpulan data-data yang saling berhubungan dan
disusun
berdasarkan konsep yang telah ditentukan serta dapat diakses oleh perangkat lunak tertentu.
26
2.1.6
Testing Sebuah website atau aplikasi yang akan dipasarkan tentunya harus bebas dari bug dan memiliki performance yang bagus. Untuk itulah dibutuhkan testing agar mengindari segala kesalahan dan kelalaian developer. Ada beberapa tools dalam mentesting sebuah aplikasi, antara lain adalah yslow dan firebug.
2.1.6.1 YSlow YSlow adalah sebuah pengembangan dari alat testing yang dikembangkan oleh yahoo yang memiliki fungsi untuk mentesting suatu web atau aplikasi yang dibuat. Selain itu YSlow juga memberi solusi tentang kesalahan – kesalahan aplikasi tersebut serta tingkat performance aplikasi tersebut. Di yahoo terdapat 34 macam tipe testing yang diciptakan sedangkan di YSlow dipersempit menjadi 23 macam testing dikarenakan di YSlow hanya mengambil testing yang diperlukan sehingga memperingan pekerjaan developer, 23 macam testing tersebut adalah : 1. Minimize HTTP Requests Fungsi dari testing ini sangat membantu developer karena fungsi ini memberi tahu developer bagian – bagian fitur mana yang memakan memory dan membuat aplikasi tersebut menjadi berjalan lambat. Dan solusinya, Yslow akan memberitahu engineer untuk meminimalisasi penggunaan gambar, penggunaan efek, dan penggunaan script.
27
2. Use a Content Delivery Network Keleletan aplikasi juga dipengaruhi oleh jaringan server yang digunakan. Hal ini membuat user enggan menggunakan web atau aplikasi yang terkait karena berjalan lamban. Sebagai solusinya, YSlow akan memberikan keterangan tentang kecepatan kerja server yang digunakan sehingga engineer dapat mengukurnya. 3. Avoid Empty src or href Hindari atau jangan menggunakan syntax gambar kosong, contoh
. Hal ini membuat menyebabkan efek browser lain membuat permintaan lain ke server anda. Hal ini akan melumpuhkan server anda dikarenakan mendapat sejumlah tampilan halaman gambar yang tidak terduga. 4. Add an Expires or a Cache – Control Header Sebuah website desain halaman yang semakin kaya dan bagus berarti menggunakan banyak script, stylesheet, gambar, dan flash di halaman. Seorang pengunjung atau user yang pertama kali megunjungi web tersebut tentu akan menunggu semua tampilan halaman web keluar dan itu membutuhkan waktu yang cukup lama. Tetapi dengan menggunakan expires header maka komponen - komponen yang anda buat akan cacheable. Hal ini menghindari permintaan yang tidak perlu pada HTTP seperti tampilan gambar pada halaman berikutnya.
28
5. Gzip Components Gzip adalah sebuah metode kompresi yang paling popular dan efektif saat ini. Dikembangkan oleh GNU dan distandarisai oleh RFC 1952. Gzip umumnya mengurangi ukuran respon sekitar 70%, tentu ini sangat menguntungkan tingkat kecepatan akses website anda. Dengan menggunakan gzip maka akan mengurangi bobot halaman dan mempercepat akses pengguna atau user. 6. Put Style Sheets at the Top Sebaiknya tempatkan stylesheet pada header karena dengan menggunakan cara ini akan membuat halaman loading lebih cepat. Dengan cara ini membuat halaman website bekerja secara progresif. 7. Put Scripts at the Bottom Masalah sebuah script pada website adalah bahwa mereka memblokir parallel download. Hal ini menyebabkan script tidak bekerja maksimal sehingga membuat proses loading sebuah website menjadi lamban bahkan tidak tampil sama sekali. Alternative yang ditawarkan YSlow untuk masalah ini adalah memindahkan script ke bawah halaman. Dengan begitu akan membuat web anda memuat halaman lebih cepat. 8. Avoid CSS Expressions Tujuan penggunaan css expressions oleh developer adalah untuk mempercantik halaman web mereka, namun hal ini
29
justru menjadi boomerang untuk mereka sendiri. Karena css expressions ini kinerjanya tidak didukung oleh browser lain (hanya IE5 yang mendukung css expressions). Salah satu cara untuk
mengurangi
css
expressions
adalah
dengan
menggunakan satu kali ekspresi di halaman web yang dikehendaki. 9. Make Javascript and CSS External Menggunakan file external di dunia maya umumnya menghasilkan halaman yang lebih cepat karena file – file Javascript dan css yang di cache oleh browser. Javascript dan css yang inline dalam dokumen HTML bisa di download setiap kali jika dokumen HTML tersebut yang diminta. Hal ini akan mengurangi jumlah permintaan HTTP ygn diperlukan, tetapi meningkatkan ukuran dokumen HTML. 10. Reduce DNS Lookups DNS (Domain Name System) adalah nama peta ke alamat IP, seperti nama buku peta telepon orang untuk mencari nomor telepon mereka. Ketika anda mengetik ‘‘www.yahoo.com’’ ke browser anda, maka sebuah DNS resolver dihubungi oleh browser kembali ke alamat IP server. Dan menggunkana DNS membutuhkan biaya. Bayangkan jika ada sejuta user yang menggunakannya maka pengeluaran akan sangat besar. Salah satu solusi yang ditawarkan YSlow adalah dengan cara mengurangi host name unik yang memiliki potensi untuk
30
mengurangi jumlah download paralel yang berlangsung di halaman web tersebut. 11. Minify Javascript and CSS Untuk
membuat
validasi
halaman
website
digunakan
Javascript dan untuk mempercantik halaman website tentu menggunakan css. Kedua bahasa pemrograman ini tentu sangat membantu, tetapi kedua bahasa ini menambah kinerja proses website. Untuk itu sangat perlu untuk membuang atau menghapus karakter yang tidak perlu dari code untuk mengurangi ukuran halaman website. Ada dua tools yang popular untuk meminimalisis Javascript dan css yaitu dengan JSMin dan YUI Compressor. Kompresor YUI juga dapat mengecilkan css. 12. Avoid Redirects Hindari kesalahan redirect dalam halaman website karena jika server menemukan sesuatu yang salah maka website anda akan di redirect secara otomatis ke status 301 atau 302. Hal ini akan memperlambat user sehingga user akan enggan untuk kembali menggunakan website yang terkait. 13. Remove Duplicate Scripts Hindari penggunaan double atau duplikasi pada script. Hal ini akan memboroskan permintaan HTTP yang sia-sia. Tentunya hal ini juga akan memberatkan halaman loading pada web tersebut.
31
14. Configure ETags Entitas Tags (ETags) adalah mekanisme pada web browser dan server yang digunakan untuk menentukan apakah komponen dalam yang di cache browser sesuai dengan server asal. ETags ditambahkan untuk menyediakan sejumlah mekanisme untuk menvalidasi entitas yang lebih fleksibel. ETags
juga
adalah
sebuah
string
yang
unik
untuk
mengidentifikasi versi tertentu dari sebuah komponen. 15. Make AJAX Cacheable Salah satu manfaat dari AJAX adalah bahwa bahasa tersebut dapat memberikan umpan balik seketika kepada pengguna atau user. Namun, dengan menggunakan AJAX tidak menjamin halaman loading website akan berjalan dengan cepat.
Untuk
meningkatkan
kinerjanya
penting
untuk
mengoptimalkan tanggapan AJAX. Untuk meningkatkan kinerjanya AJAX sebaiknya disimpan dalam cache agar pemanggilan AJAX dapat cepat dieksekusi. 16. Use GET for AJAX Requests Tim yahoo menemukan bahwa ketika menggunakan HTTP, maka halaman web tersebut akan diemplementasi ke dalam dua langkah, yaitu : mengirim header pertama, dan baru kemudian mengirimkan data. Jadi, akan lebih bagus jika anda menggunakan
fungsi
GET,
dimana
fungsi
ini
akan
32
memaketkan panggilan user sehingga hanya membutuhkan satu kali pengiriman yang diminta user. 17. Reduce the Number of DOM Elements Halaman website yang kompleks berarti menggunakan byte yang lebih banyak sehingga akan menambah beban dalam melakukan download halaman tersebut. Karena itu anda perlu mengurangi jumlah elemen yang dianggap tidak terlalu diperlukan dalam halaman website anda atau anda dapat minimalisasi dengan cara dikompres agar ukuran bytenya menjadi lebih kecil. 18. No 404s Jika halaman website anda tidak dirancang untuk sesuatu yang dicari user maka jagan menggunakan respon permintaan HTTP yang tidak berguna seperti menggunakan 404 (Not Found). Hal ini akan membuat user menjadi jengkel dan hal ini menjadi limbah bagi sumber daya server. 19. Reduce Cookie Size Cookie pada HTTP digunakan untuk berbagai alasan seperti otentikasi dan personalisasi. Informasi yang ditampung cookie akan memperlambat performance website tersebut. Jadi, usahakan untuk menghilangkan cookie yang tidak perlu agar meminimalkan dampak pada waktu respon user.
33
20. Use Cookie-Free Domains for Components Ketika browser membuat permintaan untuk gambar statis maka secara bersamaan akan dikirimkan cookie. Anda harus memastikan komponen gambar statis yang diminta bebas dari cookie. Untuk dapat melakukannya anda dapat membeli domain baru, dimana domain tersebut akan menampung cookie yang dikirim. 21. Avoid Filters Filter Alpha lmage Loader IE bertujuan untuk memperbaiki masalah pada browser di IE. Masalah pada filter ini adalah halaman web dapat kena block rendering ketika gambar sedang di download. Untuk itu hindari filter tersebut dan anda dapat menggunakan PNG8 sebagai salah satu solusinya. 22. Do Not Scale Images in HTML Jangan sekali-kali anda memperkecil gambar yang memiliki size besar dengan cara di scale. Dikarenakan size byte gambar tersebut tidak berubah menjadi kecil tetapi size bytenya akan tetap sama. Solusinya adalah gunakan gambar yang memang pada dasarnya memiliki size kecil sehingga tidak menjadi beban dalam loading halaman web. 23. Make favicon.ico Small and Cacheable Favicon.ico adalah sebuah gambar yang tetap berada di root server anda. Gambar ini menggangu urutan download, misalkan di IE anda meminta komponen tambahan di
34
download, favicon akan di download terlebih dahulu sebelum komponen yang anda inginkan di download. Jadi, untuk mengurangi beban download favicon ini sebaiknya anda gunakan gambar favicon yang memiliki ukuran kecil.
2.1.6.2 Page Speed Sebagai perusahaan penyedia layanan mesin pencari ternama, Google terus berinovasi menghadirkan layanan-layanan barunya. Google menyediakan layanan Page Speed berbasis web, tidak perlu lagi menginstall aplikasi atau eksensi tertentu, cukup menggunakan Page Speed berbasis web ini, maka para developer pengembang web akan dapat dengan mudah menganalisa kecepatan dari website yang telah dibuatnya. Layanan online pengukur kecepatan loading halaman web ini dibuat sederhana mungkin, dimana anda memasukkan URL website anda dan selanjutnya tinggal submit, maka akan tampil berapa kecepatan speed loading dari halaman tersebut dengan skala 1 sampai 100. Untuk saat ini, juga telah tersedia fitur untuk mengecek performa halaman mobile site, yang mana anda akan dengan mudah beralih antara web yang diakses melalui pengguna desktop dan juga pengguna mobile.
35
2.1.6.3 Firebug Firebug dikembangkan oleh sebuah browser ternama yaitu Firefox. Seperti halnya di YSlow, firebug juga dirancang untuk memperbaiki dan memaksimalkan performance sebuah web atau aplikasi. Versi terbaru dari firebug adalah firebug 1.11 alpha 6. Pada versi terbaru firebug ini beberapa fungsi sudah ditambahkan untuk meningkatkan pelayanan dan mutu dari firebug. Berikut adalah beberapa fungsi yang diharapkan dapat membantu developer, antara lain : -
Dapat memeriksa HTML dan memodifikasi gaya dan tata letak secara real-time.
-
Firebug sangat mendukung debugger Javascript karena dapat di debug di browser manapun.
-
Keakuratan dalam menganalisis penggunaan jaringan dan kinerja.
-
Menggunakan firebug maka fitur yang anda buat akan memiliki kinerja yang bagus dan lancar.
-
Firebug memberikan anda informasi yang anda perlukan seperti informasi mengenai kecepatan kinerja web atau aplikasi anda.
2.1.7 PHP ( Hypertext Preprocessor ) PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. PHP merupakan bahasa scripting yang dimana terpasang pada HTML (Adam
36
Trachtenberg & David Sklar 2006). Sintaks PHP mirip dengan bahasa C, Java dan Perl, ditambah dengan beberapa fungsi PHP yang spesifik. Tujuan penggunaan bahasa ini adalah agar perancang web dapat membuat web yang dinamik. Cara kerjanya adalah ketika diterjemahkan oleh web server akan menghasilkan kode HTML yang dikirim ke browser agar dapat ditampilkan. Program ini dapat berdiri sendiri ataupun disisipkan di antara kode-kode HTML sehingga dapat langsung ditampilkan bersama kodekode HTML tersebut.
2.2 Teori Khusus Bagian kedua berisi teori khusus yang menjelaskan teori dan pengertian tentang teknologi yang mendukung perancangan dalam hal teknis seperti bahasa pemrograman, proses client dan server, serta database.
2.2.1 Computer Aided of Software Enginering (CASE) Tools CASE adalah suatu teknik dimana teknik tersebut digunakan untuk membantu seseorang untuk melakukan beberapa fase, yakni fase analisis, desain, maintenance, dan implementasi. Tools adalah sebuah alat bantu yang dapat berwujud benda padat atau berwujud benda abstrak yang digunakan manusia untuk memudahkannya dalam melakukan sesuatu. Jadi, CASE tools adalah sebuah alat bantu yang berupa perangkat lunak (software)
yang
digunakan
oleh
seorang
engineering
memudahkannya dalam membuat suatu projek atau program. Manfaat dari CASE tools bagi seorang software engineer antara lain :
untuk
37
-
CASE tools dapat melakukan fase life-cycle pada setiap software
-
CASE tools sangat membantu seorang software engineer maupun orang awam dalam meningkatkan mutu kualitas software yang dibuat maupun yang sedang dikembangkan
CASE tools dibagi menjadi 4 kategori, yaitu : 1. Information engineering-supporting products. Proses dari life-cycle yang dihasilkan dari sebuah perusahaan atau dari penyedia suatu repository untuk membuat data models, enterprise models, dan process models. 2. Structured diagramming-supporting products. CASE tools dalam kategori ini mendukung dalam pembuatan model data flow, entity flow, dan control flow. 3. Structured development aids-providing products. Biasanya digunakan oleh system analis, karena dilengkapi dengan proses terstruktur sehingga penganalisa dapat menganalisa dengan cepat dan akurat. 4. Application-code-generating products. Produk ini dapat menghasikan application code yang bertujuan tertentu yang telah dibuat atau ditetapkan oleh designer.
2.2.2 HTML5 Hyper Text Markup Language (HTML) adalah sebuah bahasa pemrograman yang banyak dipakai pada saat ini, karena HTML bersifat cross platform yang artinya dapat ditampilkan di OS (Operation System) yang berbeda dan tampilannya tetap sama walaupun saat pembuatannya
38
hanya menggunakan satu OS tertentu. Dan sekarang telah muncul versi terbaru dari HTML yaitu HTML5 pada tanggal 23 April. Tujuan dibuatnya HTML5 selain untuk membantu user adalah untuk mengurangi ketergantungan pelayanan terhadap software-software besar seperti Adobe. Dengan adanya HTML5 konsumen tidak perlu mengeluarkan biaya besar untuk membeli fasilitas dari software tersebut. Beberapa kelebihan dalam HTML5, yaitu : -
Penulisan code yang lebih efisien
-
Penanganan error list yang lebih baik
-
Dapat menambahkan fitur gambar atau animasi dengan mudah
Fitur-fitur baru yang terdapat di HTML5 antara lain : -
Adanya kanvas dimana kanvas tersebut seorang user dapat menuangkan ide-idenya dengan bebas
-
Bentuk form seperti kalender, tanggal ditampilan lebih menarik dan user dapat mengubah pola form sesuai yang diinginkan
-
Elemen konten yang lebih spesifik, seperti artikel
-
Dari segi audio dan video jauh lebih bagus
2.2.3 JSON JSON (Javascript Object Notation) adalah sebagai suatu format untuk pertukaran data yang dilakukan satu pihak dengan pihak lainnya. Karena JSON tercipta dari Javascript dan penulisan code hampir sama yaitu diawali dengan kurung siku [] dan kurung awal {}. Kelebihan dari JSON antara lain :
39
- Simple, karena penulisan code JSON mirip dengan Javascript yang sangat mudah dimengerti dan diimplementasikan oleh user. - Fast, karena dalam computer mudah untuk melakukan parsing (karena mengulangi kata yang sama dalam tag-tag yang digunakan). Hal ini lah yang mempercepat loading transfer data.
2.2.4 JsPlumb JsPlumb adalah sebuah alat bantu atau tools untuk membantu user menghubungkan elemen pada layar menggunakan SVG, kanvas atau vml tergantung dari kemampuan browser. Bahasa pemrograman yang dapat dipakai anatara lain adalah JQuery, MooMooTools atau YUI3. JsPlumb dapat dijalankan di segala browser yang berada diatas IE 6.
2.2.5
Object oriented Analysis and Design (OOAD) 2.2.5.1 Pengertian OOAD OOAD adalah sebuah metode analisis yang banyak digunakan untuk memeriksa suatu kebutuhan atau requirements dari sudut pandang objek dan kelas yang terdapat di ruang lingkup permasalahan
yang
berdasarkan
arsitektur
software
pada
manipulasi objek – objek sistem atau subsistem (Brahma Dathan dan Sarnath Ramnath, 2011).
40
2.2.5.2 Konsep Dasar OOAD OOAD mencakup analisi dan desain dari sebuah sistem yang berdasarkan analisis berorientasikan objek (OOA) dan desain berorientasikan objek (OOD). OOA adalah metode analisi yang memeriksa requirements (syarat atau keperluan) dari sebuah sistem sedangkan OOD adalah metode untuk mengarahkan arsitektur software yang didasarkan pada manipulasi objek – objek atau subsistem. Terdapat beberapa konsep dalam OOAD, yaitu : -
Objek (Object) Objek adalah benda secara fisik dan konseptual yang ada di sekitar lingkungan. Sebuah objek memiliki keadaan sesaat yang disebut state.
-
Kelas (Class) Kelas
adalah
himpunan
objek
yang
sejenis
yaitu
mempunyai sifat (atribut), perilaku umum (operasi), dan relasi. -
Kotak Hitam (Black Boxes) Sebuah objek adalah kotak hitam. Konsep ini yang menjadi dasar implementasi objek. Kotak hitam berisi data dan kode.
-
Asosiasi dan Agregasi Asosiasi adalah hubungan yang mempunyai makna antara sejumlah objek. Asosiasi digambarkan dengan sebuah garis penghubung diantara objeknya.
41
Agregasi adalah bentuk khusus sebuah asosiasi yang mengggambarkan seluruh bagian pada suatu objek merupakan bagian dari objek yang lain.
2.2.5.3 Metodologi Pengembangan OOAD Metode ini dipelajari agar seorang developers dapat menemukan cara sistematis untuk mengerjakan analisis dan desain suatu software, aplikasi atau web. Dengan
metodologi, pihak
yang membangun sistem software dapat merencanakan dan mengulangi perkerjaan dilain waktu. Metodologi ini juga menghilangkan perbedaan
notasi untuk suatu hal yang sama
karena setiap orang akan berbicara dalam bahasa pemrograman yang sama.
2.2.6 ExtJS ExtJS merupakan sebuah Javascript library yang berguna untuk membangun aplikasi-aplikasi. ExtJS ini jugs adalah sebuah framework dimana yang akan memudahkan seorang perancang aplikasi membuat sebuah aplikasi yang condong ke RIA (Rich Internet Aplication). RIA adalah suatu teknologi yang menggabungkan kelebihan – kelebihan dari aplikasi berbasis web dan desktop. RIA menyajikan antarmuka visual yang bagus dan interaktif.
42
2.2.7 Enterprise Architect Enterprise Architect adalah perangkat primer yang digunakan untuk mempersingkat waktu penilaian pengaruh, analisis tradeoff, perubahan arah rencana strategis, dan reaksi taktis. Enterprise Architect terdiri dari dokumen-dokumen seperti gambar-gambar, diagram, dokumen tekstual, standar-standar atau model dan menggunakan berbagai metode bisnis yang menjelaskan seperti apa sistem informasi dan komunikasi yang diperlukan oleh organisasi atau perusahaan. Untuk mengelola sistem yang kompleks dan menyelaraskan bisnis dengan Teknologi Informasi Organisasi dapat menggunakan Enterprise Architect Framework. Enterprise Architect Framework sendiri muncul pada tahun 1980-an, yang ditemukan oleh peniliti yang bernama John Zachman. Agar dokumen-dokumen tersebut dapat mudah dipahami dan mudah dikelola, maka John Zachman mengusulkan agar
dokumen-
dokumen tersebut dikelompok-kelompokan. Tata cara pengelompokkan dokumen-dokumen Enterprise Architect itu disebut Zachman Framework. Zachman Framework adalah model Enterprise Architect yang menyangkut hal-hal yang dibutuhkan untuk mendukung suatu struktur perusahaan dengan menggunakan model yang sederhana bagi segala macam subjek dan dapat mendefinisikan organisasi secara lengkap.