BAB II LANDASAN TEORI

Transkripsi

1 BAB II LANDASAN TEORI 2.1 Web Aplikasi Web aplikasi-disebut "webapps," jaringan centric ini kategori perangkat lunak yang mencakup beragam aplikasi. Dalam bentuk yang paling sederhana, webapps bisa sedikit lebih dari satu set file hypertext terkait yang menyajikan informasi menggunakan teks dan grafis yang terbatas. Namun, seperti Web 2.0 muncul, webapps berkembang dalam lingkungan komputasi canggih yang tidak hanya menyediakan fitur yang berdiri sendiri, fungsi komputasi, dan konten untuk pengguna akhir, tetapi juga terintegrasi dengan database perusahaan dan aplikasi bisnis Pressman, R.S. (2010). 2.2 Rekayasa Perangkat Lunak Perangkat lunak atau sering disebut software adalah sebuah instruksi yang apabila dijalankan menghasilkan fungsi dan hasil yang diinginkan. Perangkat lunak juga berarti struktur data yang dapat memanipulasi informasi Pressman, R.S. (2010). Deskripsi informasi dari ke dua poin ini menjelaskan operasi dan penggunaan dari perangkat lunak. Perangkat lunak lebih mengacu kepada logical dari pada physical system element. Oleh karena itu, perangkat lunak mempunyai karakteristik yang membedakan dengan perangkat keras yaitu: a) Perangkat lunak dikembangkan atau direkayasa bukan diciptakan. b) Perangkat lunak tidak akan habis atau hilang. c) Meskipun industri bergerak ke arah komponen berbasis konstruksi tetapi sebagian besar perangkat lunak tetap dibangun atau dikembangkan Pengertian Software Development Life Cycle (SDLC) Setiap perangkat lunak memiliki siklus hidup pengembangan sistem (SDLC) yaitu suatu proses periode pembuatan dan perubahan sistem yang disertai dengan metodologi yang digunakan untuk mengembangkan sistem. Rekayasa perangkat lunak adalah suatu proses penelusuran, perencanaan, pemodelan, pengembangan yang dilaksanakan dan dikelola untuk membangun sebuah sistem 7

2 8 perangkat lunak. Setiap sistem perangkat lunak memiliki siklus hidup (life cycle) dimana periode dilakukan pengembangan perangkat lunak untuk menyelesaikan masalah baru yang timbul, umumnya pengembangan sistem memiliki 5 tahapan yaitu investigasi dan analisis, modeling, development, implementasi, dan pengelolaan. Dalam pengembangan suatu sistem, sulit diprediksi hal-hal apa saja yang akan terjadi saat pengembangan berlangsung. Keinginan pemilik produk (product owner) dapat berubah sewaktu-waktu. Gagal beradaptasi dengan perubahan menjadi salah satu penyebab kegagalan suatu proyek. Menurut Elvis C. Foster (2014) pada bukunya yang berjudul Software Engineering A Methodical Approach, siklus hidup pengembangan, sistem memiliki banyak variasi model. Seperti diantaranya: 1. Waterfall Model 2. Phased Prototype Model 3. Iterative Development Model 4. Rapid Prototype Model 5. Formal Transformation Model 6. Component-Based Model 7. Agile Development Model Menurutnya Terlepas dari model apa yang di gunakan, pada umumnya siklus hidup pengembangan sistem memiliki 5 tahapan yaitu : Gambar 2.1 lima tahapan utama SDLC Sumber: Elvis C. Foster (2014:9) Metode Pengembangan Waterfall Menurut Pressman (2015) Waterfall merupakan salah satu model klasik dalam perancangan piranti lunak. Penyusun memilih model waterfall, karena langkah langkahnya berurutan dan sistematis. Metode Waterfall disebut juga

