BAB II LANDASAN TEORI

BAB II

LANDASAN TEORI

2.1 Sistem

Berikut ini adalah beberapa teori mengenai sistem menurut para ahli, diantaranya adalah:

1. Menurut Tata Sutabri (2012:6), suatu sistem pada dasarnya adalah sekelompok unsur yang erat hubungannya satu dengan yang lain, yang berfungsi bersama-sama untuk mencapai tujuan tertentu.

2. Menurut Norman L. Enger dalam bukunya Tata Sutabri (2012:7), Sistem dapat terdiri atas kegiatan-kegiatan yang berhubungan guna mencapai tujuan-tujuan perusahaan.

3. Menurut Prof. Dr. M. S. Prajudi Atmosudirjo dalam bukunya Tata Sutabri (2012:7), Suatu sistem terdiri atas objek-objek atau unsur-unsur atau komponen-komponen yang berkaitan dan berhubungan satu sama lainnya sedemikian rupa sehingga unsur-unsur tersebut merupakan suatu kesatuan pemrosesan atau pengolahan yang tertentu.

2.2 Sistem Informasi

Berikut ini adalah beberapa teori mengenai sistem informasi menurut para ahli, diantaranya adalah:

1. Menurut Tata Sutabri (2012:38), sistem informasi adalah suatu sistem di dalam suatu organisasi yang mempertemukan kebutuhan pengolahan transaksi harian yang mendukung fungsi operasi organisasi yang bersifat manajerial dengan kegiatan strategi dari suatu organisasi untuk dapat menyediakan laporan-laporan yang diperlukan oleh pihak luar tertentu.

2. Menurut Rudy Tantra (2012:2), sistem informasi adalah cara yang terorganisir untuk mengumpulkan, memasukan, memproses data dan menyimpannya, mengelola dan mengontrol serta melaporkannya sehingga dapat mendukung sebuah perusahaan atau organisasi untuk mencapai tujuan.

2.3 Aplikasi Perangkat Lunak

Aplikasi perangkat lunak adalah program yang berdiri sendiri yang menyelesaikan keperluan bisnis tertentu. Aplikasi dalam daerah ini memproses bisnis atau data teknis dengan cara tertentu sehingga memfasilitasi operasi bisnis atau pengambilan keputusan manajemen / teknis. (Pressman and Maxim, 2015:7).

Perangkat lunak dapat didefinisikan sebagai berikut (Pressman and Maxim, 2015:4): 1. Petunjuk (program komputer) yang ketika dijalankan menyediakan fitur, fungsi

dan kinerja yang diinginkan.

2. Struktur data yang memungkinkan program untuk memanipulasi informasi secara memadai.

3. Informasi deskriptif baik hard copy dan virtual forms yang menggambarkan operasi dan penggunaan program.

2.4 Siklus Hidup Pengembangan Sistem

Menurut Alan Dennis (2015:1) siklus hidup pengembangan sistem adalah proses memahami bagaimana suatu sistem informasi dapat mendukung kebutuhan bisnis dengan merancang sistem, membangunnya dan memberikannya kepada user.

2.4.1 Metode Prototyping

Menurut Alan Dennis (2015:9) metode prototyping adalah metodologi berbasis prototipe dimana fase analisis, desain, dan implementasi dilakukan bersamaan, dan semua fase tersebut dilakukan berulang-ulang dalam sebuah siklus sampai sistem selesai. Dengan metodologi ini, dasar-dasar analisis dan desain dilakukan, setelah itu langsung memulai mengerjakan sistem prototipe, yaitu sebuah program dengan fitur yang minimal. Prototipe pertama biasanya adalah bagian pertama dari sebuah sistem yang digunakan. Prototipe ini ditampilkan kepada user dan sponsor proyek, yang kemudian akan memberikan komentarnya. Komentar ini digunakan untuk menganalisa, mendesain, dan mengimplementasikan ulang sebuah prototipe kedua yang memberikan beberapa fitur tambahan. Proses ini berlanjut dalam sebuah siklus sampai analis, user, dan sponsor setuju bawah prototipe tersebut memberikan fungsionalitas yang cukup untuk diterapkan dan digunakan di organisasi. Setelah prototipe (sekarang disebut “sistem”) diterapkan, perbaikan dilakukan sampai sistem ini diterima sebagai sistem yang baru.

