8

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Website pada saat ini semakin berkembang. Para desainer website

semakin kreatif membuat desain website. Perkembangan tersebut searah dengan

permintaan serta ketertarikan pengguna internet. Hal tersebut karena pada

dasarnya desain website yang baik adalah desain yang mampu membuat

pengunjung web tertarik. ketika website digunakan sebagai ajang promosi, website

yang menarik berpeluang mengkonversi pengunjung website menjadi pelanggan.

A. Internet

1. Internet

Internet berasal dari kata “interconnection networking yang mempunyai

arti hubungan berbagia komputer dan berbagia tipe computer yang berbentuk

sistem jaringan yang mencakup seluruh dunia dengan melalui jalur

telekomunikasi seperti telepon, wireless bahkan satelit” menurut Juju (2008:2).

Disebut demikian karena “Internet merupakan jaringan computer diseluruh

penjuru dunia yang saling berhubungan dengan bantuan jalur komunikasi”.

2. Ecommerce

Perdagangan Elektronik (E-Commerce = “electronic commerce”) adalah

bagian dari “e-lifestyle” yang memungkinkan transaksi jual beli dilakukan secara

online dari sudut tempat mana pun (Hidayat, 2008:5).

Menurut Shera (2010:1) “E-Commerce atau biasa disebut internet

marketing adalah kegiatan yang dilakukan melalui media elektronik dengan tujuan

9

memperoleh keuntungan”.

3. Website

Website menurut Sadeli (2013:2) “Kumpulan halaman-halam yang

digunakan untuk mempublikasikan informasi berupa teks, gambar dan program

multimedia lainnya berupa animasi (gambar grak, tulisan gerak), suara atau

gabungan dari semuanya”.

Baik bersifat statis maupun dnamis yang membentuk satu rangkayan

bangunan yang saling terkait antara satu page dengan page yang lain yang sering

disebut sebagai hyperlink website biasanya terangkum dalam sebuah dominan atau

sub dominan yang tempatnya berada dalam word wide web (www) di internet

sebuah web page adalah dokumen yang ditulis dalam format HTML yang hamper

selalu bias diakses melalui HTTP, yaitu protocol yang bias menaympaikan

informasi dari server webset untuk ditampilkan kepada pada para pemakai melalu

web browser. Semua publikasi dari website-website tersebut dapat membentuk

sebuah jaringan informasi yang sangat besar.

Kategori Web menurut Sadeli (2013:8):

Web Statis : merupakan situs web yang memiliki isi tidak dimaksudkan untuk

diperbaharui secara berkala sehingga pengaturan ataupun pemutakhiran isi atas

situs web tersebut dilakukan secara manual ada tiga jenis perangkat utilitas yang

bias digunakan dalam pengaturan situs web statis:

a. Editor teks merupakan perangkat utilitas yang digunakan untuk menyunting

berkas halaman web, msalnya : Noteped atau Texedit.

b. Editor WYSIWYG, merupakan perangkat lunak utilitas penyunting halaman

web yang melengkapi dengan antar muka grafis dalam perancangan serta

10

pendesainnya, berkas halaman web umumnya tidak disunting secara langsung

oleh pengguna melainkan utilitas ini akan membuatnya secara otomatis

berbasis dari halaman kerja yang dibuat pengguna.

c. Editor berbasis template, beberapa utilitas tertentu seperti Ravidweaver dan

Web, pengguna dapat dengan mudah membuat sebuah situs web tanpa harus

mengetahui bahasa HTML, melainkan menyunting halaman web seperti

halnya halaman biasa, pengguna dapat memilih templat yang akan digunakan

oleh utilitas ini untuk menyunting berkas yang dibuat pengguna dan

menjadikannya halaman web secara otomatis.

Web Dinamis : merupakan sittus web yang secara spesifikasi di desain agar

isi yang terdapat dalam situs tersebut dapat diperbaharui secara berkala

dengan mudah. Tidak seperti halnya situs web statis, pengimplementasian

web dinamis umunya membutuhkan keberadaan infrastruktur yang yang lebih

kompleks dibandingkan dengan web statis. Untuk memungkinkan server web

menciptakan halamn web pada saat pengguna mengaksesnya, umunya pada

server web dilengkapi dengan mesin penerjemah bahasa skrip (PHP, ASP,

ColdFusion atau lainnya), serta perangkat linak system manajemen basis data

relasional seperti MySQL.

4. Aplikasi berbasis web

a. Web Browser

Web Browser menurut Sularsono (2011:69), “web browser merupakan

program atau aplikasi yang digunakan untuk menghubungkan

computer pengguna sehingga bias mengakses halaman web”.

b. Web Server

11

