BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Menurut Sarwono dan Prihartono (2012:22), Web atau website atau yang
sering disingkat dengan WWW merupakan teknologi yang canggih saat ini
di dalam dunia internet. WWW berisi halaman-halaman yang dapat
menampilkan teks, gambar, suara, animasi, serta elemen-elemen
multimedia lainnya dan elemen-elemen yang ditampilkan berifat interaktif.

2.1.1. Pengertian Internet dan Website

Pengertian internet menurut Priyanto dan Jauhari (2014:1), “Internet

(interconnected network) adalah jaringan global yang menghubungkan komputer-

komputer di seluruh dunia,”.

Beberapa istilah yang berhubungan dengan internet antara lain:

1. World Wide Web (WWW)

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,”.

2. Web Browser

Menurut Sibero (2011:12), “Web Browser adalah aplikasi perangkat lunak

yang digunakan untuk mengambil dan menyajikan sumber informasi

web,”

8
 9

3. Web Server

Menurut Sibero (2011:11), “ Web Server adalah sebuah komputer yang

terdiri dari perangkat keras dan perangkat lunak. Dukungan perangkat

lunak sangat dibutuhkan agar web server dapat berjalan secara optimal”.

4. HTTP (Hypertext Transfer protocol)

Menutut Priyanto dan Jauhari (2014:5), “Hypertext Transfer protocol

(HTTP) adalah protokol agar cilent dan server bisa berkomunikasi dengan

gaya request-response,”.

5. Web Hosting

Menurut Sukamto dan M. Salahudin (2008:7), “Web Hosting mengizinkan

perorangan atau organisasi membuat sebuah Website yang dapat diakses

melalui "World Wide Web,”.

Pengertian Website menurut Kustiyahningsih dan Devie (2011:4), “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,”.

Kategori Website menurut Kustiyahningsih dan Devie (2011:5) yaitu:

1. Web Statis

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

yang menampilkan informasi-informasi yang sifatnya statis (tetap). Jika

suatu Web hanya berhubungan dengan halaman Web lain dan berisi suatu

informasi yang tetap maka Web tersebut disebut statis,”.

 10

2. Web Dinamis

Menurut Kustiyahningsih dan Devie (2011:5), “Web dinamis adalah web

yang menampilkan informasi serta dapat berinteraksi dengan pengguna.

Web dinamis bersifat interaktif, tidak kaku dan terlihat lebih indah,”.

2.1.2. Bahasa Pemrograman

Terdapat banyak bahasa pemrograman dalam membangun aplikasi

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

pemrograman web yaitu:

1. Hypertext Markup Language (HTML)

Menurut Priyanto dan Jauhari (2014:13), “Hypertext Markup Language

(HTML) adalah bahasa standard yang digunakan untuk menampilkan

halaman web,”.

2. Hypertext Preposessor (PHP)

Menurut Priyanto dan Jauhari (2014:231), “ PHP Hypertext Preprocessor

atau disingkat dengan PHP ini adalah suatu bahasa scripting khususnya

digunakan untuk web delevopment. Karena sifatnya yang server side

scripting, maka untuk menjalankan PHP harus menggunakan web

server,”.

3. Cascading Style Sheet (CSS)

Menurut Andi (2014:5), “ CSS merupakan bahasa pemograman yang

khusus menangani tampilan tiap elemen di dalam dokumen HTML.

Dengan memanfaatkan CSS, struktur kode HTML kita akan terlihat rapi

dan terstruktur,”.
 11

CSS diperkenalkan untuk pengembangan website pada tahun 1996. Nama

CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat

diletakkan secara berurutan, yang kemudian akan membentuk hubungan

parent child pada setiap style.

4. JavaScript

Menurut Menurut Andi (2014:15), “ Javacript adalah bahasa pemograman

script pada browser, atau biasa disebut dengan istilah client side

programming. Javascript sendiri merupakan bahasa scripting yang

bekerja disisi client/browser sehingga website bisa lebih interaktif,”.

5. Jquery

Menurut Kadir (2013:5) yaitu, “Jquery adalah pustaka yang dibangun

dengan menggunakan javascript. Tujuannya adalah agar program

pembuatan javascript bisa dilakukan dengan ringkas,”.

2.1.3. Basis Data

Menurut Kustiyahningsih dan Devie (2011:145), “Dalam arti umum basis

data adalah sekumpulan data yang diproses dengan bantuan komputer yang

memungkinkan data dapat diakses dengan mudah dan tepat,”. Menurut

Kustiyahningsih dan Devie (2011:146), “MYSQL dapat didefinisikan sebagai

sistem manajemen database. Untuk menambah, mengakses dan memproses data

yang disimpan dalam database komputer, diperlukan sistem manajemen

database seperti MYSQL Server,”.

 12