Gambar 2.1 Metode Prototyping (Dennis et al, 2015:10) Berikut ini adalah langkah-langkah dalam metode prototyping:

1. Perencanaan (Planning)

Fase perencanaan adalah proses dasar memahami mengapa sistem informasi harus dibangun dan menentukan bagaimana tim proyek akan membangunnya. Pada tahap ini ditentukan secara detil rencana kerja yang harus dikerjakan, sumber daya manusia, perangkat lunak, dokumentasi, perangkat keras, dan finansial.

2. Analisa (Analysis)

Fase analisa menjawab pertanyaan siapa yang akan menggunakan sistem, apa yang sistem akan lakukan, dan kapan dan dimana sistem akan digunakan. Selama fase ini, tim proyek menginvesitigasi sistem saat ini, identifikasi peluang untuk perbaikan, dan mengembangkan sebuah konsep untuk sistem baru.

3. Perancangan (Design)

Fase perancangan menentukan bagaimana sistem akan beroperasi, dari segi hardware, software, dan infrastruktur jaringan; antarmuka pengguna, form, dan laporan; dan sepsifik program, basis data, dan file yang akan dibutuhkan. Walaupun sebagian besar dari keputusan strategis tentang sistem tersebut dibuat saat pengembangan konsep sistem selama fase analisa, langkah-langkah saat fase perancangan menggambarkan dengan tepat bagaimana sistem akan beroperasi. 4. Implementasi (Implementation)

Fase Terakhir dalam siklus hidup pengembangan sistem adalah fase implementasi, dimana sistem sebenarnya dibangun. Fase ini biasanya paling dapat mendapat perhatian, karena untuk kebanyakan sistem fase ini adalah bagian

yang paling lama dan paling mahal dari suatu proses pengembangan. Pengujian adalah salah satu bagian paling kritis dalam implementasi. Kebanyakan organisasi memberikan waktu dan perhatian lebih untuk pengujian dibanding menulis program (koding).

2.5 Unified Modeling Language (UML)

UML (Unified Modeling Language) merupakan kosakata umum yang berorientasi objek dan teknik diagram yang cukup untuk memodelkan proyek pengembangan sistem apapun dari analisa sampai implementasi (Dennis et al, 2015:34). UML versi 2.5 menyediakan 15 diagram untuk memodelkan sebuah sistem, yaitu:

1. Class Diagram : Mengilustrasikan hubungan antara model kelas dalam sistem. 2. Object Diagram : Mnegilustrasikan hubungan antara model objek dalam sistem. 3. Package Diagram : Mengelompokkan elemen UML lainnya untuk membentuk

konsep yang lebih tinggi.

4. Deployment Diagram : Menunjukan arsitektur fisik dari sistem. Dapat juga digunakan untuk menunjukan komponen perangkat lunak yang sedang diluncurkan ke arsitektur fisik.

5. Component Diagram : Mengilustrasikan hubungan fisik antara komponen perangkat lunak.

6. Composite Structure Design Diagram : Mengilustrasikan struktur internal dari sebuah kelas.

7. Profile Diagram : Digunakan untuk mengembangkan perluasan dari UML itu sendiri.

8. Activity Diagram : Mengilustrasikan alur kerja dari kelas-kelas, alur dari aktivitas dalam sebuah use case, atau metode desain secara rinci.

9. Sequence Diagram : Model dari perilaku objek dalam use case. Fokus pada aktivitas yang diurutkan berdasarkan waktu.

