6

BAB II

PENDAHULUAN

2.1. Konsep Dasar Web

Pembuatan Tugas Akhir ini tidak terlepas dari teori-teori yang mendukung

dalam mempelajari serta merancang website sistem informasi akademik yang

diharapkan berfungsi secara maksimal. Kemudahan dalam melihat suatu website bagi

setiap pengunjung akan sangat membantu dalam menyelesaikan setiap pencarian

katalog serta transaksi penjualan secara langsung.

2.1.1 Website

Menurut Arief (2011a:7) “Website adalah salah satu aplikasi yang berisikan

dokumen-dokumen multimedia (teks, gambar, animasi, video) didalamnya yang

menggunakan protokol HTTP (Hypertext Transfer Protocol) dan untuk

mengaksesnya menggunakan perangkat lunak yang disebut browser”.

a. Browser

Menurut Arief (2011b:8) “Browser adalah aplikasi yang mampu menjalankan

dokumen-dokumen web dengan cara diterjemahkan”. Prosesnya dilakukan oleh

komponen yang terdapat didalam aplikasi browser yang biasa disebut Web Engine.

Semua dokumen web ditampilkan oleh browser dengan cara diterjemahkan. Beberapa

jenis browser yang populer saat ini diantaranya adalah Internet Explorer yang

diproduksi oleh Microsoft, Mozilla Firefox, Opera, dan Safari yang diproduksi oleh

Apple.

7

b. WWW (World Wide Web)

Menurut Shelly dan Velmaart (2011: 80), “World Wide Web (WWW) atau

web, terdiri dari kumpulan dokumen elektronik di seluruh dunia. Setiap dokumen

elektronik di web disebut webpage, yang dapat berisi teks, grafik, animasi, audio dan

video”.

c. Situs Web (Websites)

Arief (2011d:7) menjelaskan “situs web adalah dokumen-dokumen web yang

terkumpul menjadi satu kesatuan yang memiliki Unified Resource Locator (URL) dan

biasanya di-publish di internet intranet”.

d. Halaman Web (Web Pages)

Menurut Farisi (2011:3), “halaman web bagian dari situs web, apabila situs

web diumpamakan merupakan seperti sebuah buku, maka halaman web merupakan

lembaran-lembaran kertas penyusun buku tersebut”.

e. Hypertext Transfer Protocol (HTTP)

Menurut Agus (2013:2), “HTTP adalah sebuah protocol server yang

digunakan oleh client/user untuk mengakses alamat suatu situs (website)

menggunakan aplikasi web browser ”.

2.1.2. Sistem Informasi Akademik

a. Sistem

Menurut Sutabri (2012:2) terdapat dua kelompok pendekatan di dalam

pendefinisian sistem, yaitu kelompok yang menekankan pada prosedur dan kelompok

yang menekankan pada elemen atau komponennya. Pendekatan yang menekankan

pada prosedur mendefinisikan sistem sebagai suatu jaringan kerja prosedur-

8

prosedur yang saling berhubungan, berkumpul bersama-sama untuk melakukan

suatu kegiatan atau untuk menyelesaikan suatu sasaran tertentu. Sedangkan

pendekatan sistem yang lebih menekankan pada elemen atau komponen

mendefinisikan sistem sebagai kumpulan elemen yang berinteraksi untuk mencapai

suatu tujuan tertentu. Kedua kelompok definisi ini adalah benar dan tidak

bertentangan. Yang berbeda adalah cara pendekatannya.

b. Informasi

Menurut Sutabri (2012:22) Informasi adalah data yang telah

diklasifikasikan atau diolah atau diinterprestasikan untuk digunakan dalam proses

pengambilan keputusan. Sistem pengolahan informasi akan mengolah data menjadi

informasi atau mengolah data dari bentuk tak berguna menjadi berguna bagi yang

menerimanya. Nilai informasi berhubungan dengan keputusan. Bila tidak ada pilihan

atau keputusan maka informasi tidak diperlukan.

c. Sistem Informasi Akademik

Menurut Aditama (2012:53), “Sistem informasi akademik adalah suatu sistem

yang dibangun untuk mengelola data-data akademik sehingga memberikan kemudahan

kepada pengguna dalam kegiatan administrasi akademik sekolah secara online”.

2.1.3. Bahasa Pemprograman

a. Hyper Text Markup Language (HTML)

Menurut Sibero (2011:19), “HTML (Hyper Text Markup Language) adalah

bahasa yang digunakan pada dokumen web sebagai bahasa untuk pertukaran

dokumen web”.

9

b. Cascading Style Sheet (CSS)

