6

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Menurut Arief (2011:8) “situs web adalah dokumen-dokumen web yang

terkumpul menjadi satu kesatuan yang memiliki Unfield Resource Locator (URL)

domain yang biasanya diterbitkan pad internet atau intranet dan dapat diakses semua

pengguna dengan cara mengetikkan alamatnya”.

A. Website

1. Internet

Menurut Sibero (2013a:10) “Interconnected Network (internet) adalah

jaringan komputer yang menghubungkan antar jaringan secara global, internet dapat

juga disebut jaringan dalam suatu satu jaringan yang luas”. Internet juga

menggunakan protocol komunikasi yaitu TCP/IP (Transmission Control Protocol /

Internet Protocol). Protokol adalah spesifikasi sederhana mengenai bagaimana

komputer saling bertukar informasi.

TCP/IP (Transmission Control Protocol) bertugas untuk memastikan bahwa

semua hubungan bekerja dengan benar, sedangkan IP (Internet Protocol) yang

mentransmisikan data dari satu komputer ke komputer yang lain. TCP dan IP menjadi

satu nama karena fungsinya selalu bergandengan satu sama lain dalam komunikasi

data.

2. Pengertian Website

Menurut Hidayat (2010:2), “Website atau situs dapat diartikan sebagai

kumpulan halaman-halaman yang digunakan untuk menampilkan informasi teks,

gambar diam atau gerak, animasi, suara, dan atau gabungan dari semuanya, baik yang

bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling

terkait, yang masing-masing dihubungkan dengan jaringan-jaringan halaman”.

Menurut Kustiyahningsih (2011a:113), “Web adalah layanan yang didapat

oleh pemakai komputer yang terhubung ke internet”.

7

Dapat disimpulkan website adalah sebuah tempat di internet, yang menyajikan

informasi dengan berbagai macam format data seperti text, image, bahkan video dan

dapat diakses menggunakan berbagai aplikasi klien sehingga memungkinkan

penyajian informasi yang lebih menarik dan dinamis dengan pengelolaan yang

terorganisasi.

3. Web Browser

Menurut Sibero (2013b:12) “Web Browser adalah aplikasi perangkat lunak

yang digunakan untuk mengambil dan menyajikan sumber informasi web”. Sumber

informasi web diidentifikasikan dengan Uniform Rouserce Identifier (URL) yang

dapat terdiri dari halaman web, video, gambar ataupun konten lainnya.

Sejarah Web Browser dimulai pada tahun 1991 saat Tim Bernes-Lee membuat

aplikasi web browser pertama pada komputer NeXT dengan nama World Wide Web

Browser, kemudian ditahun 1993 NSCA (National Center Supercomputing

Aplication) mengembangkan web browser grafis bernama NSCA Mosaic, yang

kemudian dilanjutkan pada tahun 1994 merilis Nestcape Navigator dan pada tahun

1998 berubah menjadi Mozila Firefox Microsoft Corp ikut meramaikan

perkembangan web browser dengan merilis Internet Explorer pada tahun 1995, dan

diikuti oleh Opera ditahun 1996. Tidak ketinggalan Apple Inc juga ikut meramaikan

pada web browser dengan merilis Safari pada tahun 2003. Dan ditahun 2008 Google

Inc merilis web browser dengan nama Google Chrome.

4. Web Server

Menurut Sibero (2013c:11) “Web Server adalah sebuah komputer yang terdiri

dari perangkat keras dan perangkat lunak. Secara bentuk fisik dan cara kerjanya,

prangkat keras web server tidak berbeda dengan komputer rumah atau PC, yang

membedakan adalah kapasitas dan kapabilitasnya”. Perbedaan tersebut dikarenakan

web server bekerja sebagai penyedia layanan yang dapat diakses oleh banyak

pengguna sehingga dibutuhkan kapasitas dan kapabilitas yang besar dibandingkan

PC. Dukungan perangkat lunak sangat dibutuhkan agar web server dapat berjalan

secara optimal. Serta perangkat lunak web server memiliki karakteristik dan teknologi

yang digunakan untuk mengatur kerja sistemnya.

8

