5

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Program

Pada bab ini penulis mencoba mengemukakan beberapa teori yang diambil

dalam berbagai buku sebagai pembuatan desain web dan pemrograman website.

Namun teori-teori tersebut tidak dijelaskan secara keseluruhan, melainkan hanya

bagian tertentu yang ada kaitannya serta mendukung dalam pelaksanaan pembuatan

desain web dan pemrograman website ini.

A. Website

Sebuah situs web biasanya ditempatkan setidaknya pada sebuah server web yang

dapat diakses melalui jaringan seperti internet ataupun intranet melalui alamat

internet yang dikenal dengan url. Ada dua komponen dasar didalam arsitektur web,

yaitu:

1. Web Browser

Perangkat lunak yang digunakan untuk mencari sumber-sumber informasi

didalam jaringan internet dan dapat menampilkan gambar, memutar file

multimedia, mengirim, dan menerima email serta mengelola HTML. Menurut

(Jumardi, 2019) “Web Browser digunakan untuk membaca halaman-halaman

web yang tersimpan dalam web server”. Beberapa browser paling popular

adalah Chrome, Firefox, Internet Explore, Konqueror, Opera dan Safari.

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 dan

click’ untuk pindah antar dokumen (Sidik & Pohan, 2014:5).

6

Berdasarkan pendapat yang dikemukanan diatas dapat disimpulkan bahwa, Web

Browser adalah Aplikasi perangkat lunak yang digunakan pada jaringan internet

untuk mengakses informasi, berkomunikasi serta menampikan dokumen-

dokumen web dalam bentuk format HTML.

2. Web Server

Menurut (Jumardi, 2019) mengemukakan bahwa, “Web Server merupakan

sebuah perangkat lunak server yang berfungsi sebagai jembatan komunikasi

request dan respon dari sebuah HTTP.

Contoh Web Server yang digunakan adalah Apache Web Server

3. Internet

Menurut (Kuryanti,2015) Beberapa definisi dari internet dari para

ahli,seperti yang tertuang dibawah ini :

Internet adalah Kumpulan sumber daya informasi atau kumpulan dari jaringan

komputer yang berbeda host, client dan server yang secara bersama menyediakan

dan menggunakan layanan informasi dan hubungan.

a. Internet adalah jaringan komputer skala dunia yang memungkinkan orang-

orang untuk saling berhubungan menggunakan berbagai layanan, seperti

email, chat online, transfer file, dan halaman web.

b. Internet adalah jaringan komputer terbesar yang ada di dunia pada saat ini.

Internet merupakan istilah yang diberikan untuk memberi nama jaringan

komputer saat ini.

7

c. Internet adalah sebuah jaringan yang menghubungkan komputer dari

beberapa belahan dunia untuk saling terhubung dan bertukar data serta

bertukar informasi.

B. Bahasa Pemrograman

Menurut (Suryana & Koesheryatin, 2014:29):

HTML adalah Bahasa yang digunakan untuk menulis halaman web. HTML

merupakan pengembangan dari standar pemformatan dokumen teks, yaitu

Standard Generalized Markup Language (SGML).

HTML pada dasarnya merpakan dokumen ASCII atau teks biasa, yang

dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.

1. Hypertext Prepocessor (PHP)

Menurut (Abdulloh, 2018) “PHP yaitu bahasa pemrograman web yang dapat

disisipkan dalam skrip HTML dan bekerja di sisi server”.

2. JavaScript

Menurut (Abdulloh, 2018) “JavaScript merupakan bahasa pemrograman web

yang pemrosesannya dilakukan di sisi client”. JavaScript dijalankan hanya

terjadi pada event tertentu yang terjadi pada halaman web.

3. Bootstrap

Menurut (Abdulloh, 2018) “Bootstrap merupakan salah satu framework CSS

paling populer dari sekian banyak framework CSS yang ada”.

4. JQuery

Menurut (Abdulloh, 2018) “ JQuery yaitu kumpulan fungsi JavaScript yang siap

