9

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Website sudah menjadi kebutuhan masyarakat, terutama bagi perusahaan,

organisasi dan pemilik situs online. Mengingat kompetisi visual yang semakin

berkembang pesat, daya tarik menjadi kebutuhan yang paling penting sehingga

programmer dituntut untuk merancang sebuah tampilan website yang menarik agar

banyak pengunjung yang berminat untuk mengaksesnya.

A. Website

Berikut ini akan dijelaskan pengertian dari segala sesuatu yang berhubungan

tentang website agar sebuah website dapat diakses oleh pemakainya, diantaranya:

1. Internet

Menurut Kadir (2014:306) “Internet merupakan contoh jaringan terbesar yang

menghubungkan jutaan komputer yang tersebar di seluruh penjuru dunia dan tidak

terikat pada satu organisasi pun”.

Cikal bakal jaringan internet pertama kali dikembangkan tahun 1969 dengan

nama ARPAnet (US Defense advanced Research Projects Agency) oleh Departemen

Pertahanan Amerika Serikat. ARPAnet dibangun dengan sasaran untuk membuat

jaringan komputer yang tersebar untuk menghindari pemusatan informasi di satu titik

yang dipandang rawan untuk dihancurkan apabila terjadi peperangan.

10

2. World Wide Web

Menurut Mcleod dan Schell (2008:79) “World Wide Web (WWW) adalah

suatu akses informasi yang biasa digunakan oleh URL untuk mengidentifikasi

berbagai konten yang terdapat di internet”.

3. Web Browser atau Browser

Menurut Kadir (2014:186) “Web browser atau biasa disebut browser

(peramban) saja adalah perangkat lunak yang berguna untuk mengakses informasi

web ataupun untuk melakukan transaksi via web”.

4. Pengertian Web Server

Web Server merupakan aplikasi yang berguna untuk melayani permintaan

halaman web dan mengirimkan dokumen HTML yang diminta ke klien (Kadir,

2014:329).

B. Bahasa Pemrograman

Bahasa pemograman yang digunakan dalam perancangan website, antara lain:

1. PHP

PHPHypertext Preprocessor (PHP) merupakan suatu bahasa scripting

khususnya digunakan untuk web development. Karena sifatnya yang server side

scripting, maka untuk menjalankan PHP harus menggunakan web server

(Hidayatullah dan Kawistara, 2015:231).

2. HTML

Hypertext Markup Language (HTML) merupakan bahasa standard yang

digunakan untuk menampilkan halaman web (Hidayatullah dan Kawistara, 2015:13).

11

3. JavaScript

Menurut Hidayatullah dan Kawistara (2015:422) “JavaScript ialah suatu bahasa

scripting yang digunakan sebagai fungsionalitas dalam membuat suatu web”.

C. Basis Data (Database)

Menurut Kadir (2014:218) “Basis data (Database) adalah suatu

pengorganisasian sekumpulan data yang saling terkait sehingga memudahkan

aktivitas untuk memperoleh informasi”.

Basis data dimaksudkan untuk mengatasi problem pada sistem yang memakai

pendekatan berbasis berkas.Untuk mengolah basis data diperlukan perangkat lunak

yang disebut Database Management System (DBMS).

1. MySQL

Menurut Kadir (2009:15) “MySQL (My Structure Query Language) merupakan

software yang tergolong database server dan bersifat open source. Open source

menyatakan bahwa software ini dilengkapi dengan source code (kode yang dipakai

untuk membuat MySQL)”.

2. Xampp

Xampp merupakan sebuah aplikasi web server.Web server sendiri merupakan

tempat menyimpan file-file maupun data-data untuk membuat website.Juga sering

diartikan sebagai layanan data pada web browser (Kadir, 2009:5).

3. PhpMyAdmin

Menurut Kadir (2009:30) “PhpMyAdmin adalah utilitas yang tersedia pada

WAMP5 yang dapat digunakan untuk berinteraksi dengan database MySQL. Utilitas

12

ini berbasis web dan dapat digunakan untuk melakukan berbagai operasi yang

mengakses database”.

D. Aplikasi Perancangan Web

Dalam perancangan website ini, ada beberapa aplikasi yang digunakan,

diantaranya:

1. Wamp Server

Menurut Kadir (2009:20) “Wamp Server adalah sebuah software yang

mengemas MySQL, PHP, dan Apache sehingga memudahkan para pengembang