B. Bahasa Pemrograman

1. Apache2triad

Kustiyahningsih (2011b:8) menyatakan bahwa “Apache merupakan web

server yang paling populer dan memiliki rangking pertama dalam presentase

penggunaannya”. Apache dapat digunakan diberbagai platform OS.

Apache merupakan web server yang paling banyak dipergunakan diinternet.

Pro. Pada beberapa versi berikutnya apache mengeluarkan programnya yang dapat

dijalankan windows NT. Apache mempunyai program pendukung yang cukup

banyak. Beberapa dukungan apache :

a. Kontrol akses

Kontrol ini dapat dijalankan berdasarkan nama host atau nomor IP.

b. CGI (Common Gateway Interface)

Yang paling terkenal untuk digunakan adalah PERL (Practical Extraction And

Report Language) didukung oleh apache dengan menempatkannya sebagai

modul (mod_perl).

c. PHP (Personal Home Page) / PHP Hypertext Processor

Program dengan metode semacam CGI, yang memproses teks dan bekerja di

server, apache mendukung php dengan menempatkannya sebagai salah satu

modulnya mod php hal ini membuat kinerja php akan menjadi lebih baik.

2. MySQL (Structured Query Language)

Menurut Sibero (2013d:97) “MySQL adalah suatu RDBMS (Relational

Database Management System) yaitu aplikasi sistem yang menjalankan fungsi

pengolahan data”. MySQL adalah sebuah perangkat lumak sistem mana jemen basis

data SQL (Relational Database Management System) atau DBMS yang multithread,

multi-user dengan sekitar 6 juta instalasi di seluruh dunia. MySQL sebenarnya

merupakan turunan salah satu konsep utama dalam database sejak lama, yaitu SQL

(Structured Query Language). SQL digunakan untuk berkomunikasi dengan sebuah

database. SQL merupakan bahasa standar untuk sistem manajemen database

rasional.

9

3. PHP (Hipertext Preprocessor)

Menurut Prasetio (2014:122) “PHP : Hipertext Preprocessor adalah bahasa

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

dapat ditanamkan langsung ke dalam HTML. Kode PHP dipisahkan dari HTML

dengan menggunakan tanda start . Ketika sebuah dokumen dibaca,

processor PHP hanya menterjemahkan area yang ditandai saja dan menampilkan

hasilnya pada tempat yang sama.

4. HTML (Hypertext Markup Language)

Menurut Fauziah (2014:3) “Hypertext Markup Language (HTML) merupakan

standard bahasa pemrograman yang populer dan digunakan untuk menampilkan

dokumen yang kita buat di halaman web”. Beberapa tag dalam dokumen-dokumen

HTML menentukan bagaimana teks-teks diformat. Tag-tag yang lain memberitahu

komputer tentang bagaimana menanggapi aksi-aksi yang datang dari pengguna.

Sebagai contoh, apa yang harus dilakukan komputer saat pengguna mengklikkan

mouse-nya pada ikon tertentu. Kemudian tag lain yang penting adalah link yang

mengandung Uniform Resource Locator (URL), yang merujuk pada dokumen lain di

server yang sama atau komputer lain yang ada dijaringan internet.

5. Cascading Style Sheet (CSS)

Menurut Ardhana (2012:108) “Cascading Style Sheet (CSS) merupakan salah

satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam

sebuah web sehingga akan lebih terstruktur dan seragam”. Sama halnya styles dalam

aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style,

misalnya heading, sub bab, bodytext, footer, images, dan style lainnya untuk dapat

digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai

untuk memformat tampilan halama web yang dibuat dengan bahasa HTML dan

XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks,

warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi

antar paragraf, spasi antar teks, margin kiri, kanan, atas bawah dan parameter lainnya.

CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.

10

Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama

dengan format yang berbeda.

3. Basis Data (Database)

1. Pengertian Database

Menurut Priyadi (2014a:2) “Pengertian basis data adalah sekumpulan fakta

berupa representasi tabel yang saling berhubungan dan disimpan dalam media

penyimpanan digital”. Tabel-tabel dalam basis data merupakan representasi tempat

