9

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

1. Pengertian Internet dan Website

Interconnected Network merupakan kepanjangan dari internet. Internet

juga didefinisikan sebagai sebuah sistem komunikasi global yang dapat

menghubungkan komputer-komputer serta jaringan-jaringan komputer diseluruh

dunia.

Menurut Sibero (2011:10) “Internet (interconnection network) adalah

jaringan komputer yang menghubungkan antar jaringan secara global, internet

juga dapat disebut jaringan dalam suatu jaringan yang luas. Seperti halnya

jaringan komputer lokal maupun jaringan komputer area.

Komputer dan jaringan dengan berbagai platform (Unix, Linux, Windows,

Mac dan lain-lain) dapat bertukar informasi dengan adanya sebuah protokol

standar yang dikenal dengan nama TPC/IP (Transmission Control

Protocol/Intenet Protocol). Beberapa istilah yang sering digunakan user bekerja

dengan internet :

a. World Wide Web (WWW)

Menurut Arief (2011:7) World Wide Web (WWW) atau web adalah salah satu

aplikasi yang berisikan dokumen-dokumen multi-media (text, gambar,

animasi, video) di dalamnya menggunakan protokol HTTP (hypertext transfer

protocol) dan untuk mengaksesnya menggunakan perangkat lunak yang

disebut browser.

10

b. Web Server

Menurut Kustiyahningsih dan Anamisa (2011:8), "Web Server adalah

komputer yang digunakan untuk menyimpan dokumen-dokumen web,

komputer ini akan melayani permintaan dokumen web dari kliennya". Apache

merupakan web server yang paling populer dan memiliki rangking pertama

dalam persentase penggunanya.

c. Web Browser

Menurut Kustiyahningsih dan Anamisa (2011:8), Web Browser adalah

"Software yang digunakan untuk menampilkan informasi dari server web.

Software ini kini telah dikembangkan dengan menggunakan user interface

grafis, sehingga pemakai dapat dengan melakukan 'point and click' untuk

pindah antar dokumen". Contoh web browser antara lain, Mozilla Firefox,

Google Chrome, Opera dan lainnya.

d. URL dan HTTP

Menurut Kustiyahningsih dan Anamisa (2011:7), "URL (Universal Resource

Locator) adalah konsep nama file standar yang diperluas dengan jaringan

untuk menentukan lokasi informasi pada web server". Sedangkan HTTP

menurut Kustiyahningsih dan Anamisa (2011:7) yaitu "HTTP (Hypertext

Transfer Protocol) adalah suatu protokol yang menentukan aturan yang perlu

diikuti oleh web browser dalam meminta atau mengambil suatu dokumen dan

menyediakan dokumen yang diminta oleh browser".

11

Pengertian Website menurut Kustiyahningsih dan Anamisa (2011:4)

adalah, "World Wide Web (WWW), lebih dikenal dengan web yang merupakan

salah satu layanan yang didapat oleh pemakai komputer yang terhubung ke

internet dengan fasilitas hypertext untuk menampilkan data berupa text, gambar,

suara, animasi dan data multimedia lainnya".

Kategori Website menurut Kustiyahningsih dan Anamisa yaitu:

a. Web Statis

Menurut Kustiyahningsih dan Anamisa (2011:5): “Web statis adalah web

yang menampilkan informasi-informasi yang sifatnya statis (tetap)”. Disebut

statis karena pengguna tidak dapat berinteraksi dengan web tersebut. Dengan

demikian untuk mengetahui suatu web tersebut bersifat statis atau dinamis

dapat dilihat dari tampilannya. Jika suatu web hanya berhubungan dengan

halaman web lain dan berisi suatu informasi yang tetap maka web tersebut

disebut statis.

b. Web Dinamis

Menurut Kustiyahningsih dan Anamisa (2011:5) adalah "Web dinamis adalah

web yang menampilkan informasi serta dapat berinteraksi dengan pengguna”.

Web yang dinamis memungkinkan pengguna untuk berinteraksi menggunakan

form sehingga dapat mengolah informasi yang ditampilkan. Web dinamis

bersifat interaktif, tidak kaku dan terlihat lebih indah.

Menurut Kustiyahningsih dan Anamisa (2011:9) Dalam Web

programming, terdapat server-side programming dan client-side programming.

Client-side programming adalah untuk membuat web yang statis. sedangkan