pakai, sehingga mempermudah dan mempercepat dalam membuat kode

JavaScript”.

8

5. Casading Style Sheet (CSS)

Menurut (Abdulloh, 2018) “CSS yaitu dokumen web yang berfungsi mengatur

elemen HTML dengan berbagai property yang tersedia sehingga dapat tampil

dengan berbagai gaya yang diinginkan”.

6. Hyper Text Markup Language (HTML)

Menurut (Abdulloh, 2018) “HTML yaitu bahasa standar web yang dikelola

penggunaannya oleh W3C (World Wide Web Consortium) berupa tag-tag yang

menyusun setiap elemen dari website”.

7. CodeIgniter (CI)

Menurut (Subagia, 2018) “ CodeIgniter merupakan sebuah web framework yang

ringan dan mudah untuk digunakan”.

8. AJAX

Menurut (Subagia, 2018) “Ajax adalah singkatan dari Asynchronous Javascript

And XML, merupakan teknik untuk membuat aplikasi web yang lebih baik, lebih

cepat dan lebih interaktif ”.

C. Basis Data

Basis data terdiri 2 kata, yaitu Basis dan Data. Basis kurang lebih dapat diartikan

sebagai markas atau Gudang, tempat bersarang/terkumpul. Sedangkan data adalah

representasi fakta dunia nyata yang mewakili suatu objek seperti manusia (pagawai,

siswa, pembeli, pelanggan), barang, hewan, peristiwa, konsep, keadaan dan

sebagainya, yang diwujudkan dalam bentuk angka, huruf, simbol, teks, gambar,

bunyi atau kombinasi.

9

Menurut (Abdulloh, 2018) “Database atau basis data, adalah kumpulan

informasi yang disimpan dalam komputer secara sistematik”.

Pengelolaan basis data secara fisik tidak dilakukan oleh pamakai secara

langsung, tetapi ditangani oleh sebuah perangkat lunak (system) yang khusus.

Perangkat lunak inilah yang disebut DBMS.

1. MySQL

Menurut (Abdulloh, 2018) “Database Management System (DBMS) yaitu sistem

perangkat lunak yang menyediakan layanan bagi user untuk membuat,

mengontrol, dan mengakses database.”

D. Model Pengembangan Perangkat Lunak

Model pengembangan perangkat lunak yang akan digunakan pada perancangan

web pada penelitian ini menggunakan pengembangan perangkat lunak water fall.

Menurut (Sukamto Ariani & Shalahuddin, 2018) menjelaskan bahwa “Model

SDLC 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, pengkodean, pengujian dan tahap

pendukung (Support).

10

Berikut adalah gambar model air terjun :

Sumber : (Sukamto Ariani & Shalahuddin, 2018)

Gambar II.1

Ilustrasi Model Waterfall

Pada Gambar II.1 merupakan tahapan pengembangan perangkat lunak dengan

model waterfall. Dimana penjelasan tahapan dalam pengembangan model waterfall

adalah sebagai berikut:

1. 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 didokumentasikan

2. Desain

Desain perangkat lunak adalah proses multi langkah yang fokus pada desain

pembuatan program perangkat lunak termasuk struktur data, arsitektur perangkat

lunak, representasi antarmuka, dan prosedur pengodean. 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 didokumentasikan

11

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 dari segi logik dan fungsional untuk

memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk

meminimalisir kesalahan dan memastikan keluaran yang dihasilkan sesuai

dengan apa 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

beradaptasi dengan lingkungan baru. Tahap pendukung atau pemeliharaan dapat

mengulangi proses pengembangan mulai dari analisis spesifikasi untuk

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

lunak baru.

E. Struktur Navigasi

Struktur navigasi adalah urutan alur informasi dari suatu aplikasi multimedia.

Dengan menggunakan struktur navigasi yang tepat maka suatu aplikasi multimedia

mempunyai suatu pedoman dan arah informasi yang jelas. Dalam pembuatan aplikasi

