6

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Konsep dasar web ini berisi konsep dasar sebagai pemahaman dasar mengenai

analisis dan desain sebuah web. Pemahaman mengenai definisi dan berbagai yang

dibangun.

2.1.1. Website

Web adalah salah satu aplikasi yang berisikan dokumen–dokumen

multimedia (teks, gambar, suara, animasi, video) di dalamnya yang mengunakan

protokol HTTP (hypertext transfer protokol) dan untuk mengakses menggunakan

perangkat lunak yang disebut browser (Hasugian, 2018).

1. Web Browser

Menurut Sibero dalam (Nisa & Supriyanta, 2015) mengemukakan bahwa “Web

Browser adalah aplikasi perangkat lunak yang digunakan untuk mengambil dan

menyajikan sumber informasi web” (Nisa & Supriyanta, 2015).

Sedangkan Menurut Utomo dalam (Prayitno & Safitri, 2015) mengemukakan

bahwa “web browser adalah alat yang digunakan untuk melihat halaman web“

(Prayitno & Safitri, 2015).

2. Web Server

Web Server adalah sebuah perangkat lunak server yang berfungsi menerima

permintaan HTTP dan HTTPS dari klien yang dikenal dengan web browser yang

umumnya berbentuk dokumen HTML (Nisa & Supriyanta, 2015).

7

2.1.2. Bahasa Pemrograman

Bahasa pemrograman merupakan suatu notasi untuk memberikan perintah

secara tepat pada program komputer (Fridayanthie, 2015) , berikut bahasa

pemrograman web yang popular diantaranya :

1. PHP

PHP juga disebut sebagai pemograman Server Side Programming, dikarenakan

PHP bersifat Open Source atau bahasa dengan hak cipta terbuka, atau dengan kata

lain pengguna diperbolehkan untuk mengembangkan kode-kode fungsi PHP

sesuai dengan kebutuhannya (Nisa & Supriyanta, 2015).

2. HTML

HTML adalah singkatan dari Hyper Text Markup Language, yaitu bahasa (aturan)

standar yang digunakan untuk menampilkan teks, gambar, video atau audio ke

dalam halaman web. Bahasa HTML merupakan bahasa yang digunakan untuk

membuat halaman website dengan menggunakan tag-tag yang telah

dideklarasikan pada halaman notepad dan dapat saling berhubungan dengan

dokumen HTML lainnya atau yang sering disebut dengan istilah link (Nisa &

Supriyanta, 2015).

3. CSS

Cascading Style Sheet (CSS) adalah suatu bahasa yang bekerja sama dengan

HTML untuk mendefinisikan bagaimana suatu isi halaman web ditampilkan atau

dipresentasikan. Presentasi ini meliputi style atau gaya teks, link, maupun tata

letak (layout) halaman (Nisa & Supriyanta, 2015).

4. Javascript

Javascript adalah bahasa yang berfungsi membuat script program yang dapat

dikenal dan dieksekusi oleh web browser dengan tujuan untuk menjadikan

halaman web lebih bersifat interaktif (Nisa & Supriyanta, 2015).

8

5. MySQL

Menurut Anhar dalam (Prayitno & Safitri, 2015) mengemukakan bahwa “MySQL

(My Structure Query Language) adalah sebuah perangkat lunak sistem

manajemen basis data SQL Database Management System atau DBMS dari

sekian banyak DBMS seperti Oracle, MS SQL, Postagre SQL dan lainnya”

(Prayitno & Safitri, 2015).

2.1.3. Basis Data

Pada intinya basis data adalah media untuk menyimpan data agar dapat

diakses dengan mudah dan cepat. Pada buku ini menggunakan basis data relasional

yang diimplementasikan dengan tabel-tabel yang saling memiliki relasi seperti pada

gambar berikut.

Sumber : (Sukamto & Shalahuddin, 2018).

Gambar II.1. Basis Data (Sukamto & Shalahuddin, 2018).

Sistem informasi tidak dapat dipisahkan dengan kebutuhan akan basis data

apapun bentuknya, entah berupa file teks ataupun Database Management System

(DBMS). Kebutuhan basis data dalam sistem informasi meliputi :

1. Memasukkan, menyimpan, dan mengambil data.

2. Membuat laporan berdasarkan data yang telah disimpan

Tujuan dari dibuatnya tabel-tabel disini adalah untuk menyimpan data

kedalam tabel-tabel agar mudah diakses. Oleh karena itu, untuk merancang tabel-

tabel yang akan dibuat maka dibutuhkan pola pikir penyimpanan data nantinya jika

9

dalam bentuk baris-baris data (record) dimana setiap baris terdiri dari beberapa

kolom(Sukamto & Shalahuddin, 2018).

2.1.4. Model Pengembangan Perangkat Lunak

Model SDLC air terjun (waterfall) sering juga disebut model sekuensial

linier(sequential linear) atau alur hidup klasik(classic life cycle). (Sukamto &

Shalahuddin, 2018). Model ini menggunakan pendekatan sistematis dan urut dimulai