penyimpanan data yang mendukung fungsi dari basis data untuk suatu sistem. Secara

umum database atau basis data adalah kumpulan data yang disimpan secara

sistematis di dalam komputer dan dapat diolah atau dimanipulasi menggunakan

perangkat lunak (program aplikasi) untuk menghasilkan informasi.

2. Macromedia Dreamweaver 8

Macromedia Dreamweaver8 menurut Nugroho (2008a:1) adalah “Suatu

bentuk program editor web yang dibuat oleh macromedia dan merupakan software

yang dikenal sebagai software web authoring tool, yaitu software untuk desain dan

layout halaman web”. Versi terbaru Dreamweaver memiliki kemampuan bukan hanya

sebagai software untuk desain web saja, tetapi juga untuk editing kode serta

pembuatan aplikasi web dengan menggunakan berbagai bahasa pemrograman web,

antara lain JSP (Java Server Pages), PHP, ASP (Active Server Pages) dan

ColdFusion.

Dreamweaver8 merupakan salah satu program desain web yang dalam

perkembangannya sudah menjadi salah satu aplikasi yang dapat berfungsi sebagai

pengembangan web (Web Development). Dengan aplikasi ini, dapat melakukan

beberapa langkah sekaligus, yaitu desain layout (untuk membuat tampilan dari web),

dan pembuatan skrip yang memiliki fasilitas pengecekan/validasi dari keyword untuk

setiap server side yang digunakan dan untuk pembuatan web dinamis.

Macromedia Dreamweaver8 mempunyai sifat WYSIWYG (What You See Is

What You Get) yang artinya apa yang kita lihat pada halaman desain, maka semuanya

itu akan kita peroleh pada browser. Dengan kelebihan ini sehingga seorang pembuat

11

program (programmer) atau pembuat desain web (web desainer) dapat langsung

melihat hasil buatannya tanpa harus membukanya pada browser.

Untuk lebih jelas perhatikan gambar dibawah ini :

Sumber : Nugroho (2008b:1)

Gambar II.1

Tampilan awal Dreamweaver 8

Keterangan :

a. Menu Bar

Menampilkan perintah-perintah untuk merancang dan mengolah dokumen

website.

b. Insert Bar

Menampilkan tombol-tombol untuk memasukkan berbagai jenis objek seperti

gambar, form, tabel, layer, dan lainnya kedalam dokumen website yang

sedang dibuat. Insert bar dibuat untuk memudahkan user agar dapat

melengkapi halaman web yang sedang dibuat dengan cepat.

c. Document Tool Bar

Menampilkan tombol-tombol dan menu pop-up yang menyediakan tampilan

berbeda dari komponen window (seperti Design view dan Code view), pilihan

12

menampilkan ruler, grid dan beberapa operasi umum, seperti preview di

browser.

d. Code Window

Mena,pilkan script program yang digunakan di dalam web.

e. Design Window

Menampilkan design web yang sedang dibuat.

f. Property Inspector

Digunakan untuk mengetahui atau mengubah properties dari objek yang

dimasukkan ke dalam dokumen seperti mengubah jenis, warna dan ukuran

huruf.

g. Panel Site

Memberikan fasilitas untuk mengatur file dan folder yang membentuk situs

web. Panel ini berfungsi sebagai site explorer, kita dapat membuka atau

mengaktifkan situs lama yang pernah kita buat, melihat isi situs, menghapus

dokumen web, mengganti nama dokumen web atau membuat file baru.

4. Model Pengembangan Perangkat Lunak

Metode yang digunakan pada pengembangan perangkat lunak ini

menggunakan model water fall. Model waterwall merupakan sebuah metode

pengembangan software yang bersifat sekuensial. Metode waterfall menurut

Pressman (2010:39) model “waterfall adalah model klasik yang bersifat sistematis,

berurutan dalam membangun software. Model ini sering disebut dengan “classic life

cycle” atau model waterfall. Disebut dengan waterfall karena tahap demi tahap yang

dilalui harus menunggu selesainya tahap sebelumnya dan berjalan berurutan.”

Metode yang digunakan pada pengembangan perangkat lunak ini terbagi menjadi