multimedia terdapat empat macam bentuk dasar struktur navigasi yang digunakan,

yaitu: Struktur Navigasi Linear, Struktur Navigasi NonLinear, Struktur Navigasi

Hierarchi, dan Struktur Navigasi Composite.

12

1. Linear

Merupakan struktur yang hanya mempunyai satu rangkaian cerita berurut.

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. Biasanya struktur ini digunakan Multimedia

Presentasi karena tidak menuntut keinteraksian tetapi hanya memerlukan

keindahan dan kemudahan menampilkan data sebagai informasi.

Sumber : Binanto, (2010a:269)

Gambar II.2

Struktur Navigasi Linear

2. Hierarkis.

Struktur dasar ini disebut juga struktur “linear dengan percabangan” karena

pengguna melakukan navigasi di sepanjang cabang pohon struktur yang

terbentuk oleh logika isi.

13

Sumber : Binanto, (2010a:269)

Gambar II.3

Struktur Navigasi Hirarkis

3. Nonlinear

Pengguna akan melakukan navigasi dengan bebas melalui isi proyek dengan

tidak terkait dengan jalur yang sudah ditentukan sebelumnya.

Sumber : Binanto, (2010a:269)

Gambar II.4

Struktur Navigasi NonLinear

4. Composite

Pengguna akan melakukan navigasi dengan bebas (secara nonlinear), tetapi

terkadang dibatasi presentasi linier film atau informasi penting dan/atau pada

data yang paling terorganisasi secara logis pada suatu hierarki.

14

Sumber :Binanto, (2010a:269)

Gambar II.5

Struktur Navigasi Composite

F. Entity Relationship Diagram

Menurut (Sukamto Ariani & Shalahuddin, 2018) “ERD adalah bentuk paling

awal dalam melakukan perancangan basis data relasional. Jika menggunakan

OODBMS maka perancangan ERD tidak perlu dilakukan”.

Untuk memodelkan rancangan basis data menggunakan entity relationship

diagram (ERD), diperlukan serangkaian simbol-simbol. Simbol-simbol yang

dimaksud oleh (Sukamto Ariani & Shalahuddin, 2018) dijelaskan sebagai berikut.

Tabel II.1

Simbol ERD Dengan Notasi Chen

Simbol Deskripsi

Entitas/entity Entitas merupakan data inti yang akan disimpan,

benda yang memiliki data dan harus disimpan datanya

agar dapat diakses oleh aplikasi komputer, penamaan

entitas biasanya lebih ke kata benda dan belum

merupakan nama tabel

Nama_entitas

15

Attribut Field atau kolom data yang butuh disimpan dalam

suatu entitas

Atribut Kunci Primer Field atau kolom daya 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

dan beberapa kolom tersebut dapat bersifat unik

(berbeda tanpa ada yang sama)

Atribut multinilai Field atau kolom daya yang butuh disimpan dalam

satu entitas yang dapat memiliki nilai lebih dari satu

Relasi Relasi yang menghubungkan antar entitas, biasanya

diawali dengan kata kerja

Asosiasi/association

N

Penghubung antar relasi dan entitas dimana di kedua

ujungnya memiliki multiplicity kemungkinan jumlah

pemakaian

Kemungkinan jumlah maksimum keterhubungan antar

entitas satu dengan entitas yang lain disebut

kardinalitas. Misalkan ada kardinalitas ke N atau

sering disebut dengan one to many menghubungkan

entitas A dan entitas B

Sumber: (Sukamto Ariani & Shalahuddin, 2018)

Pada Tabel II.1 menjelaskan tentang Simbol Entity Relationship Diagram

(ERD) dengan notasi Chen. Dimana simbol ERD terdiri dari entitas/entity, atribut

(atribut kunci primer dan atribut multinilai), relasi dan asosiasi/associantion.

Menurut bentuk hubungan relasi dalam ERD sebagai berikut:

Tabel II.2.

Hubungan Relasi dalam ERD

Simbol Deskripsi

Binary