dari level kebutuhan sistem yang terbagi menjadi 5 tahapan yaitu:

1. Analisis kebutuhan perangkat lunak

Proses pengumpulan kebutuhan dilakukan secara intensif untuk

menspesifikasikan kebutuhan perangkat lunak agat dapat dipahami perangkat

lunak sepereti apa yang dibutuhkan perangkat lunak pada tahap ini perlu untuk

didokumentasikan.

2. Desain

Desain perangkat lunak adalah proses multi langkah yang focus pada desain

pembuatan program perangkat lunak termasuk srtuktur data, arsitektur perangkat

lunak, representasi antarmuka, dan prosedur pengodean. Desain perangkat lunak

yang dihasilkan pada tahap ini juga perlu didokumentasikan. Dalam proses desain

perangkat lunak, penulis menjabarkannya dalam bentuk Entity Relation Diagram

(ERD), pengkodean dan struktur navigasi.

3. Pembuatan kode program

Desain harus ditranslasikan ke dalam program perangkat lunak, penulis

menerapkan rancangan desain tersebut dan membuat program sesuai dengan

rancangan yang telah dibuat sebelumnya. Tahapan pembuatan kode program

menggunakan bahasa pemrograman Mysql, javascript, HTML, CSS, dan PHP dan

menggunakan aplikasi Sublime Text 3.

10

4. Pengujian

Penggujian pada perangkat lunak berfokus pada segi lojik dan fungsional dan

memastikan bahwa semua bagian sudah diuji. Tahapan pengujian penulis

menggunakan Black Box Testing.

5. Pendukung(support) atau pemeliharaan(maintenance)

Tidak menutup kemungkinan bahwa sebuah perangkat lunak dapat mengalami

perubahan ketika sudah dikirimkan ke user. Hal tersebut bisa diakibatkan

kesalahan program, baik itu disengaja maupun tidak. Tahap pendukung atau

pemeliharaan diharapkan dapat mencegah masalah tersebut. Melakukan Back up

data pada perangkat lunak adalah salah satunya.

2.2. Teori Pendukung

2.2.1. Struktur Navigasi

“Struktur Navigasi merupakan struktur atau alur dari suatu program yang

merupakan rancangan hubungan (rantai kerja) dari beberapa area yang berbeda dan

dapat membantu mengorganisasikan seluruh elemen pembuatan Website” (Hidayat,

Marlina, & Utami, 2017). Macam-macam struktur navigasi pada website:

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 yang dapat ditampilkan pada struktur jenis ini

adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua

halaman sebelumnya atau dua halaman sesudahnya.

11

Sumber : (Hidayat, Marlina & Utami 2017).

Gambar II.2. Struktur Navigasi Linier

2. Struktur Navigasi Non Linier

Struktur navigasi non linier atau struktur tidak berbentuk merupakan

pengembangan dari struktur navigasi linier. pada struktur ini diperkenalkan

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 : (Hidayat, Marlina & Utami 2017).

Gambar II.3. Struktur Navigasi Non Linear

3. Struktur Navigasi Hirarki

Struktur navigasi hirarki biasa disebut struktur bercabang merupakan suatu

struktur yang mengandalkan untuk tempilan pada menu pertama akan disebut

sebagai Master page (halaman utama pertama), halaman utama ini mempunyai

halaman bercabang yang disebut Slave page (halaman pendukung). Jika salah satu

halaman pendukung dipilih atau diaktifkan, maka tampilan tersebut akan bernama

12

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

tidak diperkenankan adanya tampilan secara linier.

Sumber : (Hidayat, Marlina & Utami 2017).

Gambar II.4. Struktur Navigasi Hirarki.

4. Struktur Navigasi Campuran

Struktur navigasi campuran merupakan gabungan dari ketiga struktur sebelumnya

yaitu linier, non linier dan hirarki, Struktur navigasi ini banyak digunakan dalam

pembuatan website sehingga dapat memberikan ke interaksian yang lebih tinggi.

Sumber : (Hidayat, Marlina & Utami 2017).

Gambar II.5. Struktur Navigasi Campuran.

2.2.2. Entity Relation Diagram

ERD dikembangkan berdasarkan teori himpunan dalam bidang matematika.

ERD digunakan untuk pemodelan basis data relasional. Sehingga jika penyimpanan

basis data menggunakan OODBMS maka perancangan basis data tidak perlu

menggunakan ERD. ERD memiliki beberapa aliran notasi seperti notasi chen

(Sukamto & Shalahuddin, 2018). Berikut adalah simbol-simbol yang digunakan pada

ERD dengan notasi chen :

13

Tabel II. 1

ERD dengan notasi chen (Sukamto & Shalahuddin, 2018)

Simbol Deskripsi

Entitas / entity

Entitas merupakan data inti yang akan disimpan; bakal tabel pada data dan harus

disimpan datanya agar dapat diakses oleh aplikasi komputer; penamaan entitas biasanya lebih ke kata benda dan belum merupakan nama tabel.