Xampp merupakan paket tool yang berisi konfigurasi web server Apache,

PHP dan MySQL. Dengan menginstall Xampp, kita tidak perlu lagi untuk

mengkonfigurasi Apache, PHP dan MySQL secara manual.

PhpMyAdmin merupakan aplikasi yang dibuat khusus untuk mengelola

database MySQL. PhpMyAdmin juga merupakan salah satu bagian terpenting

dari Xampp.

2.1.4. Model Pengembangan Perangkat Lunak

Menurut Sukamto dan M. Shalahuddin (2013:28), “Model Air Terjun

(Waterfall) sering juga disebut model Sekuensial linier (Sequential Linear) 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).

Sumber : Sukamto dan M. Shalahuddin (2013:28)

Gambar II.1
Ilustrasi Model Waterfall
 13

1. Analisis Kebutuhan Perangkat Lunak

Pada tahap ini penulis menganalisis apa saja yang dibutuhkan untuk

membuat perancangan sistem penjualan busana muslim berbasis web yaitu

data transaksi, data produk, data member.

2. Desain

Desain perangkat lunak adalah proses multi langkah yang fokus pada

desain pembutan 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

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 adalah program komputer sesuai dengan desain yang telah dibuat

pada tahap desain.

4. Pengujian

Pengujian fokus pada perangkat lunak dari segi logic dan fungsional,

memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk

meminimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan

sesuai dengan yang diinginkan.

 14

5. Pendukung (support) Atau Pemeliharaan (maintenance)

Normalnya, ini adalah phase yang terpanjang. Sistem dipasang dan

digunakan. Pemeliharaan termasuk pembetulan kesalahan yang tidak

ditemukan pada langkah sebelumnya. Perbaikan implementasi unit sistem

dan peningkatan jasa sistem sebagai kebutuhan baru ditemukan.

2.1.5 Pengertian Adobe Dream Weaver 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.

Program ini banyak digunakan oleh pengembang web karena fitur fiturnya

yang menarik dan kemudahan penggunaannya. Versi terakhir Macromedia

Dreamweaver sebelum Macromedia dibeli oleh Adobe System yaitu versi 8.

Beberapa ini keunggulan dari Adobe Dreamweaver Cs5, diantaranya:

1. Memiliki kemampuan halaman web yang lebih konsisten karena sudah

terinstal beberapa template yang elegan dan menarik.

2. Memiliki kemudahan dan efisiensi dalam penggunaan, karena bagi para

pemula belum mengerti bahasa pemrograman. Tetapi bisa membuat

halaman web hanya dengan mengklik atau drag and drop menggunakan

mouse, serta biasa melihat halaman htmlnya selama proses desain

berlangsung. Atau dikenal dengan sebutan WYSIWYG (What You See Is

What You Get). Selain itu Adobe Dreamweaver Cs5 memiliki kemampuan

memperlihatkan tiga proses yang berbeda yaitu:

 15

a. Code View

Berfungsi untuk menampilkan halaman script HTML saja.

b. Desain View

Berfungsi menampilkan kode kode HTML yang ditulis menjadi

sebuah desain/template yang nantinya akan ditampilkan di browser.

c. Split View

Berfungsi untuk menampilkan gabungan antara Code View dan

Desain View secara bersamaan.

3. Dapat di Costum

Dreamweaver Cs5 dapat disesuaikan dengan kebutuhan yang diperlukan.

4. Mudah untuk mengupload melalui FTP

Dreamweaver Cs5 sudah dilengkapi dengan fitur FTP. FTP (File Transfer

Protocol) adalah sebuah protokol internet yang berjalan didalam lapisan

aplikasi yang merupakan standar untuk penstraferan berkas (file) komputer

antar mesin mesin dalam sebuah internetwork.

Berikut tampilan Halaman awal Adobe Dreamweaver CS5.

 16

sumber : (Madcoms : 2011)

GAMBAR II.2
Halaman Awal Dreamweaver CS5

Berikut penjelasan mengenai menu yang terdapat pada halaman awal

Dreamweaver Cs5.

1. Open a Recent Item

Terletak pada bagian kiri halaman awal merupakan pilihan untuk

membuka file ataupun recent files yang telah digunakan.

2. Create New

Terletak dibagian tengah, yang digunakan untuk membuat halaman baru.

Terdapat beberapa macam tipe file untuk format halaman web, seperti:

a. HTML (Hyper Text Markup Leanguage)

Merupakan dasar untuk pembuatan desain web.

b. ColdFusion

Merupakan bahasa scripting yang digunakan oleh Adobe

ColdFusion, BlueDragon untuk scripting server-side.

 17

c. PHP (Hypertext Preprocessor)

Merupakan bahasa pemprograman yang umum dipakai untuk

Scripting Server-Side.

d. ASP VBScript