Web server menurut sadeli (2013:5), “web server adalah sebuah

perangkat lunak server yang berfungsi menerima perintah HTTP atau

HTTPS dari klien yang dikenal dengan web browser dan mengirimkan

kembali hasilnya dalam bentuk halaman-halaman web yang umunya

berbentuk dikumen HTML.

5. Kelebihan dan Kekuranga Aplikasi Berbasis Web

Kelebihan dan kekurangan aplikasi berbasis web menurut saleh (2007:49)

Kelebihan:

a. Jangkauannya Luas, bahkan tanpa batas, Taka da batasan wilayah,

batas Negara dengan segala aturan perjanjiannya.

b. Dapat mecakup bidang kerja yang luas, cerdas dan perhitungannya

selalu akurat.

c. Layannya cepat, transaksi antar Negara, atau antar benua sekalipun

dapat dilakukan dalam hitungan detik.

d. Dapat melayani banyak orang dalam waktu yang sama.

Kekurangan: Antarmuka yang dapat dibuat terbatas sesuai spesifikasi

standar untuk membuat dokumen web dan keterbatasan kemampuan web

browser untuk menampilkannya terbatasnya kecepatan internet mungkin

membuat respon aplikasi menjadi lambat.

B. Bahasa Pemrograman

1. Javascript

Menurut Prihartoni (2008:08)Javascript adalah suatu bahasa

Pemrograman web yang berbasis scripting, artinya kita dapat

menambahkan kode Javascript bersama dengan kode-kode HTML pada

12

dokumen web yang sama. Sebagai penanda, diperlukan suatu tag khusus

untuk membedakan antara kode Javascript dengan kode HTML. Dalam

konteks web Javascript adalah bahasa pemrograman yang berjalan khusus

untuk di browser atau halaman web agar halaman web menjadi lebih

hidup. Dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan

Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan

Script adalah serangkaian instruksi program. Secara fungsional, Javascript

digunakan untuk menyediakan akses script pada objek yang dibenamkan

(embedded). Contoh dari penggunaan Javascript adalah fungsi validasi

pada form sebelum data dikirimkan ke server, merubah image kursor

ketika melewati objek tertentu, dan lain lain.

2. Personal Home Page (PHP)

Menurut Suprianto (2008:17) ”PHP merupakan kependekan dari kata

Hypertext Preprocessor. PHP tergolong sebagai perangkat lunak open source

yang diatur dalam aturan general purpose lincences (GPL)”. Pemrograman PHP

sangat cocok dikembangkan dalam lingkungan web, karena PHP bisa diletakan

pada script HTML atau sebaliknya. PHP dikhususkan untuk pengembangan web

dinamis. Hal tersebut tergantung pada permintaan client browser-nya (bisa

menggunakan browser opera, Internet Explorer, Mozzila dan lain-lain). Pada

umumnya, pembuatan web dinamis berhubungan erat dengan database sebagai

sumber data yang akan ditampilkan.

Menurut Arief (2011:43) PHP adalah Bahasa server-side-scripting yang

menyatu dengan HTML untuk membuat halaman web yang dinamis. Karena PHP

merupakan server-side-scripting maka sintaks dan perintah-perintah PHP akan

13

diesksekusi diserver kemudian hasilnya akan dikirimkan ke browser dengan

format HTML.

3. HTML

Jubilee Entreprisse (2016:7) menjelaskan bahwa ”HTML merupakan

singkatan dari Hipertext Markup Language, disebut Hipertext karena didalam

script HTML bisa membuat sebuah text menjadi link yang dapat berpindah dari

satu halaman ke halaman lainnya hanya dengan meng-klik text atau link tersebut”.

HTML setidaknya memiliki struktur dasar yang terdiri dari.

a. Tag DTD atau DOCTYPE

Tag paling awal dari struktur dokumen HTML adalah DTD yang

berfungsi untuk memberitahu browser bahwa dokumen yang akan di

tampilkan adalah dokumen berjenis HTML.

b. Tag HTML

Tag ini merupakan Tag pembuka dan seluruh halaman web yang akan

dibuat, semua kode HTML yang membentuk desain sebuah halaman

website harus berada didalam tag <html>.

c. Tag HEAD

Bagian atau elemen yang ditulis pada Tag <head> umumnya

membentuk keterangan teknis, seperti definisi dan judul halaman,

kode-kode CSS, Javascript, deskripsi halaman, dan kode-kode lainnya

yang tidak terlihat sebagai salah satu daerah didalam sebuah halaman.

d. Tag <body>

14

Tag<body> dugunakan unutk meletakan semua elemen yang akan

terlihat didalam halaman website pada saat halaman itu diakses oleh

browser.

4. Adobe Dreamweaver CS6