untuk membuat web yang dinamis (dapat interaktif dengan user) diperlukan

12

server-side dan client-side programming. Program web yang tergolong dalam

client-side adalah JavaScript, VB Script, HTML dan lain-lain. Sedangkan

program web yang tergolong server-side adalah CGI/Perl, ASP, JSP, PHP dan

CFM.

Berdasarkan basis pengembangan, aplikasi (software) dapat dibedakan

menjadi dua macam yaitu aplikasi berbasis desktop dan aplikasi berbasis web.

Aplikasi berbasis desktop dikembangkan untuk dijalankan dimasing-masing client

(komputer pengakses aplikasi pengolahan database). Database diletakkan di

server sedangkan aplikasi di install masing-masing client. Bahasa pemrograman

yang digunakan untuk aplikasi tipe ini biasanya adalah Borland Delphi, Visual

Basic, Java netbean dan sebagainya. Pada aplikasi berbasis desktop, aplikasi

dibangun dengan menggunakan tool terntentu, kemudian dikompilasi. Hasilnya

dapat langsung digunakan dalam komputer.

Sedangkan aplikasi berbasis web tidak perlu di install dimasing-masing

client pengakses aplikasi karena aplikasi cukup dikonfigurasi di server. Kemudian

client mengakses dari browser seperti IE, Opera, Firefox dan Google Chrome.

Excutor aplikasi dilakukan oleh web server seperti Apache, IIS, Xitami dan lain

sebagainya.

2. Bahasa Pemrograman

Terdapat banyak bahasa pemrograman dalam membangun aplikasi

berbasis website. Dalam tugas akhir ini penulis hanya membahas 5 bahasa

pemrograman web yaitu:

13

a. Perl Hypertext Prepocessor (PHP)

Menurut Kustiyahningsih dan Anamisa (2011:14) "PHP (atau resminya PHP:

Perl Hypertext Preprocessor) adalah tugas akhir bersifat server-side yang

ditambahkan ke dalam HTML". PHP sendiri merupakan singkatan dari

Personal Home Page Tools. Skrip ini akan membuat suatu aplikasi

diintegrasikan kedalam HTML sehingga suatu halaman web tidak lagi bersifat

statis, namun menjadi bersifat dinamis. Sifat server-side berarti pengerjaan

tugas akhir dilakukan di server, baru kemudian hasilnya dikirimkan ke

browser .

b. Hypertext Markup Language (HTML)

Menurut Kustiyahningsih dan Anamisa (2011:13), "HTML kependekan dari

Hyper Text Markup Language. Dokumen HTML adalah file text murni yang

dapat dibuat dengan editor teks sembarang. Dokumen ini dikenal sebagai web

page". File-file HTML ini berisi instruksi-instruksi yang kemudian

diterjemahkan oleh browser yang ada dikomputer client (user) sehingga isi

informasinya dapat ditampilkan secara visual dikomputer pengguna (user).

c. 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". CSS dapat

mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel,

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

14

Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang

sama dengan format yang berbeda.

d. Javascript

Menurut Kustiyahningsih dan Anamisa (2011:65): “JavaScript adalah bahasa

yang berbentuk kumpulan skrip berjalan pada suatu dokumen HTML”. Bahasa

ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan

terhadap bahasa HTML dengan mengizinkan pengeksekusian perintah-

perintah di sisi user artinya di sisi browser bukan di sisi server web.

JavaScript adalah bahasa yang "case sensitive" artinya membedakan

penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil,

contoh variabel atau fungsi dengan nama TEST berbeda dengan variabel

dengan nama test dan setiap instruksi diakhiri dengan karakter titik koma (;).

e. Jquery

Jquery menurut Kadir (2013:5) yaitu, "Jquery adalah pustaka yang dibangun

dengan menggunakan javascript”. Tujuannya adalah agar program pembuatan

javascript bisa dilakukan dengan ringkas.

3. Basis Data

Menurut Kustiyahningsih dan Anamisa (2011:145) "Basis data adalah

sekumpulan informasi yang diatur agar mudah dicari”. Dalam arti umum basis

data adalah sekumpulan data yang diproses dengan bantuan komputer yang

memungkinkan data dapat diakses dengan mudah dan tepat, yang dapat

digambarkan sebagai aktivitas dari satu atau lebih organisasi yang berelasi.

15

a. MYSQL

Menurut Kustiyahningsih dan Anamisa (2011:146) "MYSQL dapat