10. Communication Diagram : Model dari perilaku objek dalam use case. Fokus pada komunikasi antara satu set objek yang berkolaborasi dalam sebuah activity. 11. Interaction Overview Diagram : Mengilustrasikan tinjatuan dari alur proses. 12. Timing Diagram : Mengilustrasikan interaksi antara sebuah set objek dan

perubahan seiring berjalannya waktu.

13. Behavioral Sstate Machine Diagram : Menguji perilaku dari satu kelas.

14. Protocol State Machine Diagram : Mengilustrasikan ketergantungan antara perbedaan interfaces dari sebuah kelas.

Tabel 2.1 Notasi Use Case Diagram (Dennis et al, 2015:122)

15. Use Case Diagram : Menggambarkan kebutuhan bisnis untuk sistem dan mengilustrasikan interaksi antara sistem dan lingkungannya.

2.5.1 Use Case Diagram

Use case adalah gambaran tingkat tinggi dari proses bisnis dalam sistem informasi bisnis. Dari segi praktis, use case mewakili seluruh dasar dari sistem yang berorientasi objek. Use case bisa mendokumentasikan sistem saat ini atau sistem yang sedang dikembangkan. Sistem yang berorientasi objek mengacu pada use case, use case juga membentuk dasar untuk pengujian dan desain antarmuka. (Dennis et al, 2015:120).

Istilah dan Definisi Simbol

Actor :

 Seseorang atau sistem yang memperoleh manfaat dan diluar dari subjek.

 Digambarkan sebagai stick figure atau jika aktor yang bukan manusia terlibat, digambarkan dengan kotak dengan <<actor>> didalamnya.

 Dilabeli dengan perannya.

 Dapat dikatikan dengan aktor-aktor lain menggunakan asosiasi spesialisasi / asosiasi superclass, dilambangkan dengan panah dengan kepala berongga.

 Ditempatkan diluar subjek.

Use Case :

 Merepresentasikan fungsionalitas sitem yang utama.  Dapat mengekstensi use case lainnya.

 Dapat berisi use case lainnya.  Ditempatkan di dalam batas sistem.  Dilabeli dengan kata kerja yang deskriptif.

Subject :

 Berisi nama subjek didalam atau diatas.

 Menggambarkan jangkauan dari subjek, seperti sebuah sistem atau proses bisnis individu.

Tabel 2.1 (Lanjutan) Notasi Use Case Diagram (Dennis et al, 2015:122)

Gambar 2.2 Contoh Use Case Diagram (Dennis et al, 2015:123)

Istilah dan Definisi Simbol

Association :

 Menghubungkan seorang aktor dengan use case yang berinteraksi dengannya.

Include :

 Menggambarkan penyertaan dari fungsionalitas sebuah use case didalam use case lainnya.

 Mempunyai sebuah anak penah yang digambar dari use case awal ke use case yang digunakan. Extend :

 Menggambarkan ekstensi dari use case untuk menyertakan perilaku yang opsional.  Mempunyai sebuah anak panah dari

use case ekstensi ke use case awal. Generalization :

 Menggambarkan spesial use case ke use case yang lebih umum.

 Mempunyai sebuah anak panah yang digambar dari use case spesial ke use case awal.

Tabel 2.2 Notasi Activity Diagram (Dennis et al, 2015:132) 2.5.2 Activity Diagram

Activity diagram digunakan untuk menggambarkan perilaku dari sebuah proses bisnis. Activity diagram dapat digunakan untuk menggambarkan segalanya dari alur kerja bisnis tinggi yang melibatkan banyak use case berbeda, untuk merincikan use case individu, sampai rincian spesifik dari metode individual. Singkatnya, activity diagram dapat digunakan untuk menggambarkan proses apapun. (Dennis et al, 2015:130).

Istilah dan Definisi Simbol

Action :

 Menggambarkan sebuah perilaku.  Dilabeli dengan nama perilakunya.

Activity :

 Merepresentasikan satu set aksi.  Dilabel dengan nama aksinya.