Saat ini sudah banyak terdapat program aplikasi web editor yang

memudahkan orang untuk membuat website dengan cepat , mudah dan hasilnya

pun menjadi sangat menarik dan interaktif. Salah satu program aplikasi web editor

tersebut adalah Adobe Dreamweaver CS6.

Salah satu kekuatan Adobe Dreamweaver CS6 adalah kemampuannya

mendukung program script server side seperti Active Server Page (ASP),

ASP.NET, ColdFusion. Java Server Pages, dan PHP. Selain itu tentunya

mendukung pemrogrman client side yang sangat terkenal dan dipakai oleh banyak

orang, yaitu HTML dan Java Script.

Sumber : Madcoms (2013:3)

Gambar II.1

Tampilan pada Adobe Dreamweaver CS6

15

5. Cascading Style Sheet (CSS)

Menurut Kurniawan (2008:9) ”CSS atau Cascading Style Sheet adalah

dokumen yang berisi aturan yang digunakan untuk memisahkan isi dengan layout

dalam halaman-halaman web yang dibuat”. CSS memperkenalkan template yang

berupa style untuk dibuat dan mengijinkan penulisan kode yang lebih mudah dari

halaman-halaman web yang dirancang.

6. MYSQL

Menurut Sadeli (2013:10), “MySQL adalah database yang

menghubungkan script php menggunakan printer query dan escape character

yang sama dengan php. MySQL mempunyai tampilan client yang mempermudah

dalam mengakses database dengan kata sandi untuk mengijinkan proses yang bias

dilakukan”.

7. Xampp

xampp menurut Nugroho (2013:2), “Aphace adalah web server yang

dapat dijalankan di banyak sistem operasi yang berguna untuk melayani dan

memfungsikan situs web.

2.2. Teori Pendukung

A. Struktur Navigasi

Menurut Suyanto (2008:62) “Struktur navigasi dalam situs web melibatkan

sistem navigasi situs web secara keseluruhan dan desain interface situs web

tersebut, navigasi memudahkan jalan yang mudah ketika menjelajahi situs web”.

Struktur navigasi juga dapat diartikan sebagai struktur alur dari suatu program

yang merupakan rancangan hubungan dan rantai kerja dari beberapa area yang

16

berbeda dan dapat membantu mengorganisasikan seluruh elemen pembuatan

website. Ada empat macam bentuk dasar yaitu:

1. Struktur Navigasi Linier

Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang

berurut yang menampilkan satu demi satu tampilan layar secara berurut

menurut urutannya. Tampilan yang dapat ditampilkan pada struktur jenis

ini adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak

dapat dua halaman sebelumnya atau dua halaman sesudahnya, pengguna

akan melakukan navigasi secara berurutan, dalam “frame” atau “byte”

informasi satu ke yang lainnya.

Sumber : Binanto, (2010a:269)

Gambar II.2

Struktur Navigasi Linier

2. Struktur Navigasi Hierarki

Struktur dasar ini disebut juga struktur linier dengan percabangan karena

pengguna melakukan navigasi disepanjang cabang pohon struktur yang

terbentuk oleh logika isi.

Sumber : Binanto (2010b:269)

Gambar II.3

Struktur Navigasi Hierarki

17

3. Struktur Navigasi Non Linier

Struktur navigasi “non-linier” merupakan pengembangan dari struktur

navigasi linier. Pada struktur ini diperkenankan membuat navigasi

bercabang. Percabangan yang dibuat pada struktur non-linier ini berbeda

dengan percabangan pada struktur hirarki, karena pada percabangan non-

linear ini walaupun terdapat percabangan tetap tiap-tiap tampilan

mempunyai kedudukan yang sama yaitu tidak ada “Master Page” dan

“Slave Page”, pengguna akan melakukan navigasi dengan bebas melalui

isi proyek dengan tidak terikat dengan jalur yang sudah ditentukan

sebelumnya.

Sumber : Binanto (2010c:270)

Gambar II.4

Struktur Navigasi Non Linier

4. Struktur Navigasi Campuran

Struktur navigasi pengguna akan melakukan navigasi dengan bebas (secara

“non-linier”), tetapi terkadang dibatasi presentasi “linier” film atau

informasi penting dan pada data yang paling terorganisasi secara logis

pada suatu hirarki.

18

Sumber : Binanto (2010d:270)

Gambar II.5

Struktur Navigasi Campuran

B. ERD (Entity Relationship Diagram)

1. Definisi ERD (Entity Relationship Diagram )

Menurut saputra dan Agustin (2012:31), “Entity Relatonship Diagram

(ERD) adalah suatu model jaringan yang menggunakan susuna data yang