Merupakan salah satu bahasa pemrograman web untuk menciptakan

halaman web yang dinamis.

e. XSLT (Entire Page) Extensible Stylesheet Language

Transformations

Merupakan bahasa pemrograman berdasar XML yang digunakan

untuk transformasi dokumen XML menjadi dokumen XML atau

format lainnya.

f. CSS (Cascading Style Sheet)

Merupakan bahasa stylesheet yang digunakan untuk mengatur

tampilan halaman web dan ditulis dengan HTML atau XHTML.

g. Java Script

Merupakan bahasa Scripting yang mempunyai kesamaan

penggunaan syntak bahasa pemrograman C.

h. XML (Extensible Markup Leanguage)

Merupakan markup tag seperti halnya HTML.

i. Dreamweaver Site

Berfungsi untuk membuat website baru dengan program

dreamweaver.
 18

Pada area kerja Adobe Dreamweaver CS5 terdapat berbagai macam

fasilitas yang digunakan untuk melakukan semua hal yang berkaitan dengan

aktifitas proses editing halaman web yang terdiri dari:

1. Menu Bar

Didalamnya terdapat menu File, Edit, View, Insert, Modify, Format,

Commands, Site,windows,dan help.

2. Document Windows

Menampilkan dokumen halaman web yang aktif atau dokumen yang

sedang diedit.

3. Document Toolbar

Berisi tombol tombol yang digunakan untuk mengatur dengan cepat

layar kerja dokumen pada Dreamweaver.

4. Panel Groups

Berisi untuk membantu dalam proses editing halaman web.

5. Workspace Switcher

Berfungsi untuk mengubah atau mengatur jendela kerja sesuai yang

diinginkan sehingga dapat memudahkan dalam membuat halaman

web.

6. Tag Selector

Berfungsi untuk menampilkan tag HTML dari objek yang terseleksi.

7. Property Inspector

Berfungsi untuk mengatur atau mengedit property objek objek yang

digunakan dalam halaman web

.
 19

2.2. Teori Pendukung

Untuk mendesain suatu model sistem informasi maka diperlukan peralatan

pendukung (tool program) untuk menggambarkan suatu sistem secara struktural

dan aktual dengan suatu pendekatan analisa terstruktur, tool program juga berguna

untuk mempermudah dalam pembuatan program aplikasi yang akan dibuat,

contohnya adalah dalam pembuatan logika dan algoritma program mulai dari

input, proses, dan output yang akan dihasilkan. Adapun tool program yang akan

dijelaskan sebagai model sistem yang akan dirancang yaitu :

2.2.1. Struktur Navigasi

Menurut Hakim (2009:51) “Struktur navigasi adalah Susunan Menu atau

hirarki dari suatu situs yang menggambarkan isi dari setiap halaman dan link atau

navigasi tiap halaman pada suatu situs web”. Struktur navigasi suatu situs web

sangat di pengaruhi oleh tujuan dari situs web yang akan dibuat. Struktur navigasi

termasuk struktur terpenting dalam pembuatan situs karena itu gambarannya harus

sudah ada pada tahap perencanaan.

Peta navigasi merupakan rencana hubungan dan rantai kerja dari beberapa

area yang berbeda dan dapat membantu mengorganisasikan seluruh elemen

dengan pemberian perintah dan pesan. Peta navigasi juga memberikan kemudahan

dalam menganalisa keinteraktifan seluruh obyek dan bagaimana pengaruh

keinteraktifannya terhadap pengguna.

Beberapa dasar struktur pembuatan navigasi seperti Linear (menelusuri

program secara berurutan), Non linear (tanpa dibatasi rute), Hirarki

(percabangan), Campuran (gabungan). Pada situs ini digunakan struktur navigasi

 20

campuran yang dijadikan acuan dalam membuat peta navigasi Struktur Navigasi

Hirarki.

1. Hierarchial (Hirarki)

Struktur navigasi hirarki biasadisebut 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 Second

Master Page (halaman utama kedua), dan seterusnya. Pada struktur navigasi ini

tidak diperkenankan adanya tampilan secara linier.

Sumber : ( Hakim : 2009 )

Gambar II.3
Struktur Navigasi Hirarki

2. Struktur Navigasi Linier (Satu Alur)

Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang

berurut, yang menampilkan satu demi satu tampilan layar secara berurut menurut

urutannya. Tampilan yang dapat pada struktur jenis ini adalah satu halaman
 21

sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya

atau dua halaman sesudahnya.

Sumber : ( Hakim : 2009 )

Gambar II.4

Struktur Navigasi Linier

3. Struktur Navigasi Non Linier

Struktur navigasi non linier atau struktur tidak berurut merupakan

pengembangan dari struktur navigasi linier. Pada struktur ini di perkenankan

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.

Sumber : ( Hakim : 2009 )

