BAB 2 LANDASAN TEORI 2.1
Internet Internet adalah kumpulan jaringan terbesar yang menghubungkan jutaan perangkat dengan perangkat lainnya di seluruh dunia (Shelly & Vermaat, 2011:11).
2.2
World Wide Web (WWW) World Wide Web (WWW) atau Web terdiri atas sekumpulan dokumen elektronik di seluruh dunia. Setiap dokumen disebut dengan Web Page, yang dapat mengandung teks, grafik, animasi, audio dan video (Shelly & Vermaat, 2011:80).
2.3
Web 2.0 Web 2.0 adalah website yang menyediakan sarana bagi pengguna untuk berbagi informasi personal, serta
memungkinkan pengguna memodifikasi
konten website (Shelly & Vermaat, 2011:462). 2.4
Hypertext Markup Language (HTML) Hypertext Markup Language (HTML) merupakan sebuah bahasa yang digunakan programmer untuk membentuk suatu dokumen untuk ditampilkan ke dalam web (Shelly & Vermaat, 2011:678).
2.5
Cascading Style Sheet (CSS) Cascading Style Sheet (CSS) merupakan suatu bahasa yang digunakan untuk menjelaskan bagaimana suatu dokumen yang ditulis dengan markup language ditampilkan seperti HTML ditampilkan. Dengan CSS, user dapat mengontrol bagaimana suatu teks ditampilkan, style dari font, jumlah spasi antar paragraf, ukuran kolom, background, serta berbagai efek visual lainnya. Salah satu keuntungan utamanya adalah CSS dapat digunakan di berbagai halaman, dengan kata lain user dapat mengubah style dari satu website tanpa perlu mengubah style dari setiap halaman satu per satu. (Pouncey & York, 2011:3)
7
8 2.6
JavaScript JavaScript adalah sebuah bahasa pemograman yang memungkinkan dalam menyempurnakan aplikasi web statis dengan menyediakan konten yang dinamis, dan interaktif. Dengan keahlian tersebut dapat membuat suatu halaman lebih berwarna sehingga menarik pengunjung untuk tetap ingin mengunjungi halaman tersebut. (Wilton & McPeak, 2011:).
2.7
JQuery JQuery adalah sebuah library JavaScript yang dibuat untuk membantu para perancang dan pengembang web dalam menulis dan memperluas interaksi JavaScript secara cepat dan singkat dengan menggunakan kumpulan fungsi yang telah ditentukan menggunakan fungsi asli dari JavaScript itu sendiri (Rutter, 2011:2).
2.8
Javascript Object Notation (JSON) Javascript Object Notation (JSON) merupakan format data yang paling sering digunakan sebagai tempat pertukaran data. JSON dikembangkan oleh Douglas Crockford. JSON adalah format, bukan sebuah bahasa. JSON dapat digunakan di web aplikasi untuk melakukan transfer data (Sai Srinivas Sriparasa, 2013:1)
2.9
Asynchronous Javascript and XML (AJAX) Asynchronous Javascript and XML (AJAX) adalah kumpulan teknologi yang memberikan client-side bagian dari aplikasi web untuk terus menerus memperbarui bagian dari dia sendiri dari web server. Dengan menggunakan AJAX user tidak perlu mengirimkan web form ataupun meninggalkan halaman yang sedang dikunjungi. Bahasa pemograman client side seperti JavaScript membuat perintah secara asynchronous dan non-blocking untuk meminta bagian data dari suatu halaman yang dapat berupa data mentah yang kemudian akan diubah menjadi HTML pada client side, ataupun berupa data yang sudah siap untuk ditanamkan di halaman HTML (Hoffman & Sullivan, 2007:2).
2.10 PHP Hypertext Preprocessor (PHP) PHP : Hypertext Preprocessor (PHP) adalah sebuah bahasa pemograman server-side dan bersifat Open Source yang dirancang secara khusus untuk web. Dalam halaman HTML dapat dicantumkan kodingan PHP
9 yang akan dikerjakan setiap kali halaman tersebut dikunjungi (Welling & Thomson, 2005:2).
2.11 Model - View – Controller (MVC) Model-View-Controller (MVC) adalah sebuah pola perancangan software yang dibangun dengan menghubungkan 3 komponen utama yaitu model, view, dan controller (Pitt, 2012:1). Model merupakan tempat untuk menyimpan logika bisnis dalam aplikasi dimana logika bisnis yang dimaksud berupa hal – hal spesifik yang menjelaskan tentang bagaimana aplikasi menyimpan data, atau menggunakan third party services, untuk memenuhi kebutuhan bisnis. View merupakan tempat untuk menyimpan semua elemen user interface dalam aplikasi, seperti markup HTML, CSS dan file javascript. Controller merupakan komponen yang menghubungkan Model dan View. Controller mengontrol bagaimana aplikasi akan merespon terhadap interaksi user dalam suatu view.
2.12 Codeigniter (CI) Codeigniter (CI) merupakan salah satu framework PHP yang digunakan untuk mengembangkan web aplikasi. Tujuannya adalah untuk memungkinkan user untuk mengembangkan proyek lebih cepat dibandingkan harus menulis code dari awal dengan cara menyediakan sekumpulan libraries untuk task – task yang biasa diperlukan, tampilan user interface yang sederhana, serta struktur logika untuk mengakses libraries tersebut. CI memungkinkan user untuk meminimalkan jumlah code dalam perancangan aplikasi. (Anonymous, 2006) 2.13 8 Aturan Emas (Eight Golden Rules) Menurut Shneiderman dan Plaisant (2005, 74), ada delapan aturan emas yang dapat diaplikasikan dalam perancangan user interface, yaitu: 1. Strive for consistency (berusaha untuk konsisten) Banyak bentuk dari konsistensi yang harus diperhatikan dalam merancang user interface. Beberapa diantaranya adalah harus memiliki konsistensi dalam urutan aksi di situasi yang serupa, memiliki menu, warna, layout dan font yang sama.
10 2. Cater to universal usability (menyediakan fungsi yang umum) User interface harus dapat menjawab kebutuhan dari user yang berbedabeda. Contohnya dengan menambahkan fitur explanation untuk novice user dan menambahkan fitur shortcut untuk expert user. 3. Offer informative feedback (memberikan umpan balik yang informatif) Untuk setiap aksi yang dilakukan diharapkan adanya suatu umpan balik bagi user. Respon yang diberikan tergantung dari aksi yang dilakukan oleh user. 4. Design dialog to yield closure. (merancang dialog untuk mengakhiri suatu aksi) Urutan suatu aksi haruslah diorganisasi berdasarkan kelompok tertentu dari awal, tengah dan akhir. Umpan balik yang informatif pada akhir suatu aksi kepada user akan memberikan kepuasan kepada user bahwa aksi yang mereka lakukan telah berhasil dengan baik dan menjadi pertanda untuk melakukan aksi selanjutnya. 5. Prevent errors (mencegah kesalahan) Perancangan suatu sistem haruslah dibuat sedemikian rupa sehingga user tidak melakukan kesalahan. Jika user melakukan kesalahan maka sistem seharusnya dapat mendeteksi dan menawarkan.recovery yang sederhana, konstruktif dan spesifik. 6. Permit easy reversal of actions (mudah untuk kembali ke aksi sebelumnya) Setiap aksi haruslah dirancang sedemikian rupa, sehingga user dapat kembali ke keadaan sebelum aksi dijalankan. Hal ini dapat membuat user lebih berani untuk mengeksplorasi sistem yang dibuat dan memilih options yang tidak familiar. 7. Support internal locus of control (mendukung pusat kendali internal) User yang berpengalaman biasanya memiliki keyakinan bahwa mereka bertanggungjawab terhadap sistem dan sistem akan memberikan respon terhadap aksi yang mereka lakukan. Respon yang mengejutkan, urutan yang aneh dalam memasukkan data dan kesulitan dalam memperoleh informasi yang diperlukan serta ketidakmampuan dalam mendapatkan hasil sesuai aksi tertentu akan menimbulkan kekacauan dan keraguan bagi user. 8. Reduce short term memory load (mengurangi beban memori jangka pendek)
11 Keterbatasan manusia dalam mengelola memori jangka pendek membuat user membutuhkan suatu tampilan yang sederhana, pengaturan dalam multipage, pergerakan window yang sesedikit mungkin serta waktu training yang cukup dan optimal.
2.14 Data Flow Diagram Menurut Whitten (2007:317), Data flow diagram adalah sebuah model proses yang digunakan untuk menggambarkan aliran data yang ada pada suatu sistem atau proses yang dikerjakan. Notasi pada data flow diagram yang digunakan adalah: Tabel 2.1 Notasi Data Flow Diagram Lambang
Pengertian
Penjelasan Manusia,
organisasi,
atau unit organisasi External Agent yang berinteraksi dengan sistem Nama Process Name
proses
yang
dikerjakan oleh sistem
Arus data yang keluar Data Flow
dan yang masuk dalam sistem Tempat penyimpanan
Data Store data
12 2.15 Unified Modelling Language (UML) Menurut Whitten dan Bentley (2007: 371), UML (Unified Modelling Languange)
adalah
satu
set
permodelan
yang
digunakan
untuk
menggambarkan sistem informasi berorientasi objek. UML berguna untuk memberikan gambaran jelas tentang sistem yang akan dibangun. Contoh nyata dari UML adalah permodelan untuk membangun sebuah rumah. UML akan menyediakan perspektif mengenai listrik, air conditioning, plumbing dan lainlain. 2.15.1 Use Case Diagram Menurut Whitten dan Bentley (2007: 371), Use case diagram adalah jenis UML yang menggambarkan interaksi antara sistem, sistem eksternal dan pengguna. Dengan kata lain, use case diagram menggambarkan siapa saja yang akan menggunakan dan bagaimana user akan menggunakan sistem.
Gambar 2.1 Use Case Diagram (Whitten & Bentley, 2007:246) Use Case Diagram terdiri dari beberapa bagian yaitu (Whitten & Bentley, 2007:246): 2.15.1.1 Aktor Aktor adalah semua hal yang berinteraksi dengan use case di dalam sistem. Aktor digambarkan dengan stick figure yang diberi nama peran dari actor tersebut.
13
Gambar 2.2 Simbol Aktor pada Use Case Diagram (Whitten & Bentley, 2007:247)
Terdapat 4 tipe utama dari actor pada use case diagram: a. Primary business actor Primary
business
actor
adalah
stakeholder
yang
mendapatkan keuntungan dari eksekusi use case dengan menerima sesuatu yang terukur atau nilai yang dapat diamati. b. Primary system actor Primary system actor adalah stakeholder yang secara langsung
berinteraksi
dengan
sistem
yaitu
untuk
menggerakkan sistem tertentu. c. External server actor External server actor adalah stakeholder yang menanggapi permintaan dari use case. d. External receiver actor External receiver actor adalah stakeholder yang bukan merupakan aktor utama tetapi
mendapatkan hasil yang
terukur atau nilai yang dapat diamati dari use case. 2.15.1.2 Relationship Relationship digambarkan sebagai garis di antara 2 simbol dalam use case diagram. Arti dari masing-masing relationship berbeda tergantung dari garis yang digambarkan dan jenis symbol yang menghubungkan. Ada 3 jenis relationship dalam use case diagram yang dipakai pada pembuatan aplikasi ini yaitu:
14
1. Associations Association adalah relasi antara aktor dengan use case yang digambarkan dengan sebuah garis dengan atau tanpa anak panah. Association dengan anak panah berarti use case digerakkan oleh aktor sedangan tanpa anak panah mengindikasikan interaksi antara use case dengan external server atau receiver actor.
Gambar 2.3 Association pada Use Case Diagram (Whitten & Bentley, 2007:248) 2. Depends On Depends On adalah sebuah relasi yang mengindikasikan bahwa sebuah use case tidak dapat dilakukan sebelum use case diselesaikan. Depends On digambarkan dengan garis berpanah dengan label <<depends on>>.
Gambar 2.4 Depends On pada Use Case Diagram (Whitten & Bentley, 2007:249) 3. Inheritance Inheritance pada use case diagram adalah relasi antara aktor
yang
dibuat
untuk
menyederhanakan
15 penggambaran ketika seorang abstract actor mewariskan perannya kepada aktor-aktor lain.
Gambar 2.5 Inheritance pada Use Case Diagram (Whitten & Bentley, 2007:250)
2.15.2 Use Case Narrative Use Case Narrative adalah deskripsi tekstual dari business event dan
bagaimana
user
akan
berinteraksi
dengan
sistem
menyelesaikan suatu tugas. (Whitten & Bentley, 2007:250)
untuk
16
Gambar 2.6 Contoh Use Case Narrative (Whitten & Bentley, 2007:259-260)
17 2.15.3 Class Diagram Menurut Whitten dan Bentley (2007: 400), Class diagram adalah jenis UML yang menggambarkan struktur kelas dan hubungan antar kelas dalam suatu sistem. Sebuah kelas dengan kelas lainnya terhubun dalam sebuah garis yaitu association beserta dengan multiplicity-nya. Berikut adalah notasi dari association dan multiplicity antar class (Whitten & Bentley, 2007:377):
Gambar 2.7 Association dan Multiplicity pada Class Diagram(Whitten & Bentley, 2007:377)
18 Di dalam class diagram terdapat konsep aggregation dan composition. Aggregation adalah hubungan dimana sebuah class whole mengandung satu atau banyak class part sedangkan composition adalah hubungan dimana kelas whole bertanggungjawab untuk masa aktif kelas part miliknya. Composition adalah hubungan yang lebih kuat daripada aggregation. (Whitten & Bentley, 2007:378)
Gambar 2.8 Contoh Aggregation Relationship pada Class Diagram (Whitten & Bentley, 2007:379)
Gambar 2.9 Contoh Aggregation Relationship pada Class Diagram (Whitten & Bentley, 2007:379)
19 2.15.4 Sequence Diagram Sequence diagram adalah jenis UML yang menggambarkan bagaimana aktor berinteraksi dengan sistem dalam sebuah use case. Diagram ini mengilustrasikan bagaimana pesan terkirim dan diterima dalam suatu urutan. (Whitten & Bentley, 2007:394) Notasi yang digunakan dalam sequence diagram adalah sebagai berikut (Whitten & Bentley, 2007:394-395): 1. Actor, Actor adalah yang berinteraksi dengan sistem dan memulai use case. 2. System System merupakan box yang mengindikasikan sistem sebagai keseluruhan. Tanda titik dua (:) adalah notasi standar pada sequence diagram untuk mengindikasikan sistem yang berjalan. 3. Lifeline Lifeline merupakan garis putus-putus yang arahnya vertikal dari aktor untuk mengindikasikan panjang dari sequence tersebut. 4. Activation bar Activation bar adalah bar yang diatur pada lifeline untuk mengindikasikan kehidupan atau keaktifan dari sequence. 5. Input message Input message adalah panah horisontal dari actor ke sistem untuk mengindikasikan pesan yang di-input. Pada UML Convention, input message diawali dengan huruf kecil, ditulis tanpa spasi dan kata tambahan diawali dengan huruf kapital. 6. Output message Output message adalah panah horisontal dari sistem ke actor dengan garis putus-putus. 7. Receiver actor Receiver actor adalah actor-actor lain atau sistem eksternal yang menerima pesan sistem. 8. Frame Frame adalah sebuah box yang melingkupi satu atau lebih pesan untuk dibagi-bagi ke dalam fragment.
20
Gambar 2.10 Contoh Sequence Diagram (Whitten & Bentley, 2007:395)
2.16 Database 2.16.1 Database Database adalah kumpulan data terintegrasi yang dikelola dan dikontrol secara terpusat. Database biasanya menyimpan informasi tentang lusinan atau ratusan class. Informasi yang disimpan ini termasuk class attributes bersamaan dengan hubungan antar class. (Satzinger et al, 2005:398)
21 2.16.2 Database Management System(DBMS) Database Management System (DBMS) adalah sistem software yang mengelola dan mengontrol akses ke dalam database. DBMS dijual dan di-install terpisah dari komponen sistem software lainnya. (Satzinger et al, 2005:398)
2.16.3 Table Table adalah sebuah data dua dimensi yang terdiri dari baris dan kolom. Table dapat disebut sebagai relation. (Satzinger et al, 2005:409)
2.16.4 Attribute Attribute adalah sebuah kolom dalam relational database. Attribute dapat disebut sebagai field. (Satzinger et al, 2005:410)
2.16.5 Key Menurut Satzinger et al (2005:410), Key adalah atribut yang mengandung nilai unik untuk setiap baris dalam sebuah tabel di relational database. Terdapat banyak jenis key dalam relational database, contohnya adalah primary key dan foreign key. Primary key adalah key yang digunakan untuk mengidentifikasi secara unik sebuah baris dalam tabel di relational database. Foreign key adalah attribute value yang disimpan dalam sebuah tabel dan juga merupakan primary key pada tabel lain di dalam sebuah relational database.
2.17 Designing Relational Database Menurut Satzinger et al, (2005: 409), untuk mengubah sebuah class diagram menjadi relational database diperlukan beberapa langkah yaitu: 1. Membuat tabel untuk setiap class. Tahapan pertama dalam membuat relational database adalah dengan memindahkan setiap class pada class diagram menjadi sebuah tabel. Nama atribut dari tabel disamakan dengan class diagram dan kamus data untuk mencegah kebingungan. 2. Memilih primary key untuk setiap tabel.
22 Pada tahap ini designer harus memilih primary key untuk masing-masing tabel. Jika dalam sebuah tabel telah ada sebuah atau sekumpulan atribut yang unik maka atribut tersebut dapat dipilih sebagai primary key. Bila dalam tabel tersebut belum ada atribut unik maka designer harus membuat primary key. 3. Menambahkan foreign key untuk menunjukkan one-to-many associations. Foreign
key
menunjukkan
hubungan
antar tabel
yang
memiliki
associations. 4. Membuat tabel baru untuk menunjukkan hubungan many-to-many. Bila terdapat many-to-many associations, tabel tersebut harus dipisahkan menjadi beberapa tabel dan memiliki lebih dari satu primary key. 5. Merepresentasikan hirarki dari class. Hirarki dari class ditunjukkan dengan hubungan parent class dengan child class, dimana child class mewarisi sebagian atau keseluruhan atribut dan method dari parent class. Pewarisan sifat ini dapat digambarkan dengan 2 cara, yaitu: a. Mengkombinasikan seluruh tabel ke dalam sebuah tabel yang mengandung seluruh atribut dari semua class kecuali keys yang dibuat pada child class. b. Menggunakan tabel-tabel terpisah untuk merepresentasikan setiap child class dan menggunakan primary key dari parent class sebagai primary key dari tabel-tabel child class. 6. Mendefinisikan referential integrity. Memastikan bahwa setiap foreign key mereferensi kepada sebuah primary key dari tabel lain. 7. Mengevaluasi kualitas skema dan membuat perbaikan yang diperlukan. Sebuah high quality data model harus memiliki fitu-fitur berikut: a. Keunikan dari setiap baris tabel dan primary keys. b. Tidak memiliki data redundan. c. Kemudahan dalam mengimplementasikan perubahan data model di masa yang akan datang. Salah satu cara dalam melakukan evaluasi redundansi data adalah normalisasi. Normalisasi adalah sebuah teknik yang memastikan kualitas dari database schema dengan meminimalisir redundansi data.
23 Normalisasi didasari oleh functional dependency dan beberapa bentuk normal yaitu: a. First Normal Form (1NF) Sebuah tabel dikatakan dalam bentuk ini bila tidak memiliki sekumpulan atribut yang berulang. b. Second Normal Form (2NF) Sebuah tabel dikatakan dalam bentuk ini bila sudah dalam 1NF dan setiap atribut non key memiliki functional dependency terhadap keseluruhan primary key. Functional dependency sendiri adalah hubungan one-to-one antara dua atribut. c. Third Normal Form Sebuah tabel dikatakan dalam bentuk ini bila sudah dalam 2NF dan tidak ada atribut non key yang bergantung pada non key lainnya. 8. Memilih tipe data yang sesuai dan batasan nilai untuk setiap kolom bila diperlukan.
2.18 Agile Software Development Terdefinisi dalam 4 nilai (Pressman, 2010:65), yaitu: 1. Interaksi dan personal lebih penting dari pada proses dan alat. 2. Perangkat lunak yang berfungsi lebih penting daripada dokumentasi yang lengkap. 3. Kolaborasi dengan klien lebih penting dari pada negosiasi kontrak. 4. Respon terhadap perubahan lebih penting daripada mengikuti rencana. 2.19 Extreme Programming XP (Extreme Programming) merupakan metode yang paling sering digunakan dari Agile Software Development.
XP terdiri atas 5 nilai yang
membentuk dasar dari setiap tugas yang dilakukan sebagai bagian dari XP (Pressman, 2010:72). 1. Communication atau Komunikasi 2. Simplicity atau Kemudahan 3. Feedback atau umpan balik 4. Courage atau keberanian 5. Respect atau rasa hormat
24 Proses dari XP terdiri atas 4 tahap (Pressman, 2010:73), yaitu:
Gambar 2.11 Proses dalam Extreme Programming (Pressman,2010:73) 1. Planning (Perencanaan) Aktivitas
perencanaan
dimulai
dengan
mengumpulkan
kebutuhan
(requirement) 2. Design (Perancangan) Proses desain pada XP mengikuti prinsip KIS (Keep It Simple). Desain yang simple lebih diutamakan dibandingkan dengan representasi yang kompleks. Jika ditemukan masalah selama proses perancangan,
XP menyarankan
untuk segera membuat prototype operasional dari masalah desain tersebut, dan kemudian mengimplementasikan dan mengeval mengevaluasinya. uasinya. Tujuannya adalah mengurangi resiko ketika implementasi yang sebenarnya dilakukan. 3. Coding Setelah story dikembangkan dan desain awal dikerjakan, para developer tidak langsung melakukan coding tetapi mengevaluasi setiap story yang telah didesain. Konsep onsep mendasar yang digunakan selama tahap ini adalah pair programming.
25 4. Testing (Pengujian) Dalam tahap ini terdapat dua pengujian yaitu individual unit test dan acceptance test (customer test). Individual unit test merupakan tahap pengujian integrasi serta validasi fungsionalitas sebuah sistem. Acceptance test yang dikenal dengan customer test merupakan tahap pengujian terhadap fitur-fitur
utama
untuk
dievaluasi
kembali
sesuai
dengan
tahap
perencanaan.
2.20 Structured Query Language (SQL) SQL adalah suatu bahasa pemograman yang digunakan untuk menghasilkan, memanipulasi, dan mengambil data dari suatu database relasional. Dengan mempelajari SQL akan memberikan manfaat seperti lebih mudah dalam memahami kerangka database yang digunakan untuk menyimpan data aplikasi (Beaulieu, 2009:ix).
2.21 Event Management “Event Management didefinisikan sebagai organisasi dan koordinasi dari aktivitas yang dibutuhkan untuk mencapai tujuan dari event” (Bladen – et all, 2012:2). 2.22 Manajemen Menurut Kamus Besar Bahasa Indonesia (kbbi.web.id), manajemen adalah penggunaan sumber daya secara efektif untuk mencapai sasaran. Kata ini memiliki arti yang hampir sama dengan kata pengelolaan yang menurut Kamus Besar Bahasa Indonesia berarti mengendalikan, menyelenggarakan atau proses melakukan kegiatan tertentu dng menggerakkan tenaga orang lain. 2.23 E-learning E-learning adalah semua kegiatan pelatihan menggunakan media elektronik atau teknologi informasi (Effendi dan Zhuang, 2005:6).
2.24 HTML5 Canvas HTML5 Canvas adalah area bitmap dari layar yang dapat dimanipulasi dengan JavaScript. HTML5 Canvas menggambar kembali layar bitmap pada
26 setiap frame menggunakan API canvas yang dipanggil melalui JavaScript (Fulton dan Fulton, 2013:1).
2.25 TCPDF TCPDF merupakan library dari PHP yang digunakan untuk mengenerate laporan dalam bentuk PDF, termasuk teks, tabel, konversi dari bentuk HTML, hyperlink, dan gambar. Web services dapat menggunakan TCPDF untuk membuat sebuah dokumen secara dinamis dan dapat dilihat melalui web browser ataupun dikirim melalui email (Whitington, 2011:117).
