7

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Menurut Tim EMS (2014:1) ”Website adalah apa yang anda lihat via browser,

sedangkan yang disebut sebagai (web) sebenarnya adalah sebuah aplikasi web, karena

melakukan action tertentu dan membantu anda melakukan kegiatan tertentu”.

2.1.1. Website

1. Internet

Menurut Wahyuningsih dan Makmur (2017:7) “Internet merupakan singkatan

dari interconnected networking yaitu sistem yang menghubungkan antar jaringan

dengan memanfaatkan kemajuan teknologi telekomunikasi menggunakan satelit”.

2. Website

Menurut Tim EMS (2014:2) Menyimpulkan bahwa:

Website adalah kumpulan halaman web yang diletakkan dalam satu

tempat/site/situs. Jadi, di dalam website terdapat halaman-halaman web beserta

file-file pendukungnya, seperti gambar, video, dan file digital lain yang

diletakkan dalam satu tempat yang diidentifikasi melalui nama domain (domain

name) dan alamat ip (IP address).

Sedangkan menurut Josi (2016:1) “Website atau situs dapat diartikan sebagai

kumpulan halaman yang menampilkan informasi data teks, data gambar diam

atau gerak, data animasi, suara, video dan gabungan dari semuanya baik yang

bersifat statis maupun dinamis yang membentuk suatu rangkaian bangunan yang

saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan

halaman (hyperlink)”.

Menurut Tim EMS (2014:8) ada beberapa jenis website di zaman sekarang,

yaitu:

8

a. Website Affiliate

Adalah portal yang tidak sekedar berupa CMS, namun juga bisa

mensindikasi konten dari pihak ketiga.

b. Website Arsip

Website ini menyimpan informasi-informasi penting di internet. Jadi

fungsinya mirip perpustakaan online yang menyimpan hal-hal penting dan

menarik di internet.

c. Website Blog

Website ini digunakan untuk menyimpan informasi yang dimiliki seorang

individu atau perusahaan dan memungkinkan informasi tersebut diberi

komentar oleh user.

d. Website Konten

Website konten adalah website yang menawarkan informasi yang berguna

ke pembacanya.

e. Website Korporat

Website Korporat adalah Website yang dimiliki oleh perusahaan, dipakai

untuk menyampaikan informasi-informasi dalam berbagai aspek yang dimiliki

oleh perusahaan atau organisasi tersebut.

f. Website e-commerce

Website e-commerce atau sering juga disebut website toko online yang

memungkinkan terjadinya transaksi barang dan jasa melalui website tersebut.

3. Aplikasi Berbasis Web

a. XAMPP

9

Menurut Ardhana (2017:1) “XAMPP adalah perangkat lunak gratis yang

bebas digunakan, XAMPP berfungsi sebagai server yang berdiri sendiri

(localhost), yang terdiri dari Apache HTTP Server, MySQL database dan

Perl”.

b. Sublime Text

Menurut Ardhana (2017:3) “Sublime Text merupakan sebuah syntax editor

yang menggunakan Phyton API”. Sublime Text mempunyai fitur plugin

tambahan yang mempermudah bagi penggunanya.Tidak hanya memiliki fitur

yang menarik, Sublime Text juga menampilkan desain yang simpel dan

memiliki ciri khas tersendiri sehingga menjadikan Sublime Text terkesan

elegan untuk sebuah text editor.

2.1.2. Bahasa Pemrograman

Dalam pembuatan website tentu menggunakan bahasa pemrograman untuk

dapat menerjemahkan setiap perintah dalam website yang pada saat diakses. Berikut

ini adalah bahasa pemrograman dan framework yang penulis gunakan dalam

merancang website yaitu :

1. HTML

Menurut Tim EMS (2016:2) “HTML adalah singkatan dari Hypertext Markup

Language, Bahasa pemrograman ini terdiri dari tag dan aturan-aturan yang

memungkinkan anda membuat dokumen hypertext. Halaman web adalah dokumen

hypertext”.

Sedangkan menurut Winarno dkk (2015:28) “HTML adalah bahasa yang

mengatur bagaimana tampilan isi dari situs web”. Di dalam HTML ada tag-

10

tagdimana tag berfungsi menyediakan informasi berkaitan dengan sifat dan struktur

konten serta referensi untuk gambar dan media lainnya.

2. PHP