sistem yang hendak menggunakan ketiga software tersebut dalam menginstal dan

melakukan koneksi”.

2. Adobe Dreamweaver CS4

Adobe Dreamweaver CS4 merupakan program aplikasi yang digunakan untuk

melakukan desain halaman website secara visual. Dalam mendesain halaman website,

aplikasi ini menyesdiakan fasilitas-fasilitas yang memberikan kemudahan bagi para

pengembang web (Wahana, 2010:2).

Ada dua halaman pada Adobe Dreamweaver CS4, yaitu Start Page dan Area

Kerja. Dibawah ini akan dijelaskan tentang halaman pada Adobe Dreamweaver CS4.

a. Start Page

Start Page merupakan kotak dialog yang ditampilkan pertama kali bersamaan

dengan jendela utama aplikasi Adobe Dreamweaver CS4 saat dijalankan. Fungsi dari

Start Page ini untuk menampilkan menu pilihan yang ada di Adobe

DreamweaverCS4, dimana user berhak memilih menu mana yang akan dipakai atau

dijalankan.

13

Start Page menampilkan empat pilihan menu dan sebuah checkbox untuk

menonaktifkan kotak dialog Start Page. Menu yang ditampilkan meliputi Open a

Recent Document, Create New, Top Features (videos),dan Help Online.

Sumber: (Hidayatullah dan Kawistara, 2015:14)

Gambar II.1. Start PageDreamweaver CS4

1. Open a Recent Document

Menu ini menampilkan daftar nama dokumen yang pernah dibuka dengan

Adobe Dreamweaver CS4.

2. Create New

Menu ini digunakan untuk membuat dokumen web yang baru. Beberapa tipe

dokumen web yang disediakan oleh Adobe Dreamweaver CS4, antara lain:

a) HTML

Hypertext Markup Language (HTML) merupakan sebuah bahasa dasar

yang digunakan untuk merancang halaman web statis.

14

b) ColdFusion

ColdFusion merupakan bahasa scripting yang digunakan untuk

pemrograman web server.ColdFusion digunakan pada Adobe ColdFusion,

BlueDragon, dan lainnya.

c) PHP

PHPHypertext Preprocessor (PHP) merupakan bahasa pemrograman

scripting web server-side. Dengan pemrograman server-side, sebuah

websiteakan lebih dinamis. PHP biasanya terpasang pada file HTML yang

disimpan dengan ekstensi \php.

d) XSLT (Entire Page)

XSLT merupakan bahasa pemrograman yang mempunyai sintaks dasar

sebagaimana XML.XSLT digunakan untuk mengubah dokumen XML

menjadi HTML atau format lainnya.

e) ASP VBScript

ASP VBScript merupakan bahasa scripting server-side turunan dari bahasa

Visual Basic.ASP disimpan dengan ekstensi *.asp atau “.vbs.

f) PHP

PHPHypertext Preprocessor (PHP) merupakan bahasa pemrograman

scripting web server-side. Dengan pemrograman server-side, sebuah

websiteakan lebih dinamis. PHP biasanya terpasang pada file HTML yang

disimpan dengan ekstensi \php.

15

g) XML

Exstensible Markup Language (XML) merupakan bahasa yang mirip

dengan HTML, tetapi penggunaannya tidak terbatas pada pemrograman

web saja.

h) CSS

Cascading Style Sheet (CSS) merupakan bahasa style yang digunakan untuk

mendesain halaman web yang bertujuan memisahkan isi (content)

webdengan desainweb.

i) JavaScript

JavaScript merupakan bahasa scripting turunan dari pemrograman

Java.JavaScript digunakan untuk pemrograman web client-side.

j) More

Menu ini digunakan untuk menampilkan Type Document dan template

dokumen web secara lebih lengkap.

k) Dreamweaver Site

Menu ini digunakan untuk membuat proyek website (site) baru dengan

Adobe Dreamweaver CS4.

3. Top Features (Videos)

Merupakan menu pilihan link yang berupa rekaman video penggunaan fasilitas

yang disediakan Dreamweaver secara online. Menu link rekaman video yang

disediakan, antara lain Related Files, Live View, Code Navigator, Dataset

Wizard, Web Widgets, JavaScript Support dan sebagainya.

16

4. Don’t Show Again

Kotak dialog Start Pageakan selalu ditampilkan bersamaan dengan jendela