3 9 dengan Classic Life Cycle. Metode ini membutuhkan pendekatan dalam pengembangan perangkat lunak dan mengumpulkan kebutuhan secara lengkap yang diantaranya, Communication, Planning, Modeling, Construction dan Deployment. a. Communication Langkah ini merupakan analisis terhadap kebutuhan software, dan tahap untuk mengadakan pengumpulan data dengan melakukan pertemuan dengan customer, maupun mengumpulkan data-data tambahan baik yang ada di jurnal, artikel, maupun dari internet. b. Planning Proses planning merupakan lanjutan dari proses communication (analysis requirement). Tahapan ini menghasilkan dokumen user requirement atau bisa dikatakan sebagai data yang berhubungan dengan keinginan user dalam pembuatan software, termasuk rencana yang akan dilakukan. c. Modeling Proses modeling ini akan menerjemahkan syarat kebutuhan ke sebuah perancangan software yang dapat diperkirakan sebelum dibuat coding. Proses ini berfokus pada rancangan struktur data, arsitektur software, representasi interface, dan detail (algoritma) prosedural. Tahapan ini akan menghasilkan dokumen yang disebut software requirement. d. Construction Construction merupakan proses membuat kode. Coding atau pengkodean merupakan penerjemahan desain dalam bahasa yang bisa dikenali oleh komputer. Programmer akan menerjemahkan transaksi yang diminta oleh user. Tahapan inilah yang merupakan tahapan secara nyata dalam mengerjakan suatu software, artinya penggunaan komputer akan dimaksimalkan dalam tahapan ini. Setelah pengkodean selesai maka akan dilakukan testing terhadap sistem yang telah dibuat tadi. Tujuan testing adalah menemukan kesalahan-kesalahan terhadap sistem tersebut untuk kemudian bisa diperbaiki.

4 10 e. Deployment Tahapan ini bisa dikatakan final dalam pembuatan sebuah software atau sistem. Setelah melakukan analisa, desain dan pengkodean maka sistem yang sudah jadi akan digunakan oleh user. Kemudian software yang telah dibuat harus dilakukan pemeliharaan secara berkala. Gambar 2. 2 Model Pengembangan Waterfall Sumber: Software Engineering, Pressman, R.S. (2015) Unified Modeling Language (UML) Unified Modeling Language (UML) adalah bahasa standar untuk menuliskan cetak biru (blueprints) perangkat lunak. UML dapat digunakan untuk memvisualisasikan, menentukan, membangun, dan mendokumentasikan artefak dari sistem perangkat lunak-intensif. Dengan kata lain, seperti arsitek bangunan yang membuat cetak biru (blueprints) yang akan digunakan oleh perusahaan konstruksi, arsitektur software membuat diagram UML untuk membantu pengembang dalam membangun perangkat lunak. Pressman, R.S. (2010) Use Case Diagram Sebuah use case menggambarkan bagaimana user berinteraksi dengan sistem dengan mendefinisikan langkah-langkah yang diperlukan untuk mencapai tujuan tertentu. Diagram use case adalah gambaran dari semua use case dan bagaimana use case berhubungan. Ini memberikan gambaran luas dari fungsi sistem. Pressman, R.S. (2010).

5 11 Gambar 2. 3 Contoh use case diagram Sumber: Software Engineering, Pressman, R.S. (2010). Pada diagram ini, gambar stick figure merepresentasikan sebuah aktor yang terkait dengan satu kategori pengguna (atau elemen interaksi lainnya). Biasanya sistem yang kompleks memiliki lebih dari satu aktor. Berikut adalah simbol-simbol yang digunakan pada use case diagram: Table 2. 1 Simbol use case diagram Sumber: Software Engineering, Pressman, R.S. (2010). No. Simbol Keterangan 1 Aktor Merupakan kesatuan eksternal yang berinteraksi dengan sistem. 2 Use Case Rangkaian/uraian sekelompok yang saling terkait dan membentuk sistem. 3 Generelation Menggambarkan hubungan khusus atau interaksi dalam objek.

