BAB 2 LANDASAN TEORI 2.1. Software Engineering Software engineering merupakan sebuah disiplin rekayasa yang harus diperhatikan dari segala aspek dalam memproduksi sebuah software (Sommerville, 2011: 6). Ada empat aktivitas dasar yang pada umumnya dilakukan pada pembuatan sebuah software, yaitu: 1. Software specification Tahap pada saat customer mendefinisikan jenis software yang dibutuhkan dan segala kendala yang ada. 2. Software development Tahap pengembangan software, saat seluruh kebutuhan diubah menjadi rancangan dan dilakukan pemrograman. 3. Software validation Tahap pengecekan apakah software sudah sesuai dengan yang didefinisikan oleh customer. 4. Software evolution Tahap modifikasi software yang mencerminkan perubahan customer dan persyaratan pasar.
2.1.1 Model Process: Waterfall Model Waterfall model merupakan model process yang pertama kali dikemukakan tahun 1970 oleh Winston W. Royce pada proses pengembangan software yang diturunkan dari system engineering process yang lebih umum (Sommerville, 2011: 30). Dinamakan waterfall karena alurnya mengalir dari satu fase ke fase berikutnya. Fase – fase utama dalam waterfall model dijabarkan sebagai berikut: 1. Requirements analysis and definition Segala kebutuhan dianalisa dan didefinisikan secara rinci yang kemudian digunakan sebagai spesifikasi sistem. 2. System and software design Pembuatan desain arsitektur, baik untuk software dan 6
7 hardware, sehingga dapat membangun sistem secara menyeluruh. Seluruh abstraksi sistem digambarkan lengkap dengan relasinya. 3. Implementation and unit testing Desain yang sudah tersedia direalisasikan menjadi sebuah program dengan pembangunan kode (coding). Setelah menjadi sebuah unit program, akan dilakukan pengujian pada setiap unit untuk mengetahui apakah setiap unit sudah sesuai dengan spesifikasi. 4. Integration and system testing Unit – unit program yang sudah sesuai dengan spesifikasi akan disatukan menjadi sebuah kesatuan sistem. Pengujian akan dilakukan kembali pada sebuah sistem yang utuh. 5. Operation and maintenance Pada tahap ini instalasi program dilakukan dan dioperasikan untuk kepentingan konsumen. Pada prosesnya, maintenance harus terus berjalan selama pengoperasian program. Perbaikan dilakukan jika ditemukan error atau kesalahan pada program. Pengembangan (improvement) dapat dilakukan juga pada tahap ini, sehingga menghasilkan system requirement baru yang dapat meningkatkan layanan dari program itu sendiri. Secara teoretis, waterfall model memiliki alur model linear yang bertahap. Jika fase sebelumnya belum selesai, tidak disarankan untuk melanjutkan ke fase selanjutnya. Namun pada prakteknya, hal ini sulit dijalankan karena pada tahap coding masalah demi masalah kerap ditemukan sehingga model linear tidak dapat diterapkan. Dibutuhkan jalur umpan balik (feedback path) untuk menguji fase – fase sebelumnya yang telah dilewati dan melakukan penyesuaian jika fase selanjutnya mengalami perubahan (Sommerville, 2011: 30). Pada prinsipnya (Somerville, 2011: 32), waterfall model digunakan jika requirement dari software sudah tetap dan tidak akan mengalami banyak perubahan. Waterfall model juga menghasilkan proses dan dokumentasi yang lebih jelas karena berjalan dengan fase – fase yang terstruktur. Hal ini mengizinkan manager untuk memonitor kemajuan pada proses pembuatan software secara lebih mudah.
8
2.1.2 Interaksi Manusia dan Komputer Dalam pembuatan sebuah software, desain tampilan antar-muka (user interface) harus diperhatikan demi terjalinnya interaksi manusia dan komputer dengan baik. Interaksi manusia dan komputer (Shneiderman, 2010: 22) merupakan disiplin ilmu yang berhubungan dengan
perancangan,
evaluasi, dan implementasi sistem komputer interaktif untuk digunakan oleh manusia. Terdapat aturan dalam merancang interaksi manusia dan komputer, yaitu delapan aturan emas (Eight Golden Rules). Eight Golden Rules tersebut adalah: 1. Strive for consistency Urutan tindakan yang konsisten harus sama dalam situasi yang mirip atau sejenis, terminologi yang identik dan perintah yang konsisten harus digunakan. 2. Cater to universal usability Menyediakan fitur bagi pengguna pemula yang dapat mudah dimengerti, sebagai contoh diberikan penjelasannya dan fitur bagi pengguna yang berpengalaman, seperti pengadaan shortcut. Hal ini dilakukan dalam melayani kebutuhan pengguna yang beragam. 3. Offer informative feedback Untuk setiap tindakan pengguna, harus ada sistem umpan balik (feedback). Untuk hal minor, respon dapat dibuat sederhana, sedangkan untuk hal yang jarang dan penting, respon harus lebih substansial. 4. Design dialog to yield closure Urutan tindakan harus diatur sesuai urutan dari awal, tengah, dan akhir. Feedback yang informatif pada penyelesaian sekelompok tindakan memberikan pengguna sebuah kepuasan akan penyelesaian tindakan tersebut. 5. Prevent errors Sistem
harus
dibuat
untuk
membantu
pengguna
meminimalkan kesalahan. Jika kesalahan dibuat, sistem harus mampu mendeteksi kesalahan dan menawarkan sebuah peringatan sederhana dengan mekanisme yang mudah dipahami untuk penanganan kesalahan.
9 6. Permit easy reversal of actions Fitur ini mengurangi kecemasan, karena pengguna tahu bahwa kesalahan dapat dibatalkan, sehingga dapat mendorong pengguna untuk mengeksplorasi pilihan. 7. Support internal locus of control Pengguna yang berpengalaman sangat menginginkan sebuah hal yang dapat memberi keyakinan bahwa mereka bertanggung jawab atas sistem dan bahwa sistem merespon tindakan mereka. 8. Reduce short-term memory load Keterbatasan pemrosesan informasi manusia dalam ingatan jangka pendek mengharuskan tampilan dibuat sederhana. Seperti tampilan
halaman,
window
motion,
peletakan
tombol
serta
penggunaan jenis icon pada tombol, dan urutan tindakan. 2.1.3 Testing Menurut Pressman (2010: 482) tujuan dari pengujian adalah untuk menemukan dan memperbaiki sebanyak mungkin kesalahan dalam program sebelum akhirnya program diserahkan kepada customer untuk mulai dioperasikan. Salah satu pengujian yang baik adalah pengujian yang memiliki probabilitas tinggi dalam menemukan kesalahan. Untuk menguji validitas software, pengujian dilakukan menggunakan teknik desain test case “BlackBox”, dengan tujuan menemukan jumlah kesalahan maksimum dengan usaha dan waktu yang minimum. Hasil yang didapat dari teknik pengujian ini berupa sebuah laporan yang berisi sebuah desain set test cases untuk menguji logika, interface, kolaborasi komponen, desain persyaratan eksternal yang didokumentasikan, definisi hasil yang diharapkan, dan hasil yang terjadi secara aktual.
2.1.3.1 Black-Box Testing Menurut Pressman (2010: 495), Black-Box testing atau yang biasa disebut behavioral testing adalah proses pengujian dengan fokus pada requirement fungsional software yang memungkinkan developer untuk mendapatkan set kondisi input yang sepenuhnya dapat melaksanakan fungsionalitas suatu program sesuai requirement.
10 Black-Box testing dapat digunakan untuk menemukan kesalahan dalam kategori sebagai berikut: 1. Fungsi yang tidak benar atau fungsi yang hilang. 2. Kesalahan interface. 3. Kesalahan dalam struktur data atau akses database eksternal. 4. Kesalahan perilaku (behavior) atau kesalahan kinerja. 5. Inisialisasi dan pemutusan kesalahan. Dengan menerapkan Black-Box testing, dapat diperoleh sebuah test cases yang memenuhi kriteria seperti: 1. Mengurangi jumlah test cases tambahan yang harus didesain untuk memenuhi syarat pengujian wajar. 2. Test cases memberitahu tentang ada atau tidaknya kesalahan pada class.
2.2 Unified Modelling Language (UML) Menurut Whitten dan Bentley (2007: 371) UML (Unified Modelling Language) merupakan satu kumpulan konvensi pemodelan yang digunakan untuk merincikan atau menjelaskan sistem piranti lunak yang dijadikan sebagai standar pemodelan objek. UML dapat dijadikan panduan bagi developer dalam mengetahui sudut pandang sebuah sistem dan dikomunikasikan kepada pihak – pihak yang terkait dengan sistem dalam bentuk diagram. UML merupakan bahasa kesatuan yang mendeskripsikan model sebuah sistem secara efektif.
2.2.1 Use Case Diagram Menurut Whitten dan Bentley (2007: 382), use case diagram merupakan diagram yang menggambarkan interaksi antara sistem, pengguna atau dengan sistem eksternal lainnya. Dengan kata lain, menggambarkan siapa pengguna sistem dan bagaimana pengguna berinteraksi dengan sistem. 2.2.1.1 Notasi pada Use Case Diagram Notasi yang digunakan dalam menggambarkan use case diagram yaitu:
11 1. Use Case Use case merupakan suatu tugas bisnis yang diselesaikan dengan urutan langkah-langkah perilaku baik secara otomatis atau manual. Use case mendeskripsikan fungsi - fungsi yang ada pada sistem dari sudut pandang para pengguna eksternal, dalam cara dan terminologi yang mereka mengerti.
Gambar 2.1 Notasi Use Case pada Use Case Diagram 2. Aktor Digambarkan dalam bentuk manusia, aktor merupakan segala sesuatu yang berinteraksi dengan sistem untuk bertukar informasi.
Gambar 2.2 Notasi Aktor pada Use Case Diagram 3. Relationship Digambarkan dengan sebuah garis yang menunjuk atau menghubungkan antara sebuah use case dengan aktor atau dengan use case lainnya, yang mendefinisikan hubungan interaksi di antaranya.
12
Gambar 2.3 Interaksi Aktor dengan Use Case 2.2.1.2 Relasi pada Use Case Diagram Sebuah relasi digambarkan dengan garis antara dua simbol pada use case diagram. Arti dari relasi dapat berbeda tergantung bagaimana garis digambarkan dan tipe simbol yang terhubung. Beberapa relasi yang digunakan dalam use case diagram: 1. Association Relasi antara aktor dan use case dimana interaksi terjadi antara keduanya. Digambarkan dengan sebuah garis dengan panah yang menyentuh use case atau garis biasa yang menghubungkan antara notasi aktor dengan notasi use case. Garis panah dari aktor menuju use case berarti aktor memberikan data ke fungsi dalam use case, sedangkan garis biasa berarti aktor hanya menerima atau membaca data dari use case.
Gambar 2.4 Contoh Relasi Association
13
2. Extends Relasi extends memperluas fungsionalitas use case apabila kondisi tertentu dipenuhi.
Gambar 2.5 Contoh Relasi Extends 3. Uses atau Includes Relasi uses mengurangi pengulangan antara dua atau lebih use case dengan menggabungkan langkah-langkah dalam use case.
Gambar 2.6 Contoh Relasi Uses atau Include 4. Depends On Relasi antara use case yang mengindikasikan bahwa use case tidak dapat dilakukan sampai use case lainnya sudah dijalankan.
14
Gambar 2.7 Contoh Relasi Depends On 5. Inheritance Relasi inheritance digunakan saat dua atau lebih aktor menggunakan use case yang sama.
Gambar 2.8 Contoh Relasi Inheritance
2.2.2 Activity Diagram Menurut Whitten dan Bentley (2007: 390), activity diagram digambarkan untuk
memperlihatkan proses alur bisnis, langkah - langkah
use case, atau logika perilaku objek. Activity diagram serupa dengan flow chart diagram dalam menggambarkan alur aktivitas yang berurutan dari
15 proses bisnis atau use case. Namun, berbeda dari flow chart karena memberikan mekanisme yang menggambarkan aktivitas yang terjadi secara paralel. Oleh karena itu, activity diagram berguna untuk memodelkan aksiaksi saat operasi dieksekusi dan memodelkan hasil dari aksi tersebut.
16
Gambar 2.9 Activity Diagram
17 2.2.2.1 Notasi pada Activity Diagram Notasi yang digunakan dalam activity diagram sesuai dengan contoh gambar 2.9 adalah sebagai berikut: 1. Initial Node Digambarkan
dengan
simbol
lingkaran
penuh,
merepresentasikan dimulainya sebuah proses.
Gambar 2.10 Simbol Initial Node pada Activity Diagram 2. Action Digambarkan dengan simbol persegi panjang melengkung (rounded rectangle) yang merepresentasikan langkah individual. Urutan dari actions menunjukan kesatuan activity pada diagram.
Gambar 2.11 Simbol Action pada Activity Diagram 3. Flow Digambarkan dengan panah yang mengindikasi adanya proses yang terjadi sepanjang action.
Gambar 2.12 Simbol Flow pada Activity Diagram
18
4. Decisions Digambarkan dalam bentuk belah ketupat dengan 1 panah masuk dan 2 atau lebih panah keluar, mengindikasi sebuah kondisi yang terjadi. Bentuk node ini dapat dilihat pada gambar 2.13. 5. Merge Digambarkan dalam bentuk belah ketupat dengan 2 atau lebih panah masuk yang sebelumnya dipisahkan oleh decision.
Gambar 2.13 Simbol Decision / Merge pada Activity Diagram 6. Fork Digambarkan dalam sebuah persegi panjang hitam dengan 1 alur masuk dan 2 atau lebih alur keluar. Fork merepresentasikan action yang terjadi secara bersamaan atau paralel. Bentuk node ini dapat dilihat pada gambar 2.14. 7. Join Digambarkan dalam sebuah persegi panjang hitam dengan 2 atau lebih alur masuk yang sebelumnya terjadi secara paralel dan 1 alur keluar untuk melanjutkan proses pada activity diagram.
Gambar 2.14 Simbol Fork / Join pada Activity Diagram 8. Activity final Digambarkan dengan sebuah lingkaran penuh di dalam
19 sebuah lingkaran berongga, merepresentasikan berakhirnya sebuah proses sebuah activity diagram.
Gambar 2.15 Simbol Final Node pada Activity Diagram
2.2.3 Class Diagram Menurut Whitten dan Bentley (2007: 400), Sebuah class diagram digunakan untuk menggambarkan objek dan hubungan antar objek. Elemen – elemen yang ada di dalam class diagram, yaitu: 1. Class Blok - blok pembangun pada konsep OOP. Sebuah class digambarkan sebagai sebuah kotak yang terbagi atas tiga bagian. Bagian atas adalah bagian nama dari class. Bagian tengah mendefinisikan atribut class. Bagian akhir mendefinisikan perilaku dari sebuah class.
Gambar 2.16 Elemen Class pada Class Diagram 2. Association Asosiasi merupakan sebuah relationship paling umum antara dua class dan dilambangkan oleh sebuah garis yang menghubungkan antara dua class. Garis ini bisa melambangkan tipe - tipe relationship
dan
juga
dapat
menampilkan
hukum-hukum
20 multiplicity pada sebuah relationship, seperti one-to-one, one-tomany, dan many-to-many.
Gambar 2.17 Elemen Association pada Class Diagram 3. Composition Jika sebuah class tidak bisa berdiri sendiri dan harus merupakan bagian dari class yang lain, maka class tersebut memiliki relasi composition terhadap class tempat dia bergantung tersebut. Sebuah relasi composition digambarkan sebagai garis dengan ujung berbentuk belah ketupat penuh.
Gambar 2.18 Elemen Composition pada Class Diagram 4. Dependency Pada saat tertentu sebuah class menggunakan class yang lain, hal ini disebut dependency. Umumnya penggunaan dependency digunakan untuk menunjukkan operasi pada suatu class yang menggunakan class yang lain. Sebuah dependency dilambangkan sebagai sebuah panah dengan garis putus - putus.
Gambar 2.19 Elemen Dependency pada Class Diagram
21 5. Aggregation Agregasi merupakan tipe relasi yang unik, yang salah satu objeknya adalah “bagian” dari objek lainnya.
Gambar 2.20 Elemen Aggregation pada Class Diagram
22
Gambar 2.21 Contoh Class Diagram
23
2.2.4 Sequence Diagram Menurut Whitten dan Bentley (2007: 394), sequence diagram menggambarkan interaksi antar-objek melalui pesan di dalam eksekusi sebuah use case atau operasi. Sistem sequence diagram membantu mengidentifikasi pesan high level yang masuk dan keluar dari sistem. Kemudian, pesan ini akan digunakan masing-masing objek untuk berkomunikasi dengan objek-objek lainnya. Notasi yang digunakan dalam sequence diagram adalah actor, system, lifelines, activation bars, input messages, dan output messages.
Gambar 2.22 Contoh Sequence Diagram 2.2.4.1 Notasi pada Sequence Diagram Notasi yang digunakan (Whitten & Bentley, 2007: 394-395, 660) dalam menggambarkan sequence diagram adalah sebagai berikut: 1. Actor Merepresentasikan aktor yang ada pada use case. Notasinya ditunjukkan dengan simbol aktor pada use case.
24
Gambar 2.23 Simbol Aktor pada Sequence Diagram 2. System Digambarkan dalam sebuah kotak yang mengindikasikan sistem sebagai satu kesatuan. Tanda colon (:) menandakan nama instance yang sedang berjalan.
Gambar 2.24 Simbol System pada Sequence Diagram Dalam merancang sequence untuk program berorientasi objek (OOP), system dibagi menjadi 3 macam, yaitu: 1. Interfaces Class Mengindikasikan kode interface class. Seperti pada gambar 2.25, penambahan kata “<
>” dilakukan agar tidak terjadi kebingungan akan class apa yang dimaksud.
Gambar 2.25 Contoh Simbol Interface Class
25
2. Controller Class Sama seperti pada interfaces class, adanya penambahan
kata
“<>”
untuk
mengindikasikan bahwa class yang dimaksud merupakan controller class.
Gambar 2.26 Contoh Simbol Controller Class 3. Entity Class Menunjukkan entity yang berkolaborasi di dalam sequence.
Gambar 2.27 Contoh Simbol Entity Class 3. Lifelines Digambarkan dengan garis putus – putus ke bawah dari notasi aktor dan sistem. Mengindikasikan life of sequence.
Gambar 2.28 Simbol Lifeline pada Sequence Diagram 4. Activation bars Sebuah persegi panjang di atas lifeline yang menunjukkan periode waktu ketika aktor atau sistem aktif di dalam sequence.
26
Gambar 2.29 Simbol Activation Bars pada Sequence Diagram 5. Messages Panah horizontal dari aktor ke sistem yang menunjukkan input message.
Gambar 2.30 Simbol Messages pada Sequence Diagram 6. Output messages Panah horizontal dengan garis putus – putus dari sistem ke aktor yang menunjukkan respon dari sistem.
Gambar 2.31 Simbol Output Message pada Sequence Diagram 7. Self Call Sebuah objek yang memanggil method yang dimilikinya sendiri.
27
Gambar 2.32 Simbol Self Call pada Sequence Diagram 8. Receiver Actor Aktor lain atau sistem eksternal dapat dimasukkan jika menerima message dari dalam sistem.
Gambar 2.33 Contoh Penggunaan Simbol Receiver Actor pada Sequence Diagram Contoh sequence diagram pada gambar 2.33 menunjukkan penggunaan simbol receiver actor yang ditunjukan oleh simbol aktor dengan label Sys Admin, yang menerima sebuah message berupa data dari dalam sistem. 9. Frame Sebuah kotak yang melampirkan satu atau lebih pesan dalam
membagi
menunjukkan
fragmen
kejadian
dari
berulang
sequence, (loops),
(alternate/alt), dan pilihan (optional/opt).
dapat
berkondisi
28
Gambar 2.34 Simbol Frame pada Sequence Diagram 2.3 Internet dan World Wide Web Internet dan world wide web merupakan dua hal yang berbeda, namun web application sangat bergantung kepada keduanya (Stobart, 2008: 4).
2.3.1 Internet Menurut Budhi Irawan (2005: 69-70), internet merupakan suatu jaringan komputer global yang terbentuk dari jaringan - jaringan komputer lokal dan regional yang memungkinkan komunikasi data antar komputer yang terhubung ke jaringan tersebut. Agar komputer - komputer dalam suatu jaringan dapat berkomunikasi, maka dibutuhkan suatu protokol atau suatu aturan standar komunikasi baik antar komputer maupun jaringan komputer. Protocol TCP/IP (Transmission Control Protocol/Internet Protocol) menjadi protokol standar yang digunakan pada jaringan internet, karena TCP/IP dikembangkan untuk dapat diterapkan di hampir segala jenis platform komputer. Pertama kali dikemukakan oleh US Department of Defense dalam proyek ARPANET (Advanced Research Project Agency Network) yang disponsori oleh ARPA (Advanced Research Project Agency) (Stobart, 2008: 4). ARPA mencatat sejarah dalam dunia internet setelah berhasil membangun koneksi ARPANET antara dua komputer yang berlainan tempat, yang
29 pertama di University of California Los Angeles dan yang kedua di Stanford Research Institute (Green, 2010: 21). ARPANET kemudian menjadi cikal bakal internet hingga pada saat ini.
2.3.2 World Wide Web World wide web atau lebih dikenal dengan www adalah suatu metode untuk menampilkan informasi di internet, baik berupa teks, gambar, suara maupun
video
yang
interaktif
dan
mempunyai
kelebihan
untuk
menghubungkan satu dokumen dengan dokumen lainnya yang dapat diakses melalui browser (Yuhefizar, 2008: 159). World wide web yang digunakan sampai sekarang pertama kali diperkenalkan oleh Tim Berners-Lee di CERN (Centre Européenne pour la Recherche Nucléaire / European Organization for Nuclear Research) pada tahun 1990 (Stobart, 2008: 4). Menurut Simon Stobart dan David Parsons, world wide web memiliki beberapa teknologi penting yang digunakan di atas dasar internet, yaitu: 1. Hypertext Transfer Protocol (HTTP) 2. Hypertext Markup Language (HTML) 3. URL, URI, dan URN 2.3.2.1 Web Browser Web Browser merupakan suatu perangkat lunak yang memungkinkan pengguna untuk berinteraksi dan melakukan navigasi World Wide Web (WWW). (D.P. Nagpal, 2006: 528) Beberapa contoh web browser yang dikenal secara umum adalah Microsoft Internet Explorer, Netscape Navigator, Mozilla Firefox, Safari, Opera, Konqueror, dan Google Chrome.
30
2.3.2.2 Web Server Menurut Janner Simarmata (2010: 88) web server adalah potongan perangkat lunak yang mendukung berbagai protokol web, seperti HTTP, HTTPS, dan lain - lain untuk memproses permintaan client. 2.3.2.3 Hypertext Transfer Protocol (HTTP) Menurut Janner Simarmata (2010: 52) HTTP atau Hypertext Transfer Protocol merupakan protokol komunikasi stateless yang berbasiskan pada TCP yang pada awalnya digunakan untuk mengambil kembali file dari web server. Pada perkembangannya, HTTP yang paling umum digunakan adalah HTTP versi 1.1. Versi 1.1 ini mengizinkan client dan server berkomunikasi menggunakan banyak headers untuk menyampaikan informasi dan deskripsi useragent, serta bertindak sebagai alat elementer untuk autentikasi pengguna. 2.4 Web Based Application Web based application atau juga dikenal sebagai web app merupakan sebuah web yang memungkinkan pengguna melakukan sesuatu dan menyimpan sesuatu pada web server melalui web tersebut (Fowler, 2008: 3-4). Pada dasarnya, web app adalah aplikasi yang menggunakan web browser sebagai client (Nations, 2013). Selain karena biaya produksi dan operasional yang relatif murah, web based application menawarkan beberapa kelebihan yang dapat dilakukan (Stobart, 2008: 2-3), yaitu: 1. Mengizinkan kita untuk mendistribusikan sebuah data melalui world wide web (www). 2. Mengatur concurrency, sehingga satu sumber web dapat diakses oleh beberapa pengguna. 3. Pembangunan content yang dinamis. 4. Mencakup keamanan role-based, yang memungkinkan adanya pengaturan untuk memperbolehkan (allow) dan menolak (deny) akses ke sebuah resources berdasarkan user-role. 5. Menyediakan akses ke database, yang data dapat disimpan secara
31 permanen dan dapat diakses saat dibutuhkan. 6. Menjalankan layanan transaksi dari database sehingga isi database menjadi reliable dan konsisten. 7. Dapat dijalankan pada multiplatform. 2.5 Hypertext Markup Language (HTML) Menurut John Duckett (2010: 2), HTML atau Hypertext Markup Language merupakan bahasa yang paling umum digunakan dalam pembangunan web. Sesuai dengan namanya, markup language yang berarti bahasa penandaan, HTML digunakan untuk menandai secara khusus bagian – bagian yang terdapat dalam sebuah halaman web. Penandaan pada setiap bagian menggunakan tag.
Gambar 2.35 Contoh File HTML Pada contoh potongan code HTML gambar 2.35 di atas, penggunaan tag HTML ditandai dengan pemakaian kurung siku “< >” serta adanya kata atau huruf di dalamnya. Inilah yang menjadi penanda di dalam sebuah file HTML pada setiap bagian, menandakan yang mana header, judul, body, paragraph, tabel, dan lainnya.
32
Gambar 2.36 Tampilan File HTML pada Web Browser Gambar 2.36 menunjukkan hasil tampilan dari code HTML pada gambar 2.35 saat dibuka di web browser.
Tidak diperlukan program aplikasi khusus untuk
membangun code HTML, cukup menggunakan text editor seperti Notepad pada sistem operasi Windows dan TextEdit pada sistem operasi Macintosh. 2.5.1 Tag dan Element HTML Tag HTML selalu berpasangan, ada pembuka (opening tag) yang ditandai dengan “< >” dan ada penutup (closing tag) ditandai dengan “” (Duckett, 2010).
Gambar 2.37 Tag dan Element HTML Penjelasan terkait dapat dilihat pada gambar 2.37. Adanya opening tag dan closing tag disertai dengan adanya huruf di antara kedua tag menjadikannya sebuah elemen HTML.
33 2.5.2 Markup Element HTML Dalam pemrograman web menggunakan HTML, akan banyak menggunakan elemen HTML untuk markup. Ada banyak jenis elemen HTML yang dikelompokkan berdasarkan fungsinya. Jenis – jenis elemen markup dasar yang disediakan oleh HTML yaitu: 1. Heading dengan 6 tingkat ukuran: , , , , , dan . 2. Pemisah: Paragraf
, preformatted sections <pre> , line breaks
, dan addresses
. 3. Presentational elements: , , , <s>, , <sup>, <sub>, <strike>, , <small> , dan
. 4. Phrase element: <em>, <strong>, , , , , , , , , , dan <samp>. 5. List: terdiri dari unordered list, ordered list, dan definition list. Unordered list menggunakan dan - , ordered list menggunakan
dan - , dan definition list menggunakan
, - , dan
- . 6. Editing element: dan <del>. 7. Grouping element:
dan <span>. Web browser akan membaca semua elemen markup dan memprosesnya menjadi tampilan web. Fungsi utama dari markup elemen ini adalah membuat file yang terstruktur dan memberikan bentuk tampilan sesuai dengan keinginan programmer.
2.6 Cascading Style Sheet (CSS) Cascading Style Sheet atau lebih dikenal dengan CSS dalam pemrograman web berfungsi untuk mengatur style dari halaman web (Duckett, 2010: 244). Pengaturan termasuk di dalamnya seperti penggunaan tipe dan warna font, ketebalan dan warna pada garis, peletakan dan ukuran setiap div, penentuan background, dan lain – lain. Dalam penulisannya, CSS memerlukan rule yang dapat diatur sesuai keinginan programmer. rule, dibagi dalam dua bagian: 1. Selector menunjuk elemen mana yang akan diberikan rule CSS.
34 2. Declaration menetapkan bagaimana sebuah elemen yang ditunjuk akan ditata. Declaration juga terbagi menjadi dua bagian yang dipisahkan dengan colon (titik dua) “:” dalam penulisannya : a. Property Digunakan untuk memilih property apa yang akan digunakan untuk memberikan efek kepada elemen yang telah ditunjuk. b. Value Memberikan nilai secara spesifik bagi property yang telah dipilih. Pada file HTML yang tidak ada rule CSS akan terlihat kurang beraturan, sementara jika diterapkan rule CSS pada elemen – elemen yang ada, akan menghasilkan tampilan yang lebih baik.
2.7 JavaScript Menurut John Duckett (2010: 481-482), JavaScript merupakan bahasa pemrograman yang digunakan dalam pemrograman web. Dengan menggunakan JavaScript, programmer dapat: 1. Membaca dan menuliskan (read & write) elemen dan teks. 2. Memanipulasi atau memindahkan teks. 3. Menjalankan fungsi perhitungan pada data. 4. Bereaksi terhadap events, seperti saat pengguna menekan sebuah button. 5. Membaca waktu dan tanggal di komputer pengguna. 6. Menetapkan ukuran tampilan beserta resolusi layar dan web browser version pada komputer pengguna. 7. Melakukan pengecekan pada input yang diberikan oleh pengguna, seperti pada pengecekan form validation. Penulisan code JavaScript ditandai dengan tag ‘<script type=”JavaScript”> ’ pada halaman HTML. Code JavaScript dapat dimasukkan secara internal ataupun eksternal. Penulisan secara internal cukup dengan memasukan code di antara tag script. Sedangkan secara eksternal, code berupa file yang disimpan berlainan folder ataupun dari link internet dituliskan seperti berikut: <script type=”JavaScript” src=”scripts/validation.js”>
35
2.8 Jquery Menurut McFarland (2011: 4) jQuery merupakan pustaka javascript yang dibuat untuk memudahkan pemrograman javascript. Sebagai contoh, dengan menggunakan jQuery kode pemrograman yang memerlukan beratus – ratus baris dapat diselesaikan dengan hanya satu baris kode saja.
2.9 Hypertext Preprocessor (PHP) Menurut Peter B. MacIntyre (2010: 2), PHP merupakan bahasa scripting yang seringkali digunakan pada server-side yang dibuat khusus untuk pemrograman web. PHP harus terhubung pada sebuah web server atau software web server seperti Apache atau IIS (Internet Information Service). PHP dapat digunakan untuk menghasilkan informasi HTML secara dinamis. Selain itu, PHP juga dapat digunakan untuk membangun integrasi dengan database tools seperti MySQL, SQLite, DB2, Oracle, dan sebagainya. PHP memiliki kelebihan dibanding bahasa scripting lainnya. Beberapa kelebihan yang dipaparkan oleh Luke Welling (2009: 4) adalah: 1. Performance
PHP dapat bekerja cepat dengan performa yang sangat baik. 2. Scalability Skala komoditas yang besar. 3. Integrasi ke database PHP memiliki native connection yang tersedia untuk berbagai macam database system. 4. Built-in libraries PHP memiliki banyak fungsi built-in untuk melakukan tugas yang berhubungan dengan web task. 5. Low cost PHP merupakan bahasa scripting open source, sehingga siapapun dapat menggunakannya secara gratis. 6. Ease of learning and use PHP mudah untuk dipelajari. Bahasa pemrograman PHP didasari pada bahasa pemrograman pada umumnya, seperti C, C++, Perl, dan Java. 7. Strong object-oriented (OOP) support
36 PHP versi 5 sudah didukung dengan fitur OOP. 8. Flexibility of development approach PHP memberikan kemudahan bagi developer dalam implementasi. PHP sangat mudah untuk beradaptasi dengan framework seperti CodeIgniter. 9. Availability of source code Developer memiliki akses langsung dengan source code PHP. 10. Availability of support and documentation PHP memberikan dokumentasi yang jelas dan tersedia komunitas yang siap membantu jika developer mengalami kesulitan dalam menggunakan PHP.
2.10 MySQL Menurut Welling and Thomson (2008, p3) MySQL adalah sebuah relational database server yang sangat cepat dan dapat menyesuaikan dengan kebutuhan pengguna. MySQL merupakan sebuah basis data yang dapat menyimpan, mencari, melakukan pengurutan, dan mengambil data. Server MySQL mengontrol akses data sehingga dapat diakses oleh banyak pengguna secara bersamaan, menyediakan akses yang cepat, dan memastikan hanya penguna yang terotorisasi yang dapat mengakses basis data.
MySQL
menggunakan
SQL
(Standard
Library
Language).
Dalam
penggunaannya, MySQL memiliki 2 lisensi. Pertama, lisensi gratis (open source) yang dapat digunakan bila penggunaannya masih sesuai dengan lisensi open source. Kedua, lisensi komersil. Beberapa keunggulan dalam menggunakan MySQL: 1. Performa MySQL sangat cepat. Pada tahun 2002, seperti yang dilansir eWeek yang membandingkan 5 basis data terbaik. Hasil terbaik adalah MySQL dan Oracle. 2. Biaya murah MySQL tersedia secara gratis dengan lisensi open source. 3. Mudah digunakan Kebanyakan RDBMS lain menggunakan SQL, sehingga jika sebelumnya pernah menggunakan basis data lain maka tidak akan sulit beradaptasi dengan MySQL.
37 4. Portabilitas MySQL dapat digunakan dalam banyak sistem Unix, serta Windows. 5. Source code Dapat mendapatkan dan memodifikasi source code MySQL dari banyak sumber. 6. Ketersediaan dukungan Merupakan produk open source yang mempunyai perusahaan yang menawarkan dukungan, konsultasi, sertifikasi.
2.11 Asynchronous JavaScript And XML (AJAX) AJAX merupakan cara dalam merancang dan membangun halaman web yang interaktif dan responsif seperti aplikasi desktop. Halaman AJAX dibangun dengan menggunakan bahasa yang sudah umum, seperti XHTML, CSS, dan JavaScript (Riordan, 2008: 5). Selanjutnya, Lee Babin (2007: 6) menyebutkan bahwa pada dasarnya, AJAX memanfaatkan objek XMLHTTPRequest JavaScript untuk mengirimkan asynchronous request (tanpa harus melakukan refresh halaman) terhadap web server. Dengan menggunakan XMLHTTPRequest, web application dapat mengumpulkan atau mengirimkan informasi ke web server, sehingga web server dapat memproses request dari pengguna dan mengirimkan respon pada halaman web secara dinamis.
Gambar 2.38 Alur Request dan Response Tradisional
38
Gambar 2.39 Alur Request dan Response dengan AJAX Perbedaan terlihat sangat jelas antara proses request dan response pada web application saat tidak menggunakan dan menggunakan AJAX. Pada gambar 2.38 proses yang terjadi masih menggunakan proses tradisional, web application atau web page melakukan request terhadap web server, dan mendapatkan kembali response setelah terjadi proses refresh page. Alur pada web application yang menggunakan AJAX dapat dilihat pada gambar 2.39. Selama proses request dan response dengan web server, tidak terjadi refresh atau perpindahan page. Hal ini mengizinkan pengguna untuk tetap fokus terhadap task pada halaman yang sedang dibukanya. 2.12 JavaScript Object Notation (JSON) JavaScript Object Notation yang disingkat JSON adalah cara untuk merepresentasikan objek JavaScript dalam bentuk teks biasa (Riordan, 2008: 380). Menurut Ryan Benedetti dan Ronan Cranley (2011: 350), JSON tidak bergantung pada bahasa pemrograman tertentu. Transfer data dengan JSON lebih efisien dibandingkan dengan XML, dan merupakan kumpulan nama atau nilai, seperti associative arrays. Nilai pada JSON dapat berupa strings, angka, arrays, objects, boolean values (true atau false) atau null. Untuk mengakses informasi pada JSON, cukup menggunakan notasi titik (.), sama halnya dengan cara akses pada objek lainnya. Array pada JSON memiliki ciri yang sama, misalnya length, dengan array Javascript lainnya.
39 2.13 Framework Framework merupakan suatu struktur berisikan kumpulan perintah atau fungsi dasar yang membentuk aturan - aturan tertentu dan saling berinteraksi satu dengan yang lain (Wardana, 2010: 3). Dengan menggunakan framework, developer tidak perlu membangun kode dari nol karena hanya perlu membangun kode dan menjalankannya dengan bantuan fungsi yang telah disediakan. Beberapa kelebihan dalam menggunakan framework dalam membangun sebuah aplikasi adalah: 1. Mempersingkat waktu pembuatan aplikasi. 2. Kode lebih mudah untuk dibaca (terstruktur). 3. Kode lebih mudah untuk diperbaiki. 4. Tidak perlu membuat kode penunjang seperti; koneksi database, validasi form, GUI, dan keamanan karena telah disediakan. 5. Membuat developer lebih fokus ke alur permasalahan kode. 6. Adanya keteraturan peletakan kode. 2.14 CodeIgniter CodeIgniter merupakan framework untuk membangun web dengan bahasa pemrograman PHP. CodeIgniter menyediakan kumpulan libraries untuk tugas yang biasa dibutuhkan, dengan tampilan dan struktur yang sederhana untuk mengakses libraries.
Dengan
berkurangnya
jumlah
coding
yang
perlu
dibutuhkan,
pengembangan proyek pun akan lebih cepat. Adapun beberapa kelebihan dalam menggunakan CodeIgniter, yaitu: 1. Tidak perlu mempelajari template bahasanya. 2. Tidak perlu menggunakan command line dalam penggunaannya. 3. Hampir tidak diperlukan konfigurasi lagi. 4. Memiliki performa yang sangat baik. 5. Memiliki kecocokan yang sangat luas dengan account hosting yang menjalankan berbagai jenis versi dan konfigurasi PHP. 6. Merupakan solusi yang mudah. 7. Tidak perlu mengikuti aturan coding yang terbatas. (Ellislab, Inc.)
2.14.1 Model View Controller (MVC) Model View Controller atau MVC merupakan konsep dasar yang digunakan CodeIgniter. MVC (Presman, 2010: 386) merupakan
40 salah satu arsitektur desain tiga layer yang memisahkan antar-muka, navigasi, dan perilaku aplikasi. Komponen – komponen MVC adalah: 1. Model Model berisi semua konten spesifik aplikasi dan logika pemrosesan, termasuk isi object, akses ke sumber data atau informasi eksternal, dan semua fungsi pemrosesan. 2. View View berisi fungsi spesifik antar-muka yang memungkinkan penyajian isi (content) dan pengolahan logika, termasuk seluruh isi object, akses ke sumber data/informasi eksternal, dan semua fungsi yang ditujukan bagi end-user. 3. Controller Controller berfungsi untuk mengatur akses dengan model dan view serta mengkoordinasi aliran data di antara keduanya.
Gambar 2.40 Alur MVC
2.14.2 Object-Oriented Programming Menurut
Matt
Weisfield
(2009:
5-8)
Object-Oriented
Programming (OOP) merupakan pemrograman yang berorientasikan pada objek. Semua atribut dan perilaku dibungkus di dalam class dan object.
41 1. Class Class merupakan sebuah blueprint (cetak biru) dari sebuah object (Weisfeld, 2009: 14). Class dibutuhkan sebagai dasar dalam membuat object. Class terdiri dari dua hal, yaitu
attribute dan method. Attribute (atribut)
merupakan definisi dari sebuah class, sedangkan method (metode) merupakan perilaku (behaviour) dari sebuah class. 2. Object Object dalam OOP merupakan building blocks. Pada dasarnya sebuah program yang menggunakan konsep OOP merupakan sebuah kumpulan dari object (Weisfeld, 2009: 10). 2.15 Bootstrap Twitter, Inc., selalu mengembangkan proyek open source yang tersimpan di GitHub, komunitas dimana para developer untuk proyek open source berkumpul dan bekerja sama (Twitter, Inc.). Bootstrap merupakan salah satu framework untuk pengembangan front-end sebuah web yang sangat terkenal di seluruh dunia, yang bertujuan untuk membantu pengembangan web menjadi lebih cepat dan lebih mudah. Bootstrap merupakan sebuah proyek open source. Bootstrap dibuat pertama kali oleh designer dan developer Twitter, Mark Otto dan James Thornton, pada pertengahan tahun 2010. Kemudian Bootstrap dirilis untuk publik pada 19 Agustus 2011. Pada perilisan versi kedua, Bootstrap menambahkan fitur responsive sebagai pilihan yang dapat digunakan. Lalu pada versi ke-tiga, fitur responsive dibuat menjadi default dengan pendekatan yang diutamakan pada perangkat mobile (Bootstrap). Dikarenakan pengembangannya sangat signifikan, Bootstrap merupakan proyek yang paling diawasi dari semua proyek yang ada pada GitHub (Cochran, 2012: 2).
2.16 Responsive Web Design Menurut Ethan Marcotte (2011: 5), Responsive Web Design adalah pendekatan yang memungkinkan desain dan pengembangan website dapat mengakomodasi berbagai ukuran layar, platform dan orientasi yang berbeda.
42 Menurut Ethan marcotte, terdapat 3 teknik dalam melakukan desain web responsif: 1. Flexible grid layout Teknik ini memungkinkan lebar dan layout website menyesuaikan ukuran layar secara fleksibel. 2. Flexible images Teknik ini memungkinkan ukuran gambar menyesuaikan ukuran layar secara fleksibel. 3. Media dan media queries Merupakan bagian dari CSS yang memperindah tampilan website yang dibuat sesuai dengan ukuran layar.
2.17 Perpustakaan George M. Eberhart (2006: 2) mendefinisikan, “Perpustakaan adalah koleksi sumber daya dalam berbagai format yang diselenggarakan oleh para ahli dalam bidang informasi atau ahli lainnya yang menyediakan kemudahan secara fisik, digital, akses bibliografi atau intelektual dan menawarkan ditargetkannya layanan dan program dengan misi mendidik, menginformasikan, atau menghibur berbagai khalayak dan tujuan merangsang pembelajaran individu dan memajukan masyarakat secara keseluruhan.” Dari pernyataan di atas, dapat disimpulkan bahwa perpustakaan merupakan sebuah wadah atau tempat koleksi buku, jurnal, majalah, dan hal lainnya sebagai kumpulan informasi yang berisikan ilmu pengetahuan dan hiburan yang dibutuhkan manusia.
2.18 DDC (Dewey Decimal Classification) dan Call Number Menurut Shivendra Singh (2011: 149), setiap aset perpustakaan mempunyai call number yang biasanya digunakan untuk menemukan lokasi aset pada rak. Call Number terdiri dari dua bagian, di antara lain: nomor DDC (Dewey Decimal Classification) dan nomor buku. Nomor buku terdiri dari angka dan huruf yang menambahkan detail buku dibandingkan dengan nomor DDC. Untuk buku yang mempunyai DDC yang sama, nomor buku dapat menjadi pembeda antara dua buku tersebut. Nomor DDC merepresentasikan kategori subjek. Karakteristik nomor DDC antara lain :
43 1. Nomor adalah bilangan desimal. Pada bagian sebelah kiri titik desimal terdiri dari 3 angka dengan jarak dari 000 – 999. 2. Di sebelah kanan titik desimal terdapat angka pilihan yang membuat nomor ddc semakin spesifik. 3. Contoh nomor DDC: 765.15, 705., 005.11345, 794.1
2.19 ISBN (International Standard Book Number) Menurut
Perpustakaan
Nasional
Republik
Indonesia
(2012),
ISBN
(International Standard Book Number) adalah kode pengidentifikasian buku yang bersifat unik. Informasi tentang judul, penerbit, dan kelompok penerbit tercakup dalam ISBN. ISBN terdiri dari deretan angka 13 digit, sebagai pemberi identifikasi terhadap satu judul buku yang diterbitkan oleh penerbit. Oleh karena itu satu nomor ISBN untuk satu buku akan berbeda dengan nomor ISBN untuk buku yang lain. Nomor ISBN terdiri dari 13 digit dan dibubuhi huruf ISBN didepannya. Nomor tersebut terdiri atas 5 (lima) bagian. Masing-masing bagian dicetak dengan dipisahkan dengan tanda hyphen (-). Kelompok pembagian nomor ISBN ditentukan dengan struktur sebagai berikut: ISBN 978-602-8519-93-9 1. Angka pengenal produk terbitan buku dari EAN (Prefix identifier) = 978 2. Kode kelompok (group identifier) = 602 (Default) 3. Kode penerbit (publisher prefix) = 8519 4. Kode Judul (title identifier) = 93 5. Angka pemeriksa (check digit) = 9 Fungsi ISBN: 1. Memberikan identitas terhadap satu judul buku yang diterbitkan oleh penerbit 2. Membantu memperlancar arus distribusi buku karena dapat mencegah terjadinya kekeliruan dalam pemesanan buku 3. Sarana promosi bagi penerbit karena informasi pencantuman ISBN disebarkan oleh Badan Nasional ISBN Indonesia di Jakarta, maupun Badan Internasional yang berkedudukan di London
2.20 ISSN (International Standard Serial Number) Menurut ISSN International Centre (2014), ISSN (International Standard Serial Number) merupakan delapan buah angka yang digunakan untuk membedakan
44 koran, jurnal, majalah dan segala jenis media baik yang dicetak ataupun elektronik. ISSN terdiri dari dua kelompok yang masing – masing terdiri dari empat angka dan dipisahkan oleh tanda penghubung. ISSN digunakan untuk mengidentifikasi publikasi, tetapi tidak termasuk informasi tentang asal – usul atau isi publikasi, dan tidak menjamin kualitas atau validitas isi.