Menurut Tim EMS (2014:59) “PHP adalah singkatan dari PHP Hypertext

Preprocessor.Saat pertama kali dikembangkan oleh programmer bernama Resmus

Lerdoff, PHP awalnya adalah singkatan dari Personal Home Page Tools”.

3. AJAX

Menurut Tim EMS (2016:119) “AJAX merupakan teknik untuk membuat

halaman web yang responsif dan dinamis”. AJAX memungkinkan halaman web

untuk di-update secara sinkron di mana proses pertukaran data dengan ukuran kecil

bisa dilakukan di belakang layar.

Hal tersebut membuat anda bisa meng-update bagian halaman web tanpa harus

melakukan loading ulang keseluruhan halaman. Berikut ini cara kerja AJAX ketika

ada event di website :

11

Sumber : Tim EMS (2016:119)

Gambar II. 1. Cara Kerja AJAX

AJAX tersusun dari beberapa teknologi yang berbasis pada standar internet.

Teknologi-teknologi tersebut adalah sebagai berikut :

a. XMLHttpRequest: untuk pertukaran data dengan server secara sinkron.

b. JavaScript/DOM: untuk menampilkan atau berinteraksi dengan informasi

c. CSS: untuk memberi style pada data.

d. XML: sering digunakan sebagai format untuk transfer data.

Dengan berbekal keempat teknologi tersebut, aplikasi AJAX bersifat independen

terhadap browser dan platform sehingga bisa digunakan di mana saja.

4. CSS

Menurut Winarno dkk (2015:69) ”CSS merupakan singkatan dari Cascading

Style Sheet”. CSS berfurngsi mendefenisikan bagaimana elemen HTML

ditampilkan.Kenapa CSS sangat penting? Ini karena pada awalnya HTML tidak

An event occurs

Create an

XMLHttpRequest

object

Send HttpRequest

Browser

Proccess HTTPRequest

Send HttpRequest

Server

Process the returned

data using

JavaScript

Update page content

Browser

Internet

Internet

12

pernah diniatkan untuk berisi tag untuk pemformatan dokumen. HTML hanya

diniatkan untuk mendefenisikan konten dokumen saja.

5. JavaScript

Menurut Winarno dkk (2014:1) “JavaScript, ditinjau dari jenisnya adalah bahasa

jenis scripting”. Karena berupa bahasa scripting seperti HTML, maka JavaScript

sangatlah ringan. Cocok diletakkan di file web yang di transfer via jaringan internet.

6. jQuery

Menurut Winarno dkk (2014:51) “jQuery adalah sebuah framework yang

memudahkan penerapan JavaScript”. jQuery adalah sebuah library JavaScript yang

memiliki motto “write less do more”. Artinya dengan mengetik kode yang sedikit,

ada banyak hal yang bisa anda lakukan dengan jQuery.

Menurut Winarno dkk (2014:51) Library jQuery memiliki beberapa fitur

berikut, yaitu :

a. Manipulasi HTML/DOM

b. Manipulasi CSS

c. Methodevent HTML

d. Efek dan animasi

e. AJAX

f. Utility

7. Bootstrap

Menurut Jakobus dan Marah (2016:6) “Bootstrap adalah kerangka

pengembangan web yang membantu pengembang membangun antarmuka web”.

Framework Bootstrap terdiri dari campuran antara JavaScript dan CSS, dan

menyediakan pengembang dengan semua komponen penting yang diperlukan untuk

mengembangkan pengguna web yang berfungsi penuh antarmuka.

13

Sedangkan menurut Husein dalam Josi (2016:2) “Bootstrap adalah Framework

ataupun tools untuk membuat aplikasi web ataupun website yang bersifat

responsive secara cepat, mudah dan gratis”. Kata responsive disini berarti bahwa

tampilan web (lebar dan susunan isinya dapat berubah otomatis sesuai dengan lebar

layar yang menampilkannya)

2.1.3. Basis Data

1. Database

Menurut Sukamto dan Shalahuddin (2016:43) mengemukakan bahwa “Basis

data adalah sistem terkomputerisasi yang tujuan utamanya adalah memelihara data

yang sudah diolah atau informasi dan membuat informasi tersedia saat dibutuhkan”.

Pada intinya basis data merupakan media untuk menyimpan data agar dapat

diakses dengan mudah dan cepat.

Sumber : Sukamto dan Shalahuddin (2016:44)