utama Adobe Dreamweaver CS4 saat aplikasi ini dijalankan. Agar kotak dialog

Start Page tidak ditampilkan lagi, centang checkbox Don’t Show Again.

5. Help Online

Merupakan menu pilihan untiuk menampilkan bantuan tentang cara

penggunaan, fitur-fitur terbaru Adobe Dreamweaver CS4 dan lainnya secara

online.

b. Area Kerja

Area kerja Adobe Dreamweaver CS4 adalah lingkungan yang digunakan untuk

merancang halaman web Anda. Pada area kerja ini terdapat jendela utama, yaitu

jendela dokumen (Document Window) yang berfungsi untuk mendesain halaman,

baik dengan cara penulisan kode maupun secara visual. Selain itu, juga terdapat

Menubar, Toolbar, dan panel-panel yang membantu desain halaman web dengan

mudah.

Sumber: Hidayatullah dan Kawistara, (2015:15)

Gambar II.2. Area Kerja Dreamweaver CS4

17

1. Menubar

Menubarmerupakan sebuah grup menu yang terdapat pada bagian atas aplikasi

yang tersusun dari deretan teks/label. Setiap menu terdiri dari submenu-

submenu sesuai kategori menu masing-masing.

2. Workspace Switcher

Workspace Switchermerupakan sebuah fasilitas yng berfungsi untuk mengubah

mode tampilan area kerja sesuai kebutuhan perancang web.Workspace Switcher

ini berada sejajar dengan menubar sebelah kanan.Secara default, mode tampilan

area kerja Adobe Dreamweaver CS4 adalah mode Designer.Adobe

Dreamweaver CS4 memiliki mode area kerja yang banyak, di antaranya mode

Coder yang hanya menampilkan kode pembuatan halaman dan Classic.

3. Document Toolbar

Toolbar merupakan kumpulan tombol yang berfungsi memudahkan

pengembang untuk menggunakan fasilitas yang disediakan Dreamweaver. Pada

toolbar ini, terdapat tombol-tombol untuk mengubah mode jendela dokumen

yang ditampilkan dan beberapa tombol lain.

4. Document Window

Document Window / jendela dokumen merupakan area yang digunakan untuk

membuka, mengedit, menampilkan desain dokumen dan atau kode dokumen

web yang aktif. Jendela dokumen ini mempunyai tool-tool yang digunakan

untuk menampilkan informasi pada halaman, seperti Related File And Code

18

Naviator, Tag Selector dan fasilitas lain, seperti Zooming, HandTool, Selected

Tool dan informasi lainnya.

5. Panel Groups

Panel Groups merupakan kumpulan panel berupa tab-tab pilihan yang

mempunyai fungsi berbeda-beda. Panel merupakan sebuah jendela untuk

memudahkan pembuatan desain web dengan menampilkan informasi

pendukung pada jendela informasi.

6. Tag Selector

Tag Selector berfungsi menampilkan tag yang diseleksi pada area desain.

7. Panel Properties

Panel Properties berfungsi menampilkan properti dari elemen halaman web

yang terpilih.

E. Model Pengembangan Perangkat Lunak

Menurut Rosa dan Shalahuddin (2011:27) “Model SDLC air terjun (waterfall)

sering juga disebut model sekuensial linier (sequential linier) atau alur hidup klasik

(classic life cycle)”.

Model air terjun menyediakan pendekatan alur hidup perangkat lunak secara

sekuensial atau terurut dimulai dari analisis, desain, pengodean, pengujian, dan tahap

pendukung (support).

19

Berikut adalah gambar model air terjun:

Sistem/Rekayasa

Informasi

Analisis Desain PengujianPengodean

Sumber: Rosa dan Shalahuddin (2011:27)

Gambar II.3. Metode Waterfall

1. Analisis kebutuhan perangkat lunak

Proses pengumpulan kebutuhan dilakukan secara intensif untuk menspesifikasikan

kebutuhan perangkat lunak agar dapat dipahami perangkat lynak seperti apakah

yang dibutuhkan oleh pengguna. Spesifikasi kebutuhan perangkat lunak ini perlu

untuk didokumentasikan.

2. Desain

Desain perangkat lunak merupakan proses multilangkah yang fokus pada desain

pembuatan program perangkat lunak termasuk struktur data, arsitektur perangkat