6 Sequence Diagram sebuah sequence diagram digunakan untuk menunjukkan komunikasi yang dinamis antara objek selama pelaksanaan tugas, berbeda dengan diagram kelas, yang menunjukkan struktur statis dari komponen software. Pressman, R.S. (2010). Sebuah sequence diagram menunjukkan langkah-langkah yang terlibat dalam menyoroti sosok dalam sebuah gambar ketika telah diklik. Setiap kotak pada baris di bagian atas diagram biasanya berhubungan dengan suatu objek, meskipun ada kemungkinan untuk memiliki kotak model yang lain, seperti kelas. Di bawah setiap kotak ada garis putus-putus yang disebut lifeline dari objek. Sumbu vertikal dalam sequence diagram sesuai dengan waktu, dengan waktu semakin meningkat ke bawah. Sequence diagram menunjukkan pemanggilan metode menggunakan panah horizontal dari caller (pemanggil) ke callee, diberi label dengan nama metode dan parameter (opsional), type, dan return type. Pada saat objek mengeksekusi metode, kita (secara opsional) dapat menampilkan bar putih yang disebut activation bar secara menurun pada objek lifeline. Diagram sequence juga secara opsional menampilkan return dari method yang dipanggil dengan garis putusputus berpanah dan labelnya. Contoh gambar dibawah menampilkan kasus yang mudah dan tidak menunjukan ada kondisi lain atau pun loop. Jika kontrol struktur logical diperlukan, cara terbaiknya dengan menggambarkan diagram sequence yang berbeda untuk setiap kasusnya. Ini berarti, jika alur pesan dapat mengambil dua kondisi yang berbeda, kita menggambar dua gambar diagram sequence, masing-masing untuk setiap kemungkinan.

7 13 Gambar 2. 4 Contoh Sequence Diagram Sumber: Software Engineering, Pressman, R.S. (2010). Berikut adalah simbol-simbol yang digunakan pada sequence diagram: Table 2. 2 Simbol Sequence diagram Sumber: Software Engineering, Pressman, R.S. (2010). No. Simbol Nama 1 LifeLine Antarmuka yang saling berinteraksi. 3 Activation Menggambarkan hubungan antara object dengan message. 4 Message(call) 5 Message(return) Menggambarkan alur message yang merupakan kejadian objek pengirim lifeline ke objek penerima lifeline. Menggambarkan alur pengambilan message ke objek pemanggil dan tanda bahwa objek penerima telah menyelesaikan prosesnya.

8 Activity Diagram Menurut Verdi Yasin (2012), Activity Diagram adalah teknik untuk mendeskripsikan logika prosedural, proses bisnis dan aliran kerja dalam banyak kasus. Oleh karena itu activity diagram tidak menggambarkan behaviour internal sebuah sistem (dan interaksi antar subsistem) secara eksak, tetapi lebih menggambarkan proses-proses dan jalur-jalur aktivitas dari level atas secara umum. Menggambarkan proses bisnis dan urutan aktivitas dalam sebuah proses. Dipakai pada business modelling untuk memperlihatkan urutan aktifitas proses bisnis. Berikut adalah simbol-simbol yang digunakan pada Activity diagram: Table 2. 3 Simbol Activity diagram Sumber: Software Engineering, Pressman, R.S. (2010). No. Simbol Nama 1 Initial Node Menunjukkan titik awal kegiatan 2 Final Node Menunjukkan akhir kegiatan 3 State/Activities Mewakili tugas yang dilakukan oleh perangkat lunak sistem. 4 Fork (Pertaxiangan) Mewakili pemisahan aktivitas yang bersamaan menjadi 2 atau lebih 5 Join (Penggabungan) Simbol untuk menyinkronkan alur kontrol yang ada pada tingkatan yang sama. 6 Decision Simbol untuk alur kontrol bertaxiang yang dikarenakan adanya kondisi.