Object Node :

 Merepresentasikan objek yang terhubung dengan satu set alur objek.

 Dilabel dengan nama kelasnya Control Flow :

 Menunjukan urutan pelaksanaan. Object Flow :

 Menunjukan alur sebuah objek dari satu activity (atau action) ke activity (atau action) lainnya. Initial Node :

 Menggambarkan awal mula dari satu set action atau activity

Final-Activity Node :

 Digunakan untuk mengakhiri semua alur kontrol dan alur objek dalam sebuah activity (atau action) Final-Flow Node :

 Digunakan untuk mengakhiri alur kontrol atau alur objek tertentu

Tabel 2.2 (Lanjutan) Notasi Activity Diagram (Dennis et al, 2015:132)

Gambar 2.3 Contoh Activity Diagram (Dennis et al, 2015:134)

Istilah dan Definisi Simbol

Decision Node :

 Digunakan untuk merepresentasikan kondisi tertentu dari alur kontrol atau alur objek.

 Dilabeli dengan kriteria keputusan untuk melanjutkan ke alur berikutnya.

Merge Node :

 Untuk mengembalikan alur keputusan yang berbeda yang dibuat dari decision node.

Fork Node :

 Digunakan untuk memisahkan perilaku activity (atau action) menjadi sebuah alur yang paralel atau berbarengan.

Joind Node :

 Digunakan untuk mengembalikan alur activity (atau action) yang paralel atau berbarengan.

Swimline :

 Digunakan untuk memecah sebuah activity diagram menjadi kolom dan baris.

Tabel 2.3 Notasi Sequence Diagram (Dennis et al, 2015:206) 2.5.3 Sequence Diagram

Suquence diagram menggambarkan objek yang berpartisipasi dalam sebuah use case dan pesan-pesan yang melewati mereka dari waktu ke waktu untuk satu use case. Sebuah sequence diagram adalah model dinamis yang menggambarkan secara eksplisit urutan dari pesan-pesan yang lewat antara objek dalam interaksi yang terdefinisi. Karena sequence diagram menekankan aktivitas dalam sebuah set objek, mereka sangat berguna untuk memahami kebutuhan secara real-time dan use case yang kompleks. (Dennis et al, 2015:204).

Istilah dan Definisi Simbol

Actor :

 Seseorang atau sistem yang mendapatkan manfaat dari sistem.

 Berpartisiasi dalam sebuah suquence dengan mengirim atau menerima pesan.

 Ditempatkan di bagian atas diagram.

 Digambarkan dengan sebuah stick figure atau kotak dengan <<actor>>

Object :

 Berpartisipasi di sequence dengan mengirim atau menerima pesan.

 Ditempatkan di bagian atas diagram. Lifeline :

 Menandakan peran objek selama sequence.

 Memiliki tanda X dimana kelas tersebut berhenti berperan.

Execution Occurrence :

 Persegi panjang tipis ditempatkan diatas lifeline.  Menggambarkan ketika objek mengirim dan

Tabel 2.3 (Lanjutan) Notasi Sequence Diagram (Dennis et al, 2015:206)

Gambar 2.4 Contoh Sequence Diagram (Dennis et al, 2015:208)

Istilah dan Definisi Simbol

Message :

 Membawa informasi dari satu objek ke objek lain.  Dilabeli dengan panah tebal ketika mengirim pesan,

dan panah putus-putus ketika menerima pesan. Guard Condition :

 Menggambarkan sebuah kondisi yang harus dipenuhi sebelum pesan tersebut dapat dikirim. Object Destruction :

 Ditempkan di akhir garis objek, untuk menandakan perannya berakhir

Frame :

 Mengindikasikan konteks sebuah sequence diagram.

Berikut adalah contoh sequence diagram:

2.5.4 Class Diagram

Class diagram adalah model statis yang menunjukan hubungan antar kelas dalam sistem yang konstan dari waktu ke waktu. Class diagram menggambarkan kelas meliputi perilaku dan statusnya sekaligus hubungan antar kelasnya. (Dennis et al, 2015:176).

Tabel 2.4 Notasi Class Diagram (Dennis et al, 2015:178)