Gambar II. 2. Ilustrasi Basis Data

tabel 1

tabel 2

tabel n

…………….

Basis Data

14

Berdasarkan gambar di atas tujuan dibuatnya tabel-tabel di sini adalah untuk

menyimpan data ke dalam tabel-tabel agar mudah diakses. Oleh karena itu, untuk

merancang tabel-tabel yang akan dibuat maka dibutuhkan pola pikir penyimpanan

data nantinya jika dalam bentuk baris-baris data (record) dimana setiap baris terdiri

dari beberapa kolom.

2. MySQL

Menurut Sadeli (2014:10)“MySQL adalah database yang menghubungkan script

php menggunakan perintah query dan escaps character yang sama dengan php”.

3. phpMyAdmin

Menurut Sadeli (2014:10)“phpMyAdmin adalah sebuah software yang berbentuk

seperti halaman situs yang terdapat pada web server”. Fungsi dari halaman ini

adalah sebagai pengendali databaseMySQL sehingga MySQL tidak perlu repot

untuk menggunakan perintah-perintah SQL.

2.1.1 Model Pengembangan Perangkat Lunak

Menurut Sukamto dan Shalahuddin (2016:26) “SDLC atau Software

Development Life Cycle adalah proses mengembangkan atau mengubah suatu sistem

perangkat lunak dengan menggunakan model-model dan metodologi yang digunakan

orang untuk mengembangkan sistem-sistem perangkat lunak sebelumnya”. Berikut

adalah gambar model air terjun:

15

Sumber: Sukamto dan Shalahuddin (2016:29)

Gambar II. 3.

Ilustrasi Model Waterfall

1. Analisis Kebutuhan Perangkat Lunak

Prosespengumpulan kebutuhan dilakukan secara intensif untuk

mespesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat lunak

seperti apa yang dibutuhkan oleh user. Spesifikasi kebutuhan perangkat lunak pada

tahap ini perlu untuk didokumentasikan.

2. Desain

Desain perangkat lunak adalah proses multi langkah yang fokus pada desain

pembuatan program perangkat lunak, representasi antarmuka, dan prosedur

pengkodean. 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 di dokumentasikan.

Analisis Pengkodean Pengujian Desain

Sistem/Rekayasa

Informasi

16

3. Pembuatan Kode Program

Desain harus ditranslasikan ke dalam 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 secara lojik dan fungsional dan

memastikan bahwa semua bagian sudah diuji.Hal ini dilakukan untuk

meminimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan sesuai

dengan yang diinginkan.

5. Pendukung (support) atau pemeliharaan (maintenance)

Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan

ketika sudah dikirimkan ke user. Perubahan bisa terjadi karena adanya kesalahan

yang muncul dan tidak terdeteksi saat pengujian atau perangkat lunak harus

beadaptasi dengan lingkungan baru. Tahap pendukung atau pemeliharaan dapat

mengurangi proses pengembangan mulai dari analisis spesifikasi untukperubahan

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

2.2. Tools Program

2.2.1. Struktur Navigasi

Menurut Ardiansyah (2016:61) “Struktur Navigasi dapat diartikan sebagai

alur darisuatu program yang menggambarkan rancangan hubungan antar area yang

berbeda sehingga memudahkan proses pengorganisasian seluruh element website”.

Bentuk dasar dari struktur navigasi sebagai berikut :

17

1. Struktur Navigasi Linier

Struktur navigasi linier hanya mempunyai 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 akan melakukan navigasi secara

berurutan, dalam frame atau byte informasi satu ke yang lainnya.

Sumber : Ardiansyah (2016:61)

Gambar II. 4. Struktur Navigasi Linier

2. Struktur Navigasi Hierarkis

Struktur dasar ini disebut juga struktur linier dengan percabangan karena

pengguna melakukan navigasi disepanjang cabang pohon struktur yang terbentuk

oleh logika isi.

Sumber: Ardiansyah (2016:61)

Gambar II. 5. Struktur Navigasi Hierarkis

3. Struktur Navigasi Tidak Berurutan (Non-Linear)

18

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 ada percabangan non-liner ini walaupun terdapat percabangan tetep

tiap-tiap tampilan mempunyai kedudukan yang sama yaitu tidak ada Master Page

dan Slave Page, pengguna akan melakukan navigasi dengan bebas melalui isi