9 15 Berikut merupakan contoh gambar untuk aktifity diagram : Calss Diagram Gambar 2. 5 Contoh Activity Diagram Verdi Yasin,(2012) Sebuah class diagram menyediakanpandangan statis atau struktural dari sebuah sistem. Hal ini tidak menunjukkan sifat dinamis dari komunikasi antara objek dari kelas dalam diagram. Pressman, R.S. (2010). Berikut adalah simbolsimbol yang digunakan pada Class diagram: Table 2. 4 Simbol Class diagram Sumber: Software Engineering, Pressman, R.S. (2010). No. Simbol Nama 1. Class Class Ikon yang digunakan untuk mewakili kelas dan interface. Class terdiri dari: 1. Class Name 2. Attributes 3. Behaviours 2. Association Relasi antar class dengan makna umum 3. Generalization Relasi antar class dengan makna generalisasi-spesialisasi (umumkhusus) 4. Realization Menunjukkan implementasi antarmuka 5 Dependency Relasi anatar class dengan makna kebergantungan antar class

10 16 Unsur-unsur utama dari class diagram adalah kotak, yang merupakan ikon yang digunakan untuk mewakili kelas dan interface. Setiap kotak dibagi menjadi bagian-bagian horizontal. Bagian atas berisi nama kelas, bagian tengah berisi daftar atribut dari kelas, dan bagian bawah berisi fungsi operasi atau perilaku kelas. Operasi mengacu pada apa yang dapat dilakukan oleh objek kelas. Hal ini biasanya diimplementasikan sebagai metode kelas. Setiap atribut dapat memiliki nama, jenis, dan tingkat visibilitas. Jenis dan visibilitas adalah opsional. Jenis ini mengikuti nama dan dipisahkan dari nama dengan titik dua. Visibilitas ditunjukkan dengan - (private), # (protected), ~(package), atau + (public). Gambar 2. 6 Contoh Class diagram Sumber: Software Engineering, Pressman, R.S. (2010). Diagram kelas juga dapat menunjukkan hubungan antara kelas. Sebuah kelas yang merupakan subclass dari kelas lain terhubung dengan panah dengan garis yang solid dengan panah segitiga berongga. Arah panah menunjukan dari subclass ke superclass. Dalam UML, hubungan tersebut disebut generalisasi. Sebagai contoh, pada Gambar 2.9, kelas Thoroughbred dan QuarterHorse terbukti subclass dari kelas abstrak Horse. Panah dengan garis putus-putus untuk poros panah menunjukkan implementasi antarmuka. Dalam UML, hubungan tersebut disebut realisasi. Sebagai contoh, pada Gambar 2.9, mengimplementasikan kelas Horse atau menyadari antarmuka OwnedObject.

11 17 Gambar 2. 1 Contoh Class diagram Sumber: Software Engineering, Pressman, R.S. (2010). 2.3 Sistem Monitoring Sistem monitoring merupakan suatu proses untuk mengumpulkan data dari berbagai sumber daya dan biasanya data yang dikumpulkan merupakan data yang real time. Secara garis besar tahapan dalam sebuah sistem monitoring terbagi ke dalam tiga proses besar seperti yang terlihat pada gambar 2.3, yaitu proses di dalam pengumpulan data monitoring, proses di dalam analisis data monitoring dan proses di dalam menampilkan data hasil montoring. Gambar 2.7 Proses dalam sistem monitoring Aksi yang terjadi di antara proses-proses dalam sebuah sistem monitoring adalah berbentuk service, yaitu suatu proses yang terus-menerus berjalan pada interval waktu tertentu. Proses-proses yang terjadi pada suatu sistem monitoring dimulai dari pengumpulan data seperti data dari network traf ic, hardware information, dan lain-lain yang kemudian data tersebut dianalisis pada proses analisis data dan pada akhirnya data tersebut akan ditampilkan. Pada beberapa aplikasi sistem monitoring, akses benar-benar dibatasi dari local host terminal saja.