Menurut Saputra dan Agustin (2011:6), “CSS atau yang memiliki kepanjangan

Cascading Style Sheet, merupakan suatu bahasa pemrograman web yang digunakan

untuk mengendalikan dan membangun berbagai komponen dalam web sehingga

tampilan web akan lebih rapi, terstruktur, dan seragam”.

c. Personal Home Page (PHP)

Menurut Prasetyo (2014:122), “PHP (Hypertext Prepocessor) adalah anak

script yang ditanam disisi server.” Seperti sebagian besar bahasa script lainnya, PHP

dapat ditanamkan langsung kedalam HTML. Kode PHP dipisahkan dari HTML

dengan menggunakan tanda start <?php dan end?>. Ketika sebuah dokumen dibaca,

prosesor PHP hanya menterjemahkan area yang ditandai saja dan menampilkan

hasilnya apda tempat yang sama.

d. JQuery

Menurut Sigit (2011:8) “JQuery adalah library atau kumpulan kode javascript

siap pakai”. Keunggulan menggunakan JQuery dibandingkan dengan javascript

standar yaitu, menyederhanakan kode javascript dengan cara memanggil fungsi yang

disediakan oleh JQuery. Javascript sendiri merupakan bahasa scripting yang bekerja

di sisi client/browser sehingga website bisa lebih interaktif.

e. MySQL

Menurut Saputra (2011:7) “MySQL merupakan salah satu database popular

dan mendunia, MySQL bekerja menggunakan SQL Language (Structure Query

10

Language). Itu dapat diartikan bahwa MySQL merupakan standar pengguna database

didunia untuk pengolahan data”.

f. Javascript

Menurut Setiawan (2014:2), “JavaScript adalah bahasa pemrograman yang

bersifat client side scripting yang eksekusinya berada di sisi client. Client disini

adalah browser, seperti Internet Explorer (IE), Mozilla Firefox, Google Crome,

Netscape, dan Opera”.

g. XAMPP

Menurut Aditya (2011:16) XAMPP adalah perangkat lunak bebas, yang

mendukung banyak sistem operasi, merupakan kompilasi dari beberapa program.

Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas

program Apache HTTP Server, MySQL Database, dan penerjemah bahasa yang

ditulis dengan bahasa pemrograman php.

h. Adobe Dreamweaver CS5

Menurut Madcoms (2011:2) memberikan batasan bahwa “dreamweaver

adalah sebuah HTML editor profesional untuk mendesain web secara visual dan

mengelola situs atau halaman web”. Saat ini terdapat software dari kelompok adobe

yang belakangan banyak digunakan untuk mendesain suatu situs web. Versi tetrbaru

dari Adobe Dreamweaver saat ini adalah Dreamweaver CS5, terdapat beberapa

kemampuan bukan hanya sebagai software unutk desain web saja tetapi juga unutk

menyunting kode serta pembuatan aplikasi web dengan menggunakan berbagai

11

bahasa pemograman web, antara lain: JPS, PHP, ASP dan ColdFusion.

Sumber: Adobe Dreamweaver CS5

Gambar II.1

Tampilan Adobe Dreamweaver CS5

2.1.4. Basis Data

1. Pengenalan Database

Database atau basis data adalah sekumpulan data yang memiliki hubungan

secara logika dan diatur dengan susunan tertentu serta adalah representasi dari semua

fakta yang ada pada dunia nyata. Definisi lebih rinci diberikan oleh Saputra (2011:1)

database merupakan kumpulan dari data yang saling berhubungan dan berkaitan

dengan subjek tertentu pada tujuan tertentu pula. Database merupakan salah satu

komponen yang penting dalam sistem informasi. Adapun struktur database adalah

database, file atau table, records, elemen data atau field.

12

2. PhpMyAdmin

Menurut Sibero (2011:376), “phpMyAdmin merupakan aplikasi web yang

digunakan untuk administrasi database MySQL. Sebelum menjalankan phpMyAdmin,

kita harus menjalankan software pendukungnya, seperti XAMPP”. Fitur administrasi

phpMyAdmin antara lain:

a. Pembuatan, mengubah, dan menghapus database.

b. Pembuatan, mengubah, dan menghapus tabel.

c. Menampilkan, menambahkan, mengubah, dan menghapus data.

d. Membuat dan menghapus view.

e. Menampilkan dan menghapus indeks kolom.

2.1.5. Model Pengembangan Sistem Perangkat Lunak

Model ini merupakan yang paling pertama dipublikasikan. Model ini berasal

dari proses sistem dari engineering yang lebih umum, model ini dikenal sebagai

waterfall model. Beberapa tahapan dalam waterfall model menurut Rosa dan