disimpan dalam sistemk secara abstrak. ERD meodel jaringan data yang

menekankan pada struktur-struktur dan relation data”.

Entitiy Relationship Diagram (ERD) merupakan gambaran data yang

dimodelkan dalam suatu diagram yang digunakan untuk untuk

mendokumentasikan data dengan cara menentukan apa saja yang terdapat dalam

tiap entity dan bagaimana hubungan antara entity satu dengan lainnya.

19

2. Komponen ERD (Entity Relationship Diagram)

a. Entity

Entity cukup kompleks untuk mendefiniskan sehingga tidak bisa dapat

didefiniskan yang memuaskan dan bisa diterima oleh semua pihak. Suatu

entity bisa merupakan environmental element, resource, dan transaksi.

b. Attribut

Karakteristik suatu entity yang ditgulskan kedalam entity, terdapat dua

jenis atribut yaitu:

1. Identifier (key) digunakan untuk menentukan satu entity secara unik

(primary key).

2. Decriptor (non key atribut) digunakan untuk menspesifikasikan

karakteristik dari suatu entity yang tidak unik

c. Relationship

Hubungan antara entity. Relationship dipakai untuk menghubngkan dua

entity atau lebih dengan arti tertentu. Cardinaliti dan relationship dipakai

untuk mengidentifikasikan struktur dari relationship.

ERD merupaka alat untuk pembuatan model data secara grafik, maka ERD

memiliki simbol-simbol ang digunakan unutk menggambarkan mosdel data

seperti terdapat pada tabel berikut:

20

Enitas adalah objek yang dapat diidentifikasikan

dalam lingkungan pemakai.

Relasi merupakan adanya hubungan diantara

sejumlah entitas yang berbeda.

Atribut berfungsi mendeskripsikan karakter entitas

(atribut yang berfungsi sebgai key diberi garis

bawah).

Garis sebagai penghubung antara relasi dengan

entitas, relasi dan entitas dengan atribut.

Sumber : Agus Saputra dan Feni Agustin

Gambar II.6

Simbol Entity Relationship Diagram

3. Logical record Structure (LRS)

Logical Record Structure (LRS) menurut saputra dan agustin (2012:34),

“Dibentuk dari nomor dari tipe record beberapa tipe record digambarkan oleh

kotak persegi panjang dnegan nama yang unik. LRS juga terdiri dari hubungan

diantara tipe record. “Logical record Structure terdiri dari link-link diantara tipe

record”.

Link ini menunjukan arah dari satu tipe record lainnya. Banyak Link dari

LRS tang diberi tanda field-field yang kelihatan pada kedua tipe link record.

Entitas

Relasi

Atribut

21

4. Relasi

Relasi menurut Nugroho (2013:56), “adalah hubunga antara suatu

himpunan dengan himpunan entitas yang lainnya”. Pada gambaran diagram

hubungan entitas, relasi adalah predikat yang menghubungkan suatu entitas

dengan entitas lainnya. Relasi merupakan hubungan yang berarti antara suatu

entitas dengan entitas lainnya. Frasa berimpilikasi bahwa relasi mengijinkan untuk

menjawab pertanyaan-pertanyaan yang berkaitan dengan hubungan suatu entitas

dengan lainnya.

C. Pengujian Web

Menurut Risky (2011 : 19) “Black Box Testing merupakan pengujian yang

berfokus kepada spesifikasi fungsional dari perangkat lunak, tester dapat

mendefinisikan kumpulan kondisi input dan melakukan pengetesan pada

spesifikasi fungsional program.

Ciri-ciri Black Box Testing:

Black Box Testing berfokus pada kebutuhan fungsional pada software,

berdasarkan spesifikasi kebutuhan dari software Black Box Testing bukan teknik

alternatif daripada White Box Testing, lebih dari itu ia merupakan pendekatan

pelengkap dalam mencakup error dalam kelas yang berbeda dari White Box

Testing, Black Box Testing melakukan pengujian tanpa pengetahuan detail

struktur internal dari sitem atau komponen yabg di tes Black Box Testing disebut

sebagai Behaviour Testing. Spesification Based Testing, input/output testing atau

Functional testing.

pada Black Box Testing terdapat jenis teknik desain tes yang dapat dipilih

berdasarkan pada tipe testing yang akan digunakan, yang diantaranya:

22

1. Equivalence Class Partitioning

2. Boundari Value Analysis

3. State Transaction Testing

4. Cause Effect Graphing

Katagori error yang diketahui melalui Black Box testing :

1. Fungsi yang hilang atau tak benar

2. Error dari antar muka

3. Error dari struktur data atau akses eksternal database

4. Error dari kinerja atau tingkah laku

5. Error dari inisialisasi dan terminasi