12 18 Pertanyaannya apakah bisa dilakukan monitoring dari jarak jauh, dimana semua data yang dikumpulkan dari terminal komputer yang 8 berada di lokasi berbeda dengan instrumennya misalnya dengan menggunakan jaringan Local Area Network ( LAN ) atau bahkan internet. Untuk menjalankan sistem monitoring yang seperti ini sangat memungkinkan sekali dapat dilakukan dengan menggunakan interface program yang dapat menjembatani pengguna melalui web browser pada remote terminal. Interface program ini disebut Common Gateway Interface (CGI) yang biasanya tersedia pada linux. 2.4 Website World Wide Web atau lebih sering dikenal sebagai web adalah suatu layanan sajian informasi yang menggunakan konsep hyperlink (tautan), yang memudahkan surfer (sebutan para pemakai komputer yang melakukan browsing atau penelusuran informasi malalui internet). Keistimewaan inilah yang telah menjadikan web sebagai service yang paling cepat pertumbuhannya. Web mengizinkan pemberian highlight (penyorotan/penggaris bawahan) pada kata-kata atau gambar dalam sebuah dokumen untuk menghubungkan atau menunjukan ke media lain seperti dokumen, frase, movie clip, atau file suara. web dapat menghubungkan dari sembarang tempat dalam sebuah dokumen atau gambar ke sembarang tempat di dokumen lain. Dengan sebuah browser yang memiliki Graphical User Interface (GUI), link-link dapat dihubungkan ke tujuannya dengan menunjuk link tersebut dengan mouse dan menekannya. Suatu situs web akan dikenal dengan cepat apabila informasi yang disajikan selalu upto-date dan lengkap. Disadari juga bahwa untuk melakukan up-to-date merupakan suatu permasalahan yang tidak mudah untuk dilakukan, selain membutuhkan waktu juga sangat merepotkan dalam melakukan penambahan atau pengubahan data yang akan disajikan. Jika sebuah situs tidak dirancang secara sistematis, maka akan terjadi kesulitan dan kerepotan dalam melakukan pemeliharaan, meng-update dan melengkapi data. PHP dan database merupakan solusi yang dapat digunakan dalam mengelola situs. Hanya dengan melakukan penambahan atau perubahan data kedalam database tanpa harus melakukan perubahan editing HTML