Shalahuddin (2013:28).

Sumber: Rosa dan Shalahuddin (2013:28)

Gambar II.2

Waterfall Model

13

Tahap utama model ini dibagi kedalam 4 bagian berdasarkan pengembangan

kegiatannya:

1. Requirements Definition: Layanan, batasan dan tujuan dari sistem ditetapkan

melalui konsultasi dengan penggunaan sistem. Semua itu didefinisikan secara

detail dan bertindak sebagai spefikasi sistem.

2. System and Software Design: Proses desain sistem membagi kebutuan menjadi

hardware dan software. Ini menetapkan hampir seluruh perancangan sistem.

Desain software melibatkan pengidentifikasian dan penggambaran mengenai

pemisahan dasar sistem software dan hubungannya.

3. Implementation and Unit Testing: Dalam tahap ini, desain software adalah

menyadari sebagai kumpulan program atau suatu program. Unit testing

melibatkan verifikasi bahwa setiap unit telah mencapai spesiikasinya.

4. Integration and Sistem Testing: Suatu program atau kumpulan program

diintegrasikan dan dites sebagai sistem yang telah selesai, untuk menjamin

bahwa kebutuhan software telah terpenuhi. Setelah pengetesan, sistem software

dikirimkan kepada pelanggan.

2.2. Teori Pendukung

2.2.1. Struktur Navigasi

Menurut Mahendra (2011:1), “Struktur navigasi adalah alur yang digunakan

dalam aplikasi yang dibuat. Sebelum menyusun aplikasi kedalam sebuah software,

kita harus menentukan terlebih dahulu alur apa yang akan digunakan dalam aplikasi

yang dibuat”. Ada empat macam sturuktur navigasi, yaitu :

14

1. Struktur Navigasi Linear

Struktur navigasi linear merupakan struktur yang mempunyai satu rangkaian

cerita berurutan. Struktur ini menampilkan satu demi satu tampilan layer secara

berurutan menurut aturannya.

Sumber Mahendra (2011:1)

Gambar II.3

Struktur Navigasi Linear

2. Struktur Navigasi Hirarki

Struktur navigasi hirarki sering disebut struktur navigasi bercabang, yaitu

merupakan suatu struktur yang mengandalkan percabangan untuk menampilkan

data atau gambar pada layer dengan kriteria tertentu. Tampilan pada menu utama

disebut master page (halaman utama satu), halaman tersebut mempunyai halaman

percabangan yang disebut slave page (halaman pendukung) dan jika dipilih akan

menjadi halaman kedua, begitu seterusnya.

Sumber Mahendra (2011:2)

Gambar II.4

Struktur Navigasi Hirarki

15

3. Struktur Navigasi Non Linear

Struktur navigasi non linear (tidak terurut) merupakan pengembangan dari

struktur navigasi linear, hanya saja pada struktur ini diperkenankan untuk

membuat percabangan. Percabangan pada struktur non linier berbeda dengan

percabangan pada struktur hirarki, pada struktur ini kedudukan semua page sama,

sehingga tidak dikenal adanya master atau slave page.

Sumber Mahendra (2011:2)

Gambar II.5

Struktur Navigasi Non Linear

4. Struktur Navigasi Campuran

Struktur navigasi campuran (composite) merupakan gabungan dari struktur

sebelumnya dan disebut juga struktur navigasi bebas, maksudnya adalah jika

suatu tampilan membutuhkan percabangan maka dibuat percabangan.

16

Sumber Mahendra (2011:3)

Gambar II.6

Struktur Navigasi Campuran

2.2.2. Entity Relationship Diagram (ERD)

Menurut Rosa dan Shalahudin (2013:50), ERD (Entity Relationship Diagram)

adalah dikembangkan berdasarkan teori himpunan dalam dalam bidang matematika.

ERD digunakan untuk pemodelan basis data relasional. Sehingga jika penyimpanan

basis data menggunakan OODBMS maka perancangan basis data tidak perlu

menggunakan ERD. Sementara seolah-olah teknik diagram atau alat peraga

memberikan dasar untuk desain database relasional yang mendasari sistem informasi

yang dikembangkan. ERD bersama-sama dengan detail pendukung merupakan model

data yang pada gilirannya digunakan sebagai spesifikasi untuk database.

Terdapat 3 komponen yang akan dibentuk yaitu:

1. Entitas

Pada post sebelumnya mengenai basis data telah dijelaskan sedikit tentang

pengertian entity (entitas) yaitu suatu objek yang dapat dibedakan dari lainnya

yang dapat diwujudkan dalam basis data.