didefinisikan sebagai sistem manajemen database". Database sendiri

merupakan struktur penyimpanan data. Untuk menambah, mengakses dan

memproses data yang disimpan dalam sebuah database komputer, diperlukan

sistem manajemen database seperti MYSQL Server".

Gambar II.1

Tampilan PhpMyAdmin

b. XAMPP

Menurut Sidik (2014:72) bahwa “Xampp (X(Windows/Linux) Apache Mysql

PHP dan Perl) merupakan paket server web PHP dan database MySQL yang

paling populer dikalangan pengembang web dengan menggunakan PHP dan

MySQL sebagai database nya”.

16

Gambar II.2

Xampp Control Panel

c. Aplikasi Yang Digunakan

a. Adobe Dreamweaver CS6

Menurut Madcoms (2011:3), Adobe Dreamweaver CS6 adalah software

terkemuka untuk membangun dan mengedit web dengan menyediakan

kemampuan visual dan tingkat kode, yang dapat digunakan untuk

membuat website berbasis standar dan desain untuk desktop, mobile,

smartphone, tablet, dan perangkat lainnya. Menurut Madcoms (2010:10)

welcome screen Dreamweaver terdapat beberapa bagian yang sangat

berguna untuk pekerjaan, antara lain:

1) Create New: bagian ini menampilkan beberapa pilihan jenis lembar

kerja baru yang akan dibuka dalam Adobe Dreamweaver CS6.

2) Open a recent Item: bagian ini merupakan file yang pernah dibuka atau

dibuat sebelumnya dalam lembar kerja Adobe Dreamweaver CS6.

Klik ikon Open untuk membuka file lain.

17

3) Top Feature : bagian ini menampilkan fitur-fitur terbaru dan

terpopuler dari Adobe Dreamweaver CS6.

Gambar II.3

Tampilan Awal Lembar Kerja Dreamweaver CS6

b. Adobe Photoshop CS5

Adobe Photoshop atau biasa disebut Photoshop, adalah perangkat lunak

editor citra buatan Adobe Systems yang dikhususkan untuk pengeditan foto

atau gambar dan pembuatan efek (www.ilmuphotoshop.com, 2014). Ada

tiga komponen penting ketika kita bekerja dengan Photoshop, antar lain:

EA. MenuBar : Ini menu didalam lembar Photoshop.

EB. ToolBox : Tools untuk mengedit foto atau gambar di Photoshop.

EC. Side Bar : Layer, Channel, Navigator dll.

18

Gambar II.4

Tampilan Awal Lembar Kerja Photoshop

4. Model Pengembangan Perangkat Lunak

Menurut Rosa dan Shalahuddin (2013:28) model air terjun (waterfall)

sering juga disebut model sekuensi liner (Sequential Linear) atau alur hidup

perangkat lunak secara sekuensial atau terurut dimulai dari analisis, desain,

pengkodan, pengujian dan tahap pendukung (support) Langkah-langkah yang

penting dalam model waterfall menurut Rosa dan Shalahudin (2013:28) adalah:

a. Analisa Kebutuhan Perangkat Lunak

Proses pengumpulan kebutuhan dilakukan secara intensif untuk

menspesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat

lunak seperti apa yang dibutuhkan oleh user. Spesifikasi kebutuhan perangkat

lunak pada tahap ini perlu untuk di dokumentasikan.

19

b. Desain Sistem dan Perangkat Lunak

Desain perangkat lunak adalah proses multi langkah yang fokus pada desain

pembuatan program perangkat lunak termasuk struktur data, arsitektur

perangkat lunak, representasi antar muka, dan prosedur pengkodean. Tahap ini

mentranslasikan kebutuhan perangkat lunak dari tahap analisis kebutuhan ke

representasi desain agar dapat di implementasikan menjadi program pada

tahap selanjutnya. Desain perangkat lunak yang dihasilkan pada tahap ini juga

perlu di dokumentasikan.

c. Pembuatan Kode Program

Desain harus ditranslasikan kedalam program perangkat lunak. Hasil dari

tahap ini adalah program komputer sesuai dengan desain yang telah dibuat

pada tahap desain.

d. Pengujian

Pengujian fokus pada perangkat lunak secara segi logis dan fungsional untuk

memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk

meminimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan

sesui dengan yang diinginkan.

e. Pendukung (support) atau pemeliharaan (maintenance)

Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan

ketika sudah dikirimkan ke user. Perubahan bias 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

20

spesifikasi untuk perubahan perangkat lunak yang sudah ada, tapi tidak untuk

membuat perangkat lunak baru.

Langkah-langkah penting tersebut dalam bentuk gambar dapat dilihat pada

Gambar II.5 dibawah ini:

Sumber: Rosa dan Shalahuddin (2013:29)

Gambar II.5

Ilustrasi Model Waterfall

2.2. Teori Pendukung

1. Struktur Navigasi

Menurut Binanto (2010:268) “Struktur Navigasi adalah gabungan dari

struktur referensi informasi situs web dan mekanisme link yang mendukung

pengunjung untuk melakukan penjelajahan situs. Ada empat macam bentuk dasar

yaitu :

a. Struktur Navigasi Linear

Struktur navigasi linear 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

Sistem Rekayasa Informasi

Analisis

Desain

Pengkodean

Pengujian

21

akan melakukan navigasi secara berurutan,

dalam frame atau byte informasi satu ke yang lainnya.

Sumber: Binanto (2010:269)

Gambar II.6

Struktur Navigasi Linear

b. Struktur Navigasi Hirarki

Struktur dasar ini disebut juga struktur linier dengan percabangan karena

pengguna melakukan navigasi disepanjang cabang pohon struktur yang

terbentuk oleh logika isi.

Sumber: Binanto (2010:269)

Gambar II.7

Struktur Navigasi Hirarki

c. Struktur Navigasi Tidak Berurut (Non-Linear)

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

22

Page, pengguna akan melakukan navigasi dengan bebas melalui isi

proyek dengan tidak terikat dengan jalur yang sudah ditentukan

sebelumnya.

Sumber: Binanto (2010:270)

Gambar II.8

Struktur Navigasi Non Linear

d. Struktur Navigasi Campuran (Composite)

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.

Sumber: Binanto (2010:270)

Gambar II.9

Struktur Navigasi Campuran

23

2. Entity Relationship Diagram

Menurut Yakub (2008:25) "ERD merupakan suatu model jaringan yang

menggunakan susunan data yang disimpan pada sistem secara abstrak. ERD juga

menggambarkan hubungan antara satu entitas yang memiliki sejumlah atribut

dengan entitas yang lain dalam suatu sistem yang terintegrasi”. Model data ini

juga akan membantu pada saat melakukan analisis dan perancangan basis data,

karena model data ini akan menunjukan bermacam-macam data yang dibutuhkan

dan hubungan antar data.

Menurut Yakub (2008:26) ERD terbagi atas tiga komponen, yaitu :

a. Entitas (Entity)

Entitas, yaitu kumpulan dari objek yang dapat di identifikasikan secara unik.

b. Relasi (Relation)

Relasi, yaitu hubungan yang terjadi antara satu atau lebih entitas. Jenis

hubungan antara lain; satu ke satu, satu ke banyak, dan banyak ke banyak.

c. Atribut (Atribute)

Atribut, yaitu karakteristik dari entity atau relasi yang merupakan penjelasan

detail tentang entitas.

d. Hubungan antara entity dengan atributnya dan himpunan entitas dengan

himpunan relasinya.

24

Di dalam ERD juga dikenal dengan derajat relasi atau kardinalitas.

Menurut Yakub (2008:33) kardinalitas yaitu “kardinalitas relasi menunjukan

maksimum entitas yang dapat berelasi dengan entitas pada himpunan entitas.

Dapat berupa satu ke satu (one-to-one), satu kebanyak (one-to-many), dan banyak

ke banyak (many-to-many)”. Penjelasan ketiga kardinalitas tersebut akan

dijelaskan dibawah ini :

a. One-to-one

Hubungan antara lain file pertama dan file kedua adalah satu berbanding satu

Sumber: Yakub (2008:33)

Gambar II.10

Hubungan One-to-one

b. One-to-many

Hubungan antara file pertama dan file kedua adalah satu berbanding banyak

atau dapat pula dibalik menjadi banyak berbanding satu.

Sumber: Yakub (2008:33)

Gambar II.11

Hubungan One-to-many

1 M

1 1

25

c. Many-to-many

Hubungan antara file pertama dan kedua adalah banyak berbanding banyak.

Sumber: Yakub (2008:33)

Gambar II.12

Hubungan Many-to-many