Istilah dan Definisi Simbol

Class :

 Merepresentasikan orang, tempat, atau benda yang dimana sistem menyimpan informasinya.  Nama huruf tebal dan rata tengah.

 Ditengah merupakan daftar atribut.  Dibawah merupakan daftar operasinya.

 Tidak menampilkan operasi yang ada di semua kelas.

Attribute :

 Menggambarkan properti dan menjelaskan status dari sebuah objek.

 Bisa berasal dari atribut, ditunjukan dengan garis miring.

Operation :

 Merepresentasikan aksi atau fungsi yang bisa dikerjakan kelas.

 Bisa berupa konstruktor, query, atau update.  Menyertakan kurung yang bisa berisi parameter.

Association :

 Merepresentasikan hubungan antara kelas.  Dilabel dengan kata kerja.

 Dapat berada di satu atau lebih kelas.

 Berisi simbol yang menunjukan nilai minimum dan maksimum kelas itu dapat dihubungkan. Generalization :

 Menggambarkan hubungan dari banyak kelas. Aggregation :

 Menggambarkan hubungan logikal dari banyak kelas atau kelas itu sendiri.

Composition :

 Menggambarkan hubungan fisik dari banyak kelas atau kelas itu sendiri.

Gambar 2.5 Contoh Class Diagram (Dennis et al, 2015:177) Berikut adalah contoh class diagram:

2.6 Pemesanan dan Monitoring

Pemesanan menurut Nickerson (2001) adalah proses permintaan produk atau jasa yang dilakukan oleh pelanggan atau customer (lihat Hidayatullah dkk, 2016:18). Sedangkan menurut Kotler (1998), pemesanan barang dan jasa adalah suatu kegiatan transaksi yang menyatakan keinginan atau rencana untuk memiliki atau membeli barang dan jasa tersebut sebelum melakukan transaksi finansial yakni berupa pembayaran finansial terhadap produk atau jasa yang diinginkan (lihat Puspita dkk, 2014:1).

Menurut Harry (2010), monitoring adalah proses pengumpulan dan analisis informasi berdasarkan indikator yang ditetapkan secara sistematis dan kontinu tentang kegiatan / program sehingga dapat dilakukan tindakan koreksi untuk penyermpurnaan program / kegiatan itu selanjutnya (lihat Mardiani, 2013:36). Menurut Ohara (2012), sistem monitoring merupakan suatu proses untuk mengumpulkan data dari berbagai sumber daya. Biasanya data dikumpulkan merupakan data yang realtime (lihat Jumri, 2013:1). Adapun beberapa tujuan dari monitoring adalah (Mujahidin dan Putra, 2010:2):

1. Mengkaji apakah kegiatan-kegiatan yang dilaksanakan telah sesuai dengan rencana.

2. Mengidentifikasi masalah yang timbul agar langsung dapat diatasi.

3. Melakukan penilaian apakah pola kerja dan manajemen yang digunakan sudah tepat untuk mencapai tujuan.

4. Mengetahui kaitan antara kegiatan dengan tujuan untuk memperoleh ukuran kemajuan.

Secara garis besar tahapan dalam sebuah sistem monitoring terbagi ke dalam tiga proses besar seperti yang terlihat pada gambar berikut.

Gambar 2.6 Proses dalam sistem monitoring (Jumri, 2013:2)

Tampilan XAMPP

Proses-proses yang terjadi pada suatu sistem monitoring dimulai dari pengumpulan data seperti data dari network traffic, hardware information, dan lain-lain yang kemudian data tersebut dianalisis pada proses analisa data dan pada akhirnya data tersebut akan ditampilkan.

2.7 XAMPP