lunak, representasi antarmuka, dan prosedur pengodean. Tahap ini mentranslasi

kebutuhan perangkat lunak dari tahap analisis kebutuhan ke representasi desain

agar dapat diimplementasikan menjadi program pada tahap selanjutnya.Desain

perangkat lunak yang dihasilkan pada tahap ini juga perlu didokumentasikan.

3. Pembuatan kode program

Desain harus ditranslasikan kedalam program perangkat lunak.Hasil dari tahap ini

merupakan program komputer sesuai dengan yang telah dibuat pada tahap desain.

20

4. Pengujian

Pengujian fokus pada perangkat lunak dari segi logik dan fungsional serta

memastikan bahwa semua bagian sudah diuji.Hal ini dilakukan untuk

meminimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan sesuai

dengan yang diinginkan.

5. Pendukung atau pemeliharaan

Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan ketika

sudah dikirim ke pengguna.Perubahan bisa terjadi karena adanya kesalahan yang

muncul dan tidak terdeteksi saat pengujian atau perangkat lunak harus beradaptasi

dengan lingkungan baru. Tahap pendukung atau pemeliharaan dapat mengulangi

proses pengembangan mulai dari analisis spesifikasi untuk perubahan perangkat

lunak yang sudah ada, tapi tidak untuk membuat perangkat lunak baru.

2.2. Teori Pendukung

Di poin ini penulis akan membahas tentang teori pendukung yang sangat

berpengaruh dan juga diperlukan dalam membangun web ini. Teori-teori ini

mengenai struktur navigasi, ERD (Entity Relationship Diagram) beserta

komponennya,LRS (Logical Record Structure), dan juga mengenai teknik pengujian

web dengan metode black box testing.

A. Struktur Navigasi

Menurut Fauzi (2008:3) mengatakan “Struktur navigasi adalah struktur atau

alur dari suatu program”. Sebelum membuat suatu aplikasi maupun website

sebaiknya kita menentukan struktur navigasi terlebih dahulu. Ada empat macam

21

bentuk dasar dari struktur navigasi yang biasa digunakan dalam pembuatan aplikasi

menurut Fauzi (2008:4), 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.

Sumber: Fauzi (2008:4)

Gambar II.4. Struktur Navigasi Linier

2. Struktur Navigasi Non-Linier

Struktur navigasi non-linier atau struktur tidak berurut 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-linier ini

walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan

yang sama yaitu tidak ada Master Page dan Slave Page.

22

Sumber: Fauzi (2008:4)

Gambar II.5. Struktur Navigasi Non-Linier

3. Struktur Navigasi Hirarki

Struktur navigasi hirarki biasa disebut struktur bercabang, merupakan suatu

struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan

kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai Master Page

(halaman utama pertama), halaman utama ini mempunyai halaman percabangan yang

disebut Slave Page (halaman pendukung). Jika salah satu halaman pendukung dipilih

atau diaktifkan, maka tampilan tersebut akan bernama Master Page (halaman utama

kedua), dan seterusnya.

Sumber: Fauzi (2008:5)

Gambar II.6. Struktur Navigasi Hirarki

4. Struktur Navigasi Campuran

Struktur Navigasi Campuran (composite) merupakan gabungan dari ketiga

struktur sebelumnya yaitu linier, non-linier dan hirarki.Struktur navigasi ini juga

23

biasa disebut dengan struktur navigasi bebas.Struktur navigasi ini banyak digunakan

dalam pembuatan website sehingga dapat memberikan interaksi yang lebih tinggi.

Sumber: Fauzi (2008:5)

Gambar II.7. Struktur Navigasi Campuran

B. Entity Relationship Diagram (ERD)

Menurut Sutanta (2011:91) “Entity Relationship Diagram (ERD) merupakan

suatu model data yang dikembangkan berdasarkan objek. Entity Relationship

Diagram (ERD) digunakan untuk menjelaskan hubungan antar data dalam basis data

kepada pengguna secara logis”.

1. Komponen Entity Relationship Diagram (ERD)

Komponen Entity Relationship Diagram menurut Sutanta (2011:91) adalah

sebagai berikut:

a) Entitas merupakan suatu objek yang dapat dibedakan dari lainnya yang dapat

diwujudkan dalam basis data. Objek dasar dapat berupa orang, benda, atau hal

yang keterangannya perlu disimpan didalam basis data. Entitas dinyatakan