proyek dengan tidak terikat jalur yang sudah ditentukan sebelumnya.

Sumber: Ardiansyah (2016:61)

Gambar II. 6.

Struktur Navigasi Non-Linier

4. Struktur Navigasi Campuran (Composite)

Struktur navigasi jenis ini 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.

19

Sumber: Ardiansyah(2016:61)

Gambar II. 7.

Struktur Navigasi Composite

2.2.2. Entity Relationship Diagram (ERD)

Menurut Sukamto dan Shalahuddin (2016:53) “ERD adalah bentuk paling

awal dalam melakukan perancangan basis data relasional”. Jika menggunakan

OODBMS maka perancangan ERD tidak perlu dilakukan.ERD memiliki beberapa

aliran notasi seperti notasi Chen (dikembangkan oleh Peter Chen), Barker

(dikembangkan oleh Richard Barker, Ian Palmer, Harry Ellis), notasi Crow’sFoot,

dan beberapa notasi lain. Namun yang banyak digunakan adalah notasi

Chen.Menurut Sukamto dan Shalahuddin (2016:52) bentuk hubungan relasi dalam

ERD adalah sebagai berikut:

20

Tabel II. 1.

Hubungan Relasi dalam ERD

Nama Gambar

Binary

Tenary

N-ary

Sumber : Sukamto dan Shalahuddin (2016:52)

A. Logical Record Structure (LRS)

Menurut Kusrini dalam Nugraha dan Octasia (2016:2) “LRS (Logical Record

Structure) merupakan representasi dari struktur record-record pada tabel-tabel yang

terbentuk dari hasil relasi antar himpunan entitas pada diagram E-R”.

Sedangkan Menurut Ardiansyah (2016:53) “LRS Merupakan transformasi dari

penggambaran ERD dalam bentuk yang lebih jelas dan mudah untuk dipahami”.

Sedangkan menurut Hasugian dan Shidiq dalam Puspitasari (2016:3)

Memaparkan LRS adalah “sebuah model sistem yang digambarkan dengan sebuah

diagram-ER akan mengikuti polaaturan pemodelan tertentu dalam kaitannya dengan

R1 E2 E1

E3

R1 E2 E1

E2

E4

R1 E3 E1

21

konversi ke LRS”.maka perubahan yang terjadi adalah mengikuti aturan - aturan

berikut ini :

1. Setiap entitas akan diubah kebentuk kotak

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 hubungannya M:M (many to many) dan memiliki foreign key sebagai

primary key yang diambil dari kedua entitas yang sebelumnya saling

berhubungan.

2.2.3. Implementasi dan Pengujian Web

Menurut Husda dan Wangdra (2016:109) “Tahap implementasi sistem

merupakan tahap meletakkan sistem supaya siap digunakan. Tahap ini termasuk juga

kegiatan menulis kode program jika tidak gunakan paket perangkat lunak aplikasi”.

Tahap implementasi sistem terdiri dari langkah-langkah sebagai berikut ini :

1. Menerapkan rencana implementasi

2. Melakukan kegiatan implementasi

3. Tindak lanjut implementasi

Menurut Abror dan Jati (2016:8) “Proses pengujian sistem dilakukan untuk

menghasilkan produk aplikasi yang sesuai dengan spesifikasi pada analisis

kebutuhan”. Oleh karena itu, pengujian sistem pada aplikasi dengan standar SDLC

lebih dikenal dengan pengujian blackbox texting.Pengujian blackbox testing dengan

pengujian validasi instrumen dan validasi aplikasi.

22

Menurut Sukamto dan Shalahuddin (2016:272) memberikan batasan bahwa

“Sering perangkat lunak mengandung kesalahan (error) pada proses-proses tertentu

pada saat perangkat lunak sudah berada di tangan user”. Kesalahan-kesalahan

(error) pada perangkat lunak sering disebut dengan “bug”. Untuk menghindari

banyaknya bug maka diperlukan adanya pengujian perangkat unak sebelum

perangkat lunak diberikan ke pelanggan atau selama preangkat lunak masih terus

dikembangkan.

1. Black-Box Testing (Pengujian Kotak Hitam)

Menurut Sukamto dan Shalahuddin (2016:275) “Blackbox 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 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

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

untuk kasus proses login maka kasus uji yang dibuat 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, misalnya nama pemakai benar tapi kata sandi salah, atau sebaliknya, atau

keduanya salah.