13 19 (HyperText Markup Language). Sebuah situs web bisa berupa hasil kerja perorangan atau individu, atau menunjukkan kepemilikan dari suatu organisasi, perusahaan. Biasanya pembahasan dalam sebuah situs web merujuk pada sebuah ataupun topik khusus, atau kepentingan tertentu. Sebuah situs web bisa berisi pranala yang menghubungkan ke situs web lain, demikian pula dengan situs web lainnya. Hal ini terkadang membuat perbedaan antara situs web yang dibuat oleh individu ataupun perseorangan dengan situs web yang dibuat oleh organisasi bisnis menjadi tidak begitu jelas. Situs web biasanya ditempatkan pada server web. Sebuah server web umumnya telah dilengkapi dengan perangkat-perangkat lunak khusus untuk menangani pengaturan nama ranah, serta menangani layanan atas protokol HTTP yang disebut sebagai HTTP Server seperti Apache HTTP Server, atau Internet Information Services (IIS). Keuntungan membuat web diantara lain adalah website dapat digunakan sebagai media promosi dati suatu produk baik itu barang ataupun jasa, media informasi, dan lain-lain. Ardhana ( 2012). 2.5 Pengertian HTML HTML (Hypertext Markup Language) adalah bahasa pemrograman dasar dari sebuah Web dan berperan sebagai tulang punggung dari semua halaman web. Di dalam HTML dapat menambahkan JavaScript dan PHP ke halaman web, tetapi untuk infrastruktur dalam pembuatan web adalah dengan menggunakan HTML. Matthews ( 2015). Meskipun HTML menyediakan infrastruktur penting pada halaman web, namun seiringnya waktu HTML mendapatkan tekanan untuk melakukan update dari beberapa browser dan perangkat, terutama perangkat mobile. Maka HTML mengeluarkan dengan penambahan fitur yang signifikan. Sama seperti sebuah software, HTML memiliki beberapa versi. Versi terakhir yang diperkenalkan adalah HTML5. HTML5 adalah revisi pertama standar utama untuk HTML dalam 15 tahun. Menggantikan kedua HTML 4.01 dan XHTML 1.1, serta banyak penambahan ad hoc dan revisi di penggunaan umum. Sejumlah tag baru dan atribut yang ditambahkan, seperti <audio>, <video>, <section>, dan <header>. Unsur-unsur lain telah didefinisikan ulang, dimodifikasi, atau usang (tidak lagi

14 20 secara resmi bagian dari bahasa dan penggunaan yang tidak disarankan). Di saat yang sama, HTML5 mendefinisikan sejumlah situasi pengolahan sehingga dapat ditangani seragam oleh browser diperbarui untuk HTML Pengertian XAMPP XAMPP merupakan bundel paket instan yang terdiri dari Apache (server), MySql (database) dan PHP. Paket instan ini banyak digunakan oleh para programmer web karena kemudahannya sehingga programmer tidak perluu mengonfigurasi dari awal melainkan tinggal pakai Utomo, (2013). Kata XAMPP merupakan singkatan dari : X : Berarti program ini dapat dijalankan di banyak sistem operasi, misalnya (Windows, Linux, Mac OS, dan solaris). A : Apache, merupakan aplikasi web server, dan bertugas untuk menghasilkan halaman web yang benar kepada user berdasarkan kode PHP yang dituliskan oleh pembuat halaman web. Jika diperlukan juga berdasarkan kode PHP yang dituliskan, maka dapat saja suatu database diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung halaman web yang dihasilkan. M : MySQL, merupakan aplikasi database server. Perkembangannya disebut sql yang merupakan kepanjangan dari Structured Query Language. Sql merupakan bahasa terstruktur yang digunakan untuk mengolah database. MySQL dapat digunakan untuk membuat dan mengelola database beserta isinya. Kita dapat memanfaatkan MySQL untuk menambahkan, mengubah, dan menghapus data yang berada dalam database. P : PHP, bahasa pemrograman web. Bahasa pemrograman PHP merupakan bahasa pemrograman untuk membuat web yang bersifat server-side scripting. PHP memungkinkan kita untuk membuat halaman web yang bersifat dinamis. Sistem manajemen basis data yang sering digunakan bersama PHP adalah MySQl. namun PHP juga mendukung system manajement database Oracle, Microsoft Access, Interbase, d-base, PostgreSQL, dan sebagainya. P : Perl, bahasa pemrograman.

15 MySQL MySQL (My Structure Query Language) adalah sistem manajemen database relasional yang menggunakan Query Terstruktur Language (SQL) untuk menyimpan, bekerja dengan, dan mengambil informasi melalui Internet. Matthews (2015). MySQL disebut "paling populer database open source di dunia," dengan jutaan website menggunakannya sebagai sumber daya web yang berjalan pada server web, seperti halnya PHP. Dan MySQL juga dapat dijalankan pada server yang berdiri sendiri tidak terhubung ke Web. MySQL dibangun untuk menangani volume besar, akses database multiuser. mysql.com mengatakan "Banyak organisasi yang tumbuh paling cepat terbesar dan dunia termasuk Facebook, Google, Alcatel Lucent, dan Zappos mengandalkan MySQL. "MySQL rendah atau tidak ada biaya, kemudahan penggunaan, kecepatan, kehandalan, dan kegunaan untuk kecil untuk situs besar membuatnya mudah untuk melihat mengapa ia memiliki digunakan secara luas PHP PHP atau memiliki kepanjangan PHP Hypertext Preprocessor, merupakan suatu bahasa pemrograman yang difungsikan untuk membangun suatu website dinamis. PHP menyatu dengan kode HTML, maksudnya adalah beda kondisi, HTML digunakan sebagai pembangun atau pondasi dari kerangka layout web, sedangkan PHP difungsikan sebagai prosesnya, sehingga dengan adanya PHP tersebut, sebuah web akan sangat mudah di-maintenance Saputra, (2012). PHP berjalan pada sisi server, sehingga PHP disebut juga sebagai bahasa Server Side Scripting, artinya bahwa dalam setiap/untuk menjalankan PHP, wajib membutuhkan web server dalam menjalankannya. PHP bersifat Open Source, dan mampu lintas Platform, yaitu dapat berjalan pada sistem operasi Windows maupun Linux. Contoh sintaxnya : <?PHP echo "Dengan PHP, website lebih dinamis";?>