Nama_atribu

t

Nama_kunci_prime

r

Nama_atribu

t

Nama_rela

si

E1 E2 R

16

Tenary

N-ary

Sumber: (Sukamto Ariani & Shalahuddin, 2018

G. Logical Relationship Structure (LRS)

Menurut Simarmata dan paryudi dalam (Eka Wida Fridayanthie, 2016) “Logical

Relationship Structured (LRS) adalah representasi dari struktur record-record pada

tabel-tabel yang terbentuk dari hasil relasi antar himpunan entitas”. Menentukan

kardinalitas, jumlah tabel, dan Foreign Key (FK).

A. Pengkodean

Menurut Supranto dalam (Sukamaindrayana & Rahman Sidik, 2017)

mengemukakan bahwa “Pengkodean (coding) adalah suatu kegiatan pemberian kode

atau simbol pada keterangan-keterangan tertentu, kalau pengolahan akan dilakukan

dengan komputer elektronik”.

B. Implementasi dan Pengujian Web

Implementasi merupakan tahap menerjemahkan perancangan berdasarkan hasil

analisis. Sedangkan untuk menjamin kualitas suatu web, dibutuhkan adanya

pengujian. Pengujian ini juga dimaksdkan untuk mengidetifikasi cacat dan masalah

yang ada di web tersebut. Berikut penjelasan mengenai dua hal tersebut menurut para

ahli:

E1 E2 R

E3

E1 E2 R

E3

E3

17

1. Implementasi

Menurut (Mardiani,2014)“ Tujuan implementasi adalah untuk

mengkonfirmasikan modul program perancangan pada para pelaku sistem

sehingga user dapat memberikan masukan kepada pengembang sistem”.

2. Pengujian (Black Box Testing)

Menurut Sommerville dalam (Mulyana, 2014) menulis bahwa Pengujian

fungsional atau pengujian kotak hitam (black box testing) merupakan

pendekatan pengujian yang ujinya diturunkan dari spesifikasi program atau

komponen. Sistem merupakan kotak hitam yang perilakunya hanya dapat

ditentukan dengan mempelajari input dan output yang berkaitan.

Nama lain untuk cara ini adalah pengujian fungsional karena penguji hanya

berkepentingan dengan fungsionalitas dan bukan implementasi perangkat lunak.

Penguji memberikan input kepada komponen atau sistem dan meneliti output

yang dihasilkan. Jika output bukan merupakan yang diramalkan berarti uji

tersebut telah dengan berhasil mendeteksi masalah dengan perangkat lunak

tersebut.

2.2. Tools Program

Dalam pembuatan aplikasi terdapat tools program yang digunakan sebagai alat

bantu dalam membuat, men-debug, memelihara atau mendukung program dan

aplikasi lain.

Terdapat beberapa tools yang digunakan dalam pembuatan aplikasi ini, tools tersebut

antara lain:

A. XAMPP

Menurut (Wardana, 2016) XAMPP didefinisikan sebagai “perangkat lunak bebas

(free software) yang mendukung banyak sistem operasi, merupakan kompilasi

dari beberapa program”.

18

B. Sublime Text

Sublime text salah satu kode editor yang biasa digunakan oleh para

programmer untuk membuat suatu program. Menurut Supono dan Putratama

(2016:14) “Sublime text merupakan perangkat lunak text editor yang digunakan

untuk membuat atau meng-edit suatu aplikasi. Sublime text mempunyai fitur

plugintambahan yang memudahkan programmer”.Selain itu, menurut Faridi

(2015:3) menjelaskan bahwa “Sublime Text3 adalah editor berbasis python,

sebuah teks editor yang elegan, kaya akan fitur, cross platform, mudah

dan simpleyang cukup terkenal di kalangan developer(pengembang),

penulis dan desainer”.Jadi dapat disimpulkan bahwa sublime textialah teks

editor yang digunakan untuk membuat program aplikasi yang secara

otomatis untuk mempermudah progremer dalam mengetikkan kode editor.