lima tahapan, yaitu:

1. Communication (analysis requirement)

Langkah ini merupakan analisis terhadap kebutuhan software, dan tahap untuk

mengadakan pengumpulan data dengan melakukan pertemuan dengan

13

customer, maupun mengumpulkan data-data tambahan baik yang ada di

jurnal, artikel maupun dari internet.

2. Planning

Proses planning merupakan lanjutan dari proses communication (analysis

requirement). Tahapan ini akan menghasilkan dokumen user requirement atau

bias dikatakan sebagai data yang berhubungan dengan keinginan user dalam

pembuatan software, termasuk rencana yang akan dilakukan.

3. Modeling

Proses modeling ini akan menerjemahkan syarat kebutuhan ke sebuah

perancangan software yang dapat diperkirakan sebelum membuat coding.

Proses ini berfokus pada rancangan struktur data, arsitektur software,

representasi interface, dan detail (algoritma) procedural. Tahapan ini akan

menghasilkan dokumen yang disebut software requirement.

4. Construction

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 pengguna 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.

5. Deployment

Tahapan ini bisa dikatakan final dalam pembuatan sebuah software atau

sistem. Setelah melakukan analisis, desain dan pengkodean maka sistem yang

sudah jadi akan digunakan oleh user. Kemudian software yang telah dibuat

harus dilakukan pemeliharaan secara berkala.

Sesuatu yang dibuat haruslah diujicobakan. Demikian juga dengan

software semua fungsi-fungsi software harus diujicobakan, agar software

babas dari error, dan hasilnya harus benar-benar sesuai dengan kebutuhan

yang sudah didefinisikan sebelumnya.

14

2.2. Teori Pendukung

A. Struktur Navigasi

Menurut Suyanto (2006:62) “Struktur Navigasi adalah struktur atau alir dari

program”. Struktur navigasi merupakan hal yang sebaiknya dilakukan sebelum

membuat aplikasi homepage. Struktur navigasi dapat digolongkan menurut

kebutuhan akan objek, kemudahan pemakaian, keinteraktifitasannya dan kemudahan

yang membuatnya yang berpengaruh terhadap waktu pembuatan suatu situs web.

Bentuk dasar dari struktur navigasi adalah sebagai berikut :

1. Struktur Navigasi Linier (Linear)

Linear (satu alur) merupakan struktur yang hanya mempunyai satu rangkaian

cerita yang berurut. Dengan kata lain struktur ini hanya dapat 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 dan tidak dapat menampilkan dua halaman sebelumnya atau dua

halaman sesudahnya. Salah satu yang terpenting dari struktur ini adalah tidak

diperkenankan terjadinya percabangan.

Sumber : Prihatna (2005a:60)

Gambar II. 2

Struktur Navigasi Linier (Linear)

2. Struktur Navigasi Hirarki (Hierarchi)

Struktur Hierarchi (bercabang) ini percabangan untuk menampilkan data

berdasarkan kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai

Master Page (Halaman utama kesatu), halaman utama ini akan mempunyai halaman

percabangan yang disebut sebagai Slave Page (halaman pendukung). Jika salah satu

halaman pendukung dipilih atau diaktifkan, maka tampilan tersebut akan bernama

Master Page (halaman utama kedua) dan seterusnya. Yang terpenting dari stuktur

penjejakan ini tidak diperkenankan tampilan secara linear.

15

Sumber : Prihatna (2005b:61)

Gambar II. 3

Struktur Navigasi Hirarki (Hierarchi)

3. Struktur Navigasi Non Linear

Struktur penjejakan Non Linear (tidak berurut) merupakan pengembangan

dari struktur penjejakan Linear. Pada struktur ini diperkenankan membuat percabang.

Pemakai bebas menelusuri website tanpa dibatasi oleh suatu rute dimana kontrol

navigasi dapat mengakses ke semua halaman manapun. Percabangan yang dibuat

pada struktur Non Linear ini berbeda dengan percabangan pada struktur Hierarchi,

karena pada percabangan Non Linear ini walaupun terdapat percabangan, tetapi tiap-

tiap tampilan mempunyai kedudukan yang sama tidak ada Master Page dan Slave