dengan simbol persegi panjang.

24

Sumber: Sutanta (2011:91)

Gambar II.8. Simbol Entitas

b) Relasi merupakan hubungan antara sejumlah entitas yang berasal dari

himpunan entitas yang berbeda. Relasi dinyatakan dengan simbol belah ketupat.

Sumber: Sutanta (2011:91)

Gambar II.10. Simbol Relasi

c) Atribut merupakan keterangan-keterangan yang terkait pada sebuah entitas

yang perlu disimpan dalam basis data. Atribut berfungsi sebagai penjelas pada

sebuah entitas. Atribut digambarkan dengan simbol elipse.

Sumber: Sutanta (2011:91)

Gambar II.9. Simbol Atribut

2. Derajat Relationship dalam Entity Relationship Diagram

Menurut Hidayatullah dan Kawistara (2015:151) “Relasi memiliki derajat

keterhubungan.Derajat keterhubungan antar entitas pada suatu relasi disebut dengan

kardinalitas”. Terdapat tiga jenis kardinalitas:

a) Satu ke satu (1-1) yaitu setiap entitas pada himpunan entitas A berhubungan

dengan paling banyak dengan satu entitas pada himpunan entitas B, begitu juga

sebaliknya.

25

b) Satu ke banyak (1-N) yaitu setiap entitas pada himpunan entitas A dapat

berhubungan dengan banyak entitas pada himpunan entitas B, begitu juga

sebaliknya.

c) Banyak ke banyak (N-N) yaitu setiap entitas pada himpunan entitas A dapat

berhubungan dengan banyak entitas pada himpunan entitas B, demikian juga

sebaliknya.

C. Logical Record Structure (LRS)

Menurut Frieyadie (2007:13) “LRS merupakan hasil dari pemodelan Entity

Relationship (ER) beserta atributnya sehingga bisa terlihat hubungan-hubungan antar

entitas”.Contoh :

<Nama Tabel>

<Nama Field Kunci Utama>

<Nama Field 2>

<Nama Field 3>...

...

<Nama Field N>

Sumber: Frieyadie (2007:13)

Gambar II.11. Model Logical Record Structure

1. Hal-hal yang mempengaruhi pembuatan LRS

Ada tiga hal yang dapat berpengaruh dalam pembuatan LRS menurut

Frieyadie (2007:14), yaitu :

a. Jika tingkat hubungan (cardinality) satu pada satu (one-to-one), maka

digabungkan dengan entitas yang lebih kuat (strong entity), atau digabungkan

dengan entitas yang memiliki atribut yang lebih sedikit.

26

b. Jika tingkat hubungan (cardinality) satu pada banyak (one-to-many), maka

hubungan relasi atau digabungkan dengan entitas yang tingkat hubungannya

banyak.

c. Jika tingkat hubungan (cardinality) banyak pada banyak (many-to-many), maka

hubungan relasi tidak akan digabungkan dengan entitas manapun, melainkan

menjadi sebuah LRS.

2. Transformasi ERD ke LRS

Aturan-aturan dalam melakukan transformasi Entity Relationship Diagram ke

Logical Record Structure adalah sebagai berikut:

a. Setiap entityakan diubah kebentuk sebuah kotak dengan nama entity berada

diluar kotak dan atribut berada didalam kotak.

b. Sebuah relasi kadang disatukan dalam sebuah kotak bersama entity, kadang

dipisah dalam sebuah kotak tersendiri.

Aturan pokok diatas akan sangat dipengaruhi oleh elemen yang menjadi titik

perhatian utamapada langkah transformasi yaitu cardinality/kardinalitas.

D. Pengujian web

Menurut Simarmata (2010:237) “Pengujian adalah proses terhadap aplikasi

program untuk menemukan segala kesalahan dan segala kemungkinan yang akan

menimbulkan kesalahan sesuai dengan spesifikasi perangkat lunak yang telah

ditentukan sebelum aplikasi tersebut diserahkan kepada pelanggan”.

Dalam membangun sistem informasi berbasisweb ini, penulis melakukan

pengujian dengan metode black box testing.

27

Menurut Rosa dan Shalahuddin (2013:275) “Black box testing adalah pengujian

perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan kode

program. Pengujian ini dimaksudkan untuk mengetahui apakah fungsi-fungsi

masukan dan keluaran sesuai dengan spesifikasi yang dibutuhkan”.