Contoh: Mahasiswa, Kartu Anggota Perpustakaan (KAP), dan Buku.

17

2. Relasi

Relasi adalah hubungan antara dua jenis entitas dan dipresentasikan sebagai

garis lurus yang menghubungkan dua entitas.

Contoh: Mahasiswa mendaftar sebagai anggota perpustakaan (KAP),

relasinya adalah mendaftar.

3. Atribut

Atribut memberikan informasi lebih rinci tentang jenis entitas. Atribut

memiliki struktur internal berupa tipe data.

4. Derajat Relasi atau kardinalitas rasio

Menjelaskan jumlah maksimum hubungan antara satu entitas dengan entitas

lainnya. Beberapa relasi dalam ERD adalah :

1. One to One (1:1)

Setiap anggota entitas A hanya boleh berhubungan dengan satu anggota

entitas B, begitupun sebaliknya.

2. One to Many (1:M)

Setiap anggota entitas A dapat berhubungan lebih dari satu anggota

entitas B tetapi tidak sebaliknya.

3. Many to Many (M:M)

Setiap entitas A dapat berhubungan dengan banyak entitas himpunan

entitas B dan demikian pula sebaliknya.

18

2.2.3. Logical Relational Strucure (LRS)

Menurut Wulandari (2013) “Logical Record Structure dibentuk dengan nomor

tipe record. Beberapa tipe record digambarkan oleh kotak empat persegi panjang dan

dengan nama yang unik”.

Perbedaan LRS dengan ERD dan tipe record berada diluar field tipe record

ditempatkan. LRS terdiri dari link-link diantara tipe record. Link ini menunjukkan

arah dari satu tipe record lainnya.Banyak link dari LRS yang diberi tanda field-field

yang kelihatan pada kedua link type record. Penggambaran LRS mulai dengan

menggunakan model yang dimengerti. Dua metode yang dapat digunakan, dimulai

dengan hubungan kedua model yang dapat dikonversikan ke LRS. Metode yang lain

dimulai dengan Entity Relationship Diagram dan langsung dikonversikan ke LRS.

Berikut tahapan transformasi ERD ke LRS menurut Wulandari (2013):

1. Konversi ERD ke LRS, Entity Relationship Diagram harus diubah ke bentuk

LRS (struktur record secara logic). Dari bentuk LRS inilah yang nantinya dapat

ditransformasikan ke bentuk relasi tabel.

2. Konversi ERD ke LRS sebuah model sistem yang digambarkan dengan sebuah

model sistem yang digambarkan dengan sebuah ERD akan mengikuti pola

pemodelan tertentu. Dalam kaitannya dengan konversi ke LRS, untuk perubahan

yang terjadi adalah mengikuti aturan-aturan berikut:

a. Setiap entitas diubah kebentuk kotak dengan nama entitas, berada diluar

kotak dan atribut berada didalam kotak.

19

b. Sebuah relationship kadang disatukan, dalam sebuah kotak bersama

entitas,kadang sebuah kotak bersama-sama dengan entitas, kadang

disatukan dalam sebuah kotak tersendiri.

c. Konversi LRS ke relasi tabel atau tabel adalah bentuk pernyataan data

secara grafis dimensi,yang terdiri dari kolom dan baris. Relasi adalah

bentuk visual bentuk lingkaran Entity Relationship Diagram dikenal

dengan sebutan atribut. Konversi dari logical structure, dilakukan dengan

cara:

1) Nama logical record structure menjadi nama relasi.

2) Tiap atribut menjadi sebuah kolom didalam relasi.

2.2.4. Pengujian Web (Black Box Testing)

Menurut Rosa dan Shalahuddin (2013:275) “Black-box testing yaitu

perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan kode

program. Pengujian dimaksudkan untuk mengetahui apakah fungsi-fungsi masukan

dan keluaran dari perangkat lunak sesuai dengan spesifikasi yang dibutuhkan. Kasus

uji yang dibuat untuk melakukan pengujian kotak hitam harus dibuat dengan kasus

benar dan kasus salah.

Black Box Testing mencoba untuk menemukan kesalahan dalam kategori

berikut:

1. Fungsi tidak benar atau hilang.

2. Kesalahan interface atau antarmuka.

3. Kesalahan dalam struktur data atau akses database eksternal.

4. Kesalahan kinerja atau prilaku.

20

5. Kesalahan inisialisasi dan terminasi.

Tidak seperti White Box Testing yang dilakukan pada awal proses pengujian,

Black Box Testing cenderung diterapkan pada tahap selanjutnya dari pengujian.

Karena Black Box Testing sengaja mengabaikan struktur control perhatian difokuskan

pada domain informasi.