3. Derajat Relasi (Kardinalitas)

Model relasi ini berdasarkan persepsi dunia nyata diantaranya humpunan

objek dasar dan relasi antar entitas (Yakub, 2008:33).

a. Satu ke Satu (One to One)

Setiap entitas pada himpunan entitas A berhubungan dengan paling banyak

dengan satu entitas pada himpunan entitas B, begitu juga sebaliknya.

Sumber: Yakub (2008:33)

Gambar II.13

Kardinalitas Relasi Satu ke Satu

M M

26

b. Satu ke Banyak (One to Many)

Setiap entitas pada himpunan entitas A dan dapat berhubngan dengan banyak

entitas pada himpunan entitas B, tetapi tidak sebaliknya, dimana setiap entitas

pada himpunan entitas berhubungan dengan paling banyak dengan satu entitas

pada himpunan entitas A.

Sumber: (Yakub:34)

Gambar II.14

Kardinalitas Relasi Satu ke Banyak

c. Banyak ke Banyak (Many to Many)

Setiap entitas pada himpunan entitas A dapat berhubungan dengan banyak

entitas pada himounan entitas B, demikian, juga sebaliknya. Berikut

kardinalitas banyak ke banyak dapat dilihat pada gambar dibawah ini.

Sumber: (Yakub:35)

Gambar II.15

Kardinalitas Relasi Banyak ke Banyak

27

4. Logical Record Structure (LRS)

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

Entity Relational Ship (ER) beserta atributnya sehingga bisa terlihat hubungan-

hubungan antar entitas”.

Dalam pembuatan LRS terdapat 3 hal yang dapat mempengaruhi yaitu:

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

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

dengan entitas yang memiliki atribut yang lebih sedikit.

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.

5. Pengujian Web

Menurut Rosa dan Shalahuddin (2013:275) mengemukakan bahwa:

Pengujian adalah satu set aktifitas yang direncanakan dan sistematis untuk

menguji atau mengevaluasi kebenaran yang diinginkan. Pada perangkat lunak ada

sebuah pengujian elemen sebuah topik yang memiliki cakupan luas dan sering

dikaitkan dengan verifikasi (verification) dan validasi (validation) (V&V).

Pengujian untuk verifikasi dilakukan mulai dari lingkup yang kecil naik

ke lingkup yang besar seperti pada Gambar II.12.

28

Sumber: Rossa dan Shalahuddin (2013:275)

Gambar II.16

Hirarki Pengujian Sistem

Sedangkan pengujian untuk validasi memiliki beberapa pendekatan

sebagai berikut:

a. Black-Box Testing (Pengujian Kotak Hitam)

Black Box Testing yaitu menguji perangkat lunak dari segi spesifikasi

fungsional tanpa menguji desain dan kode program. Pengujian dimaksudkan

untuk mengetahui fungsi-fungsi masukan, dan keluaran dari perangkat lunak

sesuai dengan spesifikasi yang dibutuhkan. Pengujian kotak hitam dilakukan

dengan membuat kasus uji yang bersifat mencoba semua fungsi dengan

memakai perangkat lunak apakah sesuai dengan spesifikasi yang dibutuhkan.

Kasus uji yang dibuat untuk melakukan pengujuan kotak hitam harus dibuat

dengan kasus benar dan kasus salah, misalkan untuk proses login maka kasus

uji yang dibuat adalah:

1) Jika user memasukan nama pemakai (username) dan kata sandi

(password) yang benar.

29

2) Jika user memasukan nama pemakai (username) dan kata sandi

(password) yang salah, misalnya nama pemakai benar tapi kata sandi

salah, atau sebaliknya, atau keduanya salah.

b. White-Box Testing (Pengujian Kotak Putih)

White Box Testing yaitu menguji pernagkat lunak dari segi desain dan kode

program apakah mampu menghasilkan fungsi-fungsi, masuk, dan keluaran

sesuai dengan spesifikasi kebutuhan. Pengujian kotak putih dilakukan dengan

memeriksa lojik dari kode program. Pembuatan kasus uji bisa mengikuti

standar pengujian dari standar pemrograman yang seharusnya. Pengujian

kotak putih misalkan menguji alur (dengan menelusuri) pengulangan (looping)

pada logika pemrograman seperti ilustrasi berikut:

Sumber: Rosa dan Shalahuddin (2013:276)

Gambar II.17

Pengujian Kotak Putih