16 22 Gambar 2. 8 Struktur Php Sumber: Sistem Informasi Nilai Akademik untuk Panduan Skripsi, Saputra (2012) 2.7 jquery jquery adalah Javacript Library kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javasrcipt. Secara standar, apabila kita membuat kode Javascript, maka akan di perlukan kode yang cukup panjang, bahkan terkadang sangat sulit dipahami, misalnya fungsi Javascript untuk membuat stripe (warna selang-seling pada baris suatu table adalah sebagai berikut: Gambar 2. 9 Tampilan Script Javascript Sumber: Proyek Website Super Wow!, Lukmanul Hakim (2013) Di sinilah peran jquery sebagai Javasrcipt Library, dimana kita bisa langsung memanggil fungsi yang terdapat didalam Library tersebut, menariknya kita hanya memerlukan satu/dua baris untuk membuat warna selang-seling pada suatu tabel, yaitu:

17 23 Gambar 2. 2 Tampilan Script jquery Sumber: Proyek Website Super Wow!, Lukmanul Hakim (2013) Kesimpulannya, jquery menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya Write less, do more cukup tulis sedikit, tapi bisa melakukan banyak hal [Hakim, 2013]. Gambar 2. 3 Tampilan Logo jquery Dan Slogannya Sumber: Proyek Website Super Wow!, Lukmanul Hakim (2013) Kemampuan yang dimiliki jquery, diantaranya: a. Mempermudah akses dan manipulasi elemen tertentu pada dokumen. Biasanya diperlukan baris program yang cukup panjang untuk mengakses suatu elemen dokumen. Namun, jquery dapat melakukannya hanya dalam beberapa baris program saja, karena jquery mempunyai Selector yang sangat efisien untuk mengakses suatu elemen tertentu pada dokumen yang selanjutnya bisa dimanipulasi sesuai dengan keinginan kita. b. Mempermudah modifikasi/perubahan tampilan web. Biasanya, untuk memodifikasi tampilan halaman web digunakan CSS. Permasalahannya, CSS sangat dipengaruhi oleh web browser yang digunakan, sehingga sering terjadi halaman web yang dibuat sudah rapi dan bagus tampilan di browser Mozilla, namun ketika ditampilkan di Opera menjadi berantakan. Namun, jquery dapat menyesuaikan style CSS pada suatu browser, sehingga permasalahan tersebut dapat dihindari. c. Mempersingkat Ajax (Asynchronous Javascript and XML). Kemampuan favorit dari Ajax adalah mampu mengambil informasi dari server tanpa melakukan refresh pada halaman web, artinya halaman web terlihat berganti secara otomatis. Apabila kita menuliskan kode Ajax secara manual, biasanya diperlukan baris yang cukup panjang, namun jquery dapat mempersingkatnya menggunakan Ajax call, perbandingannya 25 baris kode Ajax dapat dipersingkat menjadi 5 baris kode saja menggunakan jquery.

18 24 d. Memiliki API (Application Programming Interface). Dengan API, jquery dapat memanipulasi content pada suatu halaman web, seperti perubahan teks, manipulasi gambar (resize, rotate, crop), penyusunan daftar (list), pengurutan list, paging, dan lain-lain. e. Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat. f. Menyediakan fasilitas untuk membuat animasi sekelas flash dengan mudah. 2.8 CSS (Cascade Style Sheet) Cascade Style Sheet (CSS) merupakan salah satu bahasa pemrograman web yang bertujuan untuk membuat web menjadi lebih menarik dan terstruktur. Pada CSS bisa merubah warna tabel, besar font, atau tata letak menu yang terkendali dari CSS sehingga semua jendela web yang berkaitan dengan perubahan tersebut secara otomatis dapat berubah, dengan CSS tidak perlu membuat style pada setiap file PHP, karena cukup dengan satu file CSS telah dapat mengontrol semua style yang di inginkan pada setiap file PHP yang akan ditampilkan nanti di web browser. Aditama (2013). 2.9 Bootstrap Bootstap merupakan framework ataupun tools untuk memudahkan aplikasi web ataupun situs web responsive secara cepat, mudah dan gratis hal ini berdasarkan kutipan Alatas (2013). Bootsrap sendiri terdiri dari CSS dan HTML untuk menghasilkan grid, layout, typography, table, form, navigation dan lainlain. Di dalam bootsrap juga sudah terdapat jquery plugin untuk menghasilkan komponen UI yang cantik seperti transitions, modal, dropdown, scrollspy, tooltip, tab, popover, alert, button, carousel dan lain-lain. Dengan bantuan bootstrap kita dapat membuat responsive website dengan mudah dan dapat berjalan sempurna pada browser-browser populer seperti chrome, firefox, safari, dan opera serta internet explorer. Bootsrap sendiri diciptakan oleh dua orang programmer twitter, yaitu Mark Otto dan Jacob Thorton pada tahun Pada saat itu programmer twitter menggunakan berbagai macam

19 25 tool dan library yang di kenal dan suka untuk melaksanakan pekerjaan, sehingga tidak ada standarisasi dan akibatnya sulit untuk dikelola sehingga Mark Otto dan Jacob Thorton tergerak untuk menciptakan satu tool atau framework yang dapat digunakan bersama di lingkungan internal twitter. Oleh karena faktor historis tersebut, walaupun nama resminya hanyalah bootsrap namun terkenal di kalangan developer sebagai twitter bootsrap. Sejak diluncurkan pada agustus 2011, bootsrap telah berevolusi dari sebuah proyek yang hanya berbasis CSS, menjadi sebuah tool ataupun framework yang lebih lengkap yang juga berisikan javascript plugin,icon,forms dan button. Gambar 2. 4 Tampilan Hasil Bootstrap Responsive Fixed Layout Pada Ukuran Layar Smartphone Sumber: Responsive Web Design dengan PHP & Bootstap Husein Alatas (2013) 2.10 Editplus Editplus adalah aplikasi editor untuk kode dan teks yang dapat berjalan diberbagai platform operating system dengan menggunakan teknologi Phyton API. Terciptanya aplikasi ini terinspirasi dari aplikasi Vim, Aplikasi ini sangatlah fleksibel dan powerfull. Fungsionalitas dari aplikasi ini dapat dikembangkan dengan menggunakan sublime-packages. Editplus bukanlah aplikasi open source dan juga aplikasi yang dapat digunakan dan didapatkan secara gratis, akan tetapi beberapa fitur pengembangan fungsionalitas (packages) dari aplikasi ini merupakan hasil dari temuan dan mendapat dukungan penuh dari komunitas serta memiliki linsensi aplikasi gratis.

20 26 Editplus mendukung berbagai bahasa pemrograman dan mampu menyajikan fitur syntax highlight hampir di semua bahasa pemrogramman yang didukung ataupun dikembangkan oleh komunitas seperti; C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile and XML. Biasanya bagi bahasa pemrograman yang didukung ataupun belum terdukung secara default dapat lebih dimaksimalkan atau didukung dengan menggunakan add-ons yang bisa didownload sesuai kebutuhan user Metode Pengujian Black Box Metode Black Box merupakan strategi testing dimana hanya memperhatikan atau memfokuskan kepada faktor fungsional dan spesifikasi perangkat lunak. Berbeda dengan metode white box, black box testing tidak membutuhkan pengetahuan mengenai alur internal (internal path), struktur atau informasi dari SoftwareUnder Test (SUT). Pengujian black box berusaha menemukan kesalahan dalam kategori diantaranya: 1. Fungsi-fungsi yang salah atau hilang 2. Kesalahan interface 3. Kesalahan dalam infrastruktur 4. Kesalahan peforma 5. Kesalahan inisialisasi dan terminasi