Page.

Gambar II. 4

Struktur Navigasi Non Linear

16

4. Struktur Navigasi Campuran Composite

Struktur Navigasi Composite (campuran) merupakan struktur gabungan dari

ketiga struktur sebelumnya. Struktur ini disebut juga struktur navigasi bebas.

Kelebihan dengan menggunakan struktur navigasi ini adalah suatu aplikasi mampu

memberikan keterkaitan informasinya lebih baik.

Sumber : Prihatna (2005c:61)

Gambar II. 5

Struktur Navigasi Campuran (Composite)

B. Entity Relationship Diagram

1. Definisi ERD

Menurut Kadir (2009:30) Entity Relationship Diagram adalah suatu model

yang digunakan untuk meggambarkan data dalam bentuk entitas, atribut dan

hubungan antar entitas. Huruf E tersendiri menyatakan entitas, atribut dan R

menyatakan hubungan(dari kata relationship).

Model ini dinyatakan dalam bentuk diagram, itulah sebabnya model E-R juga

disebut sebagai diagram E-R(ERD). Perlu diketahui bahwa model seperti ini tidak

mencerminkan bentuk fisik yang nantinya akan disimpan dalam database, melainkan

hanya bersifat konseptual. Itulah sebabnya model E-R tidak bergantung pada produk

DBMS yang digunakan.

17

2. Komponen ERD

a. Entitas

Adalah Suatu kumpulan objek atau sesuatu yang dapat dibedakan atau

didefinisikan secara unik

b. Atribut

Adalah Karakteristik dari entitas dan relasi menyediakan penjelasan

detail tentang entitas atau relasi tersebut

c. Hubungan

Adalah Hubungan yang terjadi antara satu atau lebih entitas

d. Kardinalitas Hubungan

Adalah Menghubungkan atribut dengan entitas dengan relasi

3. Derajat ERD

a. Unary (derajat satu)

Unary adalah satu buah relationship menghubungkan satu buah entity

Contoh:

b. Binary (derajat dua)

Binary adalah satu buah relationship yang menghubungkan dua buah entity

Contoh:

Menikah

Ditempatkan

Manusia

Pasien Ruangan

18

c. Ternary (derajat tiga)

Ternary adalah satu buah relationship yang menghubungkan tiga buah entity

Contoh :

C. Logical Record Structure

Menurut Priyadi (2014b:40) LRS (Logical Record Structure) adalah

representasi dari struktur record-record pada table-tabel yang berbentuk dari hasil

relasi antar entitas yang menentukan kardinalitas, jmlah table dan Foreign Key.

1. One-to-one

Sebuah entitas pada A berhubungan dengan paling banyak satu entitas pada B

dan sebuah entitas pada B berhubungan dengan paling banyak satu entitas pada A.

1 1

Gambar II.6

One-to-one

2. One-to-many

Sebuah entitas pada A berhubungan dengan 0 atau lebih entitas pada B.

Sebuah entitas pada B dapat dihubungkan dengan paling banyak satu entitas pada A.

11 1 M

Gambar II.7

One-to-many

Bekerja

Kemudi

Bimbing

Project Pegawai

Kota

Supir Taksi

Dosen Kelas

19

3. Many-to-one

Sebuah entitas pada A berhubungan dengan paling banyak satu entitas pada B.

Sebuah entitas pada B berhubungan dengan nol atau lebih entitas pada A

4. Many-to-many

Sebuah entitas pada A berhubungan dengan 0 atau lebih entitas pada B dan

sebuah entitas pada B dapat dihubungkan dengan nol atau lebih entitas pada A.

M M

Gambar II.8

Many-to-many

D. Pengujian Web

1. 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, misalkan untuk kasus proses login maka kasus uji coba yang

dilakukan adalah:

a. Jika user memasukkan nama pemakai (username) dan kata sandi (password)

yang benar.

b. Jika user memasukkan nama pemakai (username) dan kata sandi (password)

yang salah,misalkan nama pemakai benar tapi kata sandi salah, atau

sebaliknya atau keduanya salah.

Ajar Mahasiswa Mata Kuliah