Menurut Er. Saurabh Walia (2014:26), XAMPP adalah singkatan dari Cross-Platform (X), Apache (A), MySQL (M), PHP (P) dan Perl (P). XAMPP adalah distribusi Apache ringan yang membuat para pengembang mudah membuat sebuah web server lokal untuk melakukan pengetesan. Semua yang dibutuhkan untuk membangun sebuah web server, yaitu aplikasi server (Apache), basis data (MySQL) dan bahasa scripting-nya (PHP) telah dimasukan dalam sebuah file yang bisa di ekstrak. XAMPP juga cross-platform, artinya ini juga bekerja di Linux, Mac dan Windows. Karena kebanyakan dari peluncuran web server menggunakan komponen yang sama dengan XAMPP, transis dari lokal server ke server aktif menjadi sangat mudah.

Pengumpula

Data Analisis Data Menampilkan Data

a service a service Network traffic, hardware information, etc. Selecting, filtering, updating. As a table, cruve, or image.

Pengembangan web menggunakan XAMPP sangat cocok untuk pemula karena XAMPP sangat ringan dan terdapat teknologi yang umum digunakan untuk mengembangkan web. Isinya, ukuran kecil, dan portabilitas membuat XAMPP menjadi alat yang ideal untuk pelajar dalam mengembangkan dan menguji aplikasi dengan PHP dan MySQL. Berikut ini adalah empat komponen utama dalam XAMPP:

1. Apache

Apache adalah server aplikasi web yang memproses dan memberikan konten web ke komputer. Apache merupakan web server paling popular, hampur 54% dari semua situs web memakai Apache.

2. MySQL

Setiap aplikasi web, sederhana atau rumit, memerlukan basis data untuk menyimpan data yang akan dikumpulkan. MySQL adalah sistem manajemen database yang paling popular didunia, dipakai dari situs hobi sampai situs profesional seperti WordPress.

3. PHP

Singkatan dari Hypertext Preprocessor, ini adalah bahasa server side scripting yang digunakan beberapa situs paling populer didunia, termasuk WordPress dan Facebook. Mudah untuk dipelajari, bersifat open source dan bekerja dengan baik dengan MySQL menjadikannya pilihan yang populer bagi para pengembang web. 4. Perl

Perl adalah bahasa pemrograman tingkat tinggi yang digunakan secara luas dalam pemrograman jaringan, sistem admin, dll.

2.7.1 PHP

Menurut Robin Nixon (2014:45) PHP adalah bahasa pemrograman yang digunakan untuk membuat server menghasilkan keluaran-keluaran secara dinamis dimana setiap browser membuka sebuah halaman hasilnya bisa berbeda tiap waktu. Dokumen PHP berakhir dengan ekstensi .php saat web server bertemu dengan ekstensi ini ketika melakukan request file, web server akan langsung mengenalinya sebagai proses PHP. Program PHP bertanggung jawab mengirim kembali file yang akan ditampilkan di web browser. Untuk memulai perintah PHP, dibuka dengan “<?php” dan di tutup dengan “?>”. Contoh:

<?php

Echo “Hello World!”; ?>

Bagian pembuka “<?php” memberitahukan kepada web server untuk mengijinkan program PHP menerjemahkan kode di dalamnya sampai tag penutup “?>”. Selain di dalam ini, semuanya di kirim ke klien sebagai sebuah HTML biasa. Jadi, semua yang ada di dalam konstruksi PHP hanyalah sebuah keluaran di browser dengan tag PHP di dalamnya.

2.7.2 Apache

Menurut Robin Nixon (2014:11) Apache merupakan sebuah web server yang bertugas untuk menghasilkan halaman web. Apache tidak hanya menangani file HTML, apache juga menangani berbagai file dari gambar, flash, mp3, RSS, dan lain-lain. Untuk melakukan hal ini, setiap elemen pada web klien akan melakukan request ke server, yang kemudian akan server mengirim balik hasilnya.

Apache juga mendukung sejumlah besar modul yang ada selain modul PHP, contohnya modul Rewrite, yang memungkinkan web server untuk menangani berbagai jenis URL dan menulis ulang mereka untuk keperluan interlanya, dan modul Proxy, yang dapat digunakan untuk melayani halaman yang sering diminta dari cache untuk memudahkan beban server.