Gambar II.5
Struktur Navigasi Non Linier
 22

4. Struktur Navigasi Campuran

Struktur penjejakan composite (campuran) merupakan gabungan dari

ketiga struktur sebelumnya yaitu Linier, Non Linier dan Hirarki. Struktur

penjejakan ini juga biasa disebut struktur penjejakan bebas. Jika suatu tampilan

membutuhkan percabangan, maka dapat dibuat percabangan, dan bila dalam

percabangan tersebut terdapat suatu tampilan yang sama kedudukannya maka

dapat dibuat struktur Linier dalam percabangan tersebut. Struktur penjejakan ini

banyak digunakan dalam pembuatan multimedia sebab struktur ini dapat

memberikan keinteraksian yang lebih tinggi.

Sumber : ( Hakim : 2009 )

Gambar II.6
Struktur Navigasi Campuran

2.2.2. Entity Relationship Diagram

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. Entity Relationship Diagram
 23

(ERD) didasarkan pada suatu persepsi bahwa real world terdiri atas obyek-obyek

dasar tersebut.

Penggunaan Entity Relationship Diagram (ERD) relatif mudah dipahami,

bahkan oleh para pengguna yang awam. Bagi perancang atau analis sistem, Entity

Relationship Diagram (ERD) berguna untuk memodelkan sistem yang nantinya,

basis data akan di kembangkan. Model ini juga membantu perancang atau analis

sistem pada saat melakukan analis dan perancangan basis data karena model ini

dapat menunjukkan macam data yang dibutuhkan dan kerelasian antardata

didalamnya.

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

sebagai berikut :

1. Entitas

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.

Untuk menggambarkan sebuah entitas digunakan aturan sebagai berikut :

a. Entitas dinyatakan dengan simbol persegi panjang.

b. Nama entitas dituliskan didalam simbol persegi panjang.

c. Nama entitas berupa kata benda, tunggal.

d. Nama entitas sedapat mungkin menggunakan nama yang mudah

dipahami dan dapat menyatakan maknanya dengan jelas.

2. Atribut

Atribut merupakan keterangan-keterangan yang terkait pada sebuah entitas

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

pada sebuah entitas. Untuk menggambarkan atribut digunakan aturan

sebagai berikut:

a. Atribut digambarkan dengan simbol ellips.

b. Nama atribut dituliskan didalam simbol ellips.

c. Nama atribut merupakan kata benda, tunggal.

d. Nama atribut sedapat mungkin menggunakan nama yang mudah

dipahami dan dapat menyatakan maknanya dengan jelas.

3. Relasi

Relasi merupakan hubungan antara sejumlah entitas yang berasal dari

himpunan entitas yang berbeda. Aturan penggambaran relasi adalah

sebagai berikut :

a. Relasi dinyatakan dengan simbol belah ketupat.

b. Nama relasi dituliskan didalam simbol belah ketupat

c. Nama relasi berupa kata kerja aktif.

d. Nama relasi sedapat mungkin menggunakan nama yang mudah

dipahami dan dapat menyatakan maknanya dengan jelas.

2.2.3. Logical Record Structure

Menurut Hasugian dan Shidiq (2012:608) memberikan batasan bahwa

LRS adalah sebuah model sistem yang digambarkan dengan sebuah diagram-ER

akan mengikuti pola atau aturan permodelan tertentu dalam kaitanya dengan

konvensi ke LRS. Perubahan yang terjadi yaitu mengikuti aturan-aturan sebagai

berikut :

1. Setiap entitas akan diubah kebentuk kotak.

 25

2. Sebuah atribut relasi disatukan dalam sebuah kotak bersama entitas jika

hubungan yang terjadi pada diagram-ER 1:M (relasi bersatu dengan

cardinality M) atau tingkat hubungan 1:1 (relasi bersatu dengan

cardinality yang paling membutuhkan referensi).

3. Sebuah relasi dipisah dalam sebuah kotak tersendiri (menjadi entitas baru)

jika tingkat hubunganya M:M (many to many) dan memiliki foreign key

sebagai primary key yang diambil dari kedua entitas yang sebelumnya

saling berhubungan.

2.2.4. Black Box Testing

Menurut Pressman (2010:495), Black Box Testing berfokus pada

persyaratan fungsional perangkat lunak yang memungkinkan enginers untuk

memperoleh kondisi input yang sepenuhnya akan melaksanakan persyaratan

fungsional untuk sebuah program. Black Box Testing berusaha untuk menemukan

kesalahan dalam kategori berikut :

1. Fungsi yang tidak benar atau fungsi yang hilang.

2. Kesalahan antarmuka.

3. Kesalahan dalam struktur data atau akses database eksternal.

4. Kesalahan perilaku (behavior) atau kesalahan kinerja.

5. Inisialisasi dan pemutusan kesalahan.