Atribut

Field atau kolom data yang butuh disimpan dalam suatu entitas.

Atribut kunci primer

Field atau kolom data yang butuh disimpan dalam suatu entitas dan digunakan sebagai kunci akses record yang diinginkan; biasanya berupa id; kunci primer dapat lebih dari satu

kolom, asalkan kombinasi dari beberapa kolom tersebut bersifat unik.

Atribut multinilai / multivalue Field atau kolom data yang butuh disimpan dalam suatu entitas yang dapat memiliki nilai lebih dari satu.

Relasi

Relasi yang menghubungkan antar entitas; biasanya diawali dengan kata kerja.

Asosiasi / association Penghubung antara relasi dan entitas di mana di kedua ujunganya memiliki multiplicity

kemungkinan jumlah pemakaian. Kemungkinan jumlah maksimum keterhubunga antar entitas yan lain disebut dnegan kardinalitas. Misalkan ada kardinalitas 1 ke N atau yang sering di sebut dengan one to many menghubungkan entitas A dan entitas B maka ERD biasanya memiliki hubuangan binary (satu relasi

menghubungkan dua buah entitas). Beberapa metode perancangan ERD menoleransi hubungan relasi ternary(satu relasi menghubungkan tiga buah relasi) atau N-ary (satu relasi menghubungkan banyak entitas), tapi banyak metode perancangan ERD yang tidak mengizinkan hubungan ternary atau N-ary

nama_entitas

nama_atribut

nama_kunci primer

nama_atribut

14

Berikut adalah contoh bentuk hubungan relasi dalam ERD :

Tabel II. 2

Contoh ERD (Sukamto & Shalahuddin, 2018)

Nama Gambar

binary

ternary

N-ary

2.2.3. Logical Record Structure (LRS)

Menurut Tabrani dalam (Hidayat, Marlina & Utami 2017) “Logical Record

Structure terdiri dari link-link diantara tipe record, Link ini menunjukkan arah dari

satu tipe record lainnya. Banyak link dari LRS yang diberi tanda field-field yang

kelihatan pada kedua link tipe record”.

Penggambaran LRS mulai dengan menggunakan model yang dimengerti. Dua

metode yang dapat digunakan, dimulai dengan hubungan kedua model yang dapat

dikonverensikan ke LRS, metode yang lain dimulai dengan ER-diagram dan

langsung dikonversikan ke LRS.

Perbedaan LRS dan ERD adalah nama dan tipe record berada diluar field tipe

record di tempatkan. LRS terdiri dari link-link diantara tipe record. Link ini

menunjukkan arah dari satu tipe record lainnya. Banyak link dari LRS yang diberi

E1 R1 E2

E1 R1 E2

E3

E1 R1 E2

E3

E4

15

tanda field-field yang kelihatan pada kedua link tipe record (Hidayat, Marlina &

Utami 2017).

2.2.4. Implementasi dan Pengujian Web

Menurut (Sukamto & Shalahuddin, 2018) Pengujian unit fokus pada usaha

verifikasi pada unit yang terkecil pada desain perangkat lunak (komponen atau

modul perangkat lunak). Setiap unit perangkat lunak diuji agar dapat diperiksa

apakah aliran masukan (input) dan keluaran (output) dari unit sudah sesuai dengan

yang diinginkan. Pengujian unit biasanya dilakukan saat kode program dibuat.

Karena dalam sebuah perangkat lunak banyak memiliki unit-unit kecil maka untuk

menguji unit-unit kecil ini biasanya dibuat program kecil (main program) untuk

menguji unit-unit perangkat lunak.

Unit disini secara fisik dapat berupa prosedur atau fungsi, sekumpulan

prosedur atau fungsi yang ada dalam satu berkas (file) jika dalam pemrograman

terstruktur, atau kelas, bias juga kumpulan kelas dalam satu package dalam

pemrograman berorientasi objek. Ilustrasi pengujian unit adalah sebagai berikut :

Sumber : (Sukamto & Shalahuddin, 2018)

Gambar II.6. Pengujian Unit.

Setiap unit diuji menggunakan sebuah program pengujian yang khusus dibuat

untuk menguji sebuah unit menggunakan kumpulan kasus uji yang didefinisikan.

Pengujian untuk validasi memiliki beberapa pendekatan salah satunya Black-Box

16

Testing yaitu menguji 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.

Pengujian Pengujian kotak hitam dilakukan dengan membuat kasus uji yang

bersifat mecoba semua fungsi dengan memakai perangkat lunak apakah sesuai

dengan spesifikasi yang dibutuhkan. Kasus uji yang dibuat untuk melakukan

pengujian kotak hitam harus dibuat dengan kasus benar dan kasus salah, misalkan

kasus proses login maka kasus uji yang dibuat adalah:

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

benar.

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

salah misalnya nama pemakai benar tetapi kata sandi, atau sebaliknya salah atau

keduanya salah.