2.7.3 MYSQL

Menurut Robin Nixon (2014:171) basis data adalah kumpulan terstruktur dari catatan atau data yang tersimpan dalam sistem komputer dan kelola dengan sedemikian rupa sehingga dapat dengan cepat dicari dan informasinya cepat didapatkan. SQL dalam MySQL adalah kepanjangan dari Structured Query Language. Bahasa ini berdasar pada bahasa inggris dan digunakan juga dalam basis data lainnya seperti Oracle dan Microsoft SQL Server. Bahasa ini digunakan untuk menulis perintah pada basis data.

Tabel 2.5 Contoh basis data sederhana (Nixon, 2014:172)

Setiap baris dalam tabel sama dengan sebuah baris dalam sebuah tabel MySQL dan setiap elemen di dalam sebuah baris sama dengan sebuah MySQL field. Istilah utama yang dalam penggunaan basis data MySQL adalah:

1. Database

Tempat keseluruhan untuk sebuah kumpulan data MySQL 2. Table

Tempat dalam database yang didalamnya berisikan data yang sebenarnya. 3. Row

Catatan tunggal dalam sebuah table, yang berisi beberapa field. 4. Column

Nama dari sebuah field dalam sebuah row. 2.8 JavaScript

Menurut Adi Chandra Setiawan (2015:2), JavaScript adalah bahasa pemrograman yang bersifat client side scripting yang eksekusinya berada pada sisi klien. Klien disini adalah sebuah browser, seperti Internet Explorer (IE), Mozilla FireFox, Google Chrome, Netscape, dna Opera. JavaScript menjadi modal utama dalam menunjang pembuatan aplikasi, ada beberapa teknik dimana PHP tidak dapat mengatasinya, dengan kata lain membutuhkan JavaScript, seperti pop-up, addrow validasi, dan sebagainya.

JavaScript pertama kali muncul di browser Netscape Navigator pada tahun 1995, bertepatan dengan penambahan dukungan untuk teknologi Java di browser. Karena kesan awal yang salah, JavaScript dikira adalah tiruan dari Java. Namun, hal itu hanyalah taktik untuk membuat bahasa baru ini populer. JavaScript memperoleh nama ketika elemen HTML dalam sebuah halaman web mendapatkan definisi yang lebih terstruktur yang dinamakan Document Object Model (DOM). DOM membuat HTML lebih mudah membuat paragraf baru atau fokus pada sebuah teks dan merubahnya.

Gambar 2.8 jQuery (Setiawan, 2015:140)

Gambar 2.9 Ajax (Setiawan, 2015:140) 2.8.1 jQuery

Menurut Adi Chandra Setiawan (2015:140), jQuery adalah library JavaScript yang dibuat untuk memudahkan pembuatan website dengan HTML yang berjalan di sisi klien. Script jQuery dibuat untuk memudahkan pengaturan dokumen seperti menyeleksi objek dengan elemen DOM dan membuat aplikasi dengan AJAX.

Berikut beberapa fitur yang ada di jQuery:

1. Dalam pemakaiannya menggunakan seleksi elemen DOM, sehingga website lebih dinamis dan interaktif.

2. jQuery bisa memanipulasi class pada CSS dan mendukung CSS 3. 3. Event.

4. AJAX.

5. Efek-fek dan animasi. 6. Ekstensi dan Plug-ins.

7. Kompabilitas dengan hampir semua browser moderen.

8. Keperluan lain seperti User Agent, Feature Detection, dan lainnya. 2.8.2 AJAX

Gambar 2.10 Twitter Bootstrap (Setiawan, 2015:139)

Menurut Adi Chandra Setiawan (2015:140), Ajax merupakan gabungan dari teknologi XHTML (eXtensible Hypertext Markup Language) yang merupakan pengembangan dari HTML, CSS (Cascading Style Sheets), XML (eXtensible Markup Language) yang memungkinkan untuk melakukan pertukaran data dan DOM (Document Object Model). JavaScript merupakan bahasa utama yang mementuk Ajax.

2.9 CSS

Dengan CSS (Cascading Style Sheets), sebuah halaman web dapat dirubah menjadi persis seperti apa yang diingankan. Hal ini bisa terjadi karena CSS terkoneksi dengan DOM. Dengan CSS sebuah elemen dalam halaman dapat dengan mudah diatur, seperti merubah “<h1>”,”<h2>” dan elemen lainnya (Nixon, 2014:423). Menggunakan CSS cukup simpel hanya dengan meletakan “<style>” dan “</style>” dalam sebuah halaman web, seperti: <style> P { Text-align:justify; Font-family:Helvetica; } </style>

CSS seperti diatas akan merubah rata teks pada pada tag “<p>” menjadikan paragraf di dalamnya akan menjadi rata kanan-kiri dan menggunakan font Helvetica.

Menurut Adi Chandra Setiawan (2015:139), Twitter Boootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendeseain halaman website. Sesuai dengan namanya Twitter Bootstrap, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat merubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Twitter Bootstrap dapat diunduh gratis di situs resminya yaitu http://getbootstrap.com . Saat ini Twitter Bootstrap telah mencapai versi 3 dan akan diperbaharui ke versi 4 yang saat ini masih dalam tahap pengembangan.

2.11 Sublime Text

Sublime Text adalah editor teks yang dirancang untuk mengolah potongan-potongan kode, plugin, dan markup. Tetapi Sublime Text juga dapat digunakan untuk menulis artikel dan mengetik dalam prosa normal. Sublime Text dapat digunakan untuk beberapa bahasa pemrograman termasuk PHP, Java, Python, dll. Keunggulan Sublime Text terletak pada kualitas dan kuantitas fitur-fiturnya seperti blok multitempat, kursor banyak, dan pengolahan split (Soelistio dkk, 2015:4).Sublime Text pertama kali dirilis pada tanggal 18 januari 2008, dan sekarang versi Sublime Text Editor sudah mencapai versi 3 yang dirilis pada tanggal 29 januari 2013. Menurut website http://pypl.github.io/ Sublime Text menempati peringkat 8 untuk kategori IDE (Integrated Development Environment) yang paling banyak digunakan.

Gambar 2.11 Tampilan Sublime Text 2.12 Pengujian Sistem

Menurut Rod Stephend (2015:184), pengujian sistem adalah menjalankan sistem secara keseluruhan. Idealnya, setiap bagian sistem diuji untuk menemukan bugs sebanyak mungkin. Pengujian sistem secara menyeluruh menguji setiap kemungkinan yang bisa terjadi dalam sistem tersebut.

2.12.1 Black Box Testing

Menurut Rod Stephend (2015:187), Black Box Testing merupakan tipe pengujian sistem dimana penguji seperti tidak bisa mengintip kedalam sistem tersebut. Penguji tahu apa yang seharusnya dilakukan oleh sistem, tapi tidak tahu cara kerjanya. Penguji kemudian memasukan berbagai macam input untuk melihat apa yang akan dilakukan sistem tersebut. Penguji dapat memulai dengan memasukan nilai secara acak, kemudian melihat bagamina sistem merespon masukan tersebu, apakah terjadi error, data duplikat, dan sebagainya.

2.12.2 White Box Testing

Menurut Rod Stephend (2015:188), White Box Testing merupakan tipe pengujian dimana penguji tahu bagaimana sebuah fungsi dalam sistem bekerja. Kemudian penguji menggunakan keahlianya untuk mendesain sebuah tes untuk membuat fungsi tersebut menjadi kacau. White Box Testing mempunyai kelebihan karena si penguji tahu bagaimana fungsi itu bekerja, penguji bisa mencoba untuk melakukan skenario tes yang

sulit. Kekurangannya adalah karena penguji tahu bagaimana sebuah fungsi bekerja, penguji bisa melewatkan beberapa skenario tes yang dianggap sudah bekerja.