8

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Menurut Rohi Abdulloh dalam Destiningrum & Jafar (2015), “Web

merupakan sekumpulan halaman yang terdiri dari beberapa halaman yang berisi

informasi dalam bentuk data digital baik berupa text, gambar, video, audio, dan

animasi lainnya yang disediakan melalui jalur koneksi internet”.

Pada landasan teori ini, mencantumkan beberapa konsep dasar web yang

berhubungan dalam pembuatan website ini agar pembuatannya berjalan secara

sistematis, diantaranya :

2.1.1. Sistem

Menurut Fat dalam Kristania et al. (2018), pengertian sistem sebagai berikut:

“Sistem adalah suatu himpunan suatu “benda” nyata atau abstrak (a set of thing)

yang terdiri dari bagian-bagian atau komponen-komponen yang saling berkaitan,

berhubungan. Berketergantungan, saling mendukung, yang secara keseluruhan

bersatu dalam suatu kesautan (unity) untuk mencapai tujuan tertentu secara efisien

dan efektif”.

1. Karakteristik Sistem

Menurut Hutahaean (2014), Supaya sistem itu dikatakan sistem yang baik

memiliki karakteristik yaitu:

a. Komponen

Suatu sistem terdiri dari sejumlah komponen-komponen yang saling

berinteraksi, yang artinya saling bekerja sama membentuk satu kesatuan.

9

Komponen sistem terdiri dari komponen yang berupa subsistem atau

bagian-bagian dari sistem.

b. Batasan Sistem (Boundary)

Batasan sistem merupakan daerah yang membatasi antara suatu sistem

dengan sistem yang lain atau dengan lingkungan luarnya. Batasan sistem

ini memungkinkan suatu sistem dipandang sebagai suatu sistem

menunjukan ruang lingkup (scope) dari sistem tersebut.

c. Lingkungan luar sistem (environment)

Lingkungan luar sistem (environment) adalah diluar batas dari sistem

yang mempengaruhi operasi sistem. Lingkungan dapat bersifat

menguntungkan yang harus tetap dijaga dan yang merugikan yang harus

dikendalikan, kalau tidak akan mengganggu kelangsungan hidup dari

sistem.

d. Penghubungan sistem (interface)

Penghubungan sistem merupakan media penghubung antara satu

subsistem dengan subsistem lainnya. Melalui penghubung ini

memungkinkan sumber-sumber daya mengalir dari subsistem ke

subsistem lain. Keluaran (Output) dari subsistem akan menjadi masukan

(input) untuk subsistem lain melalui penghubung.

e. Masukan Sistem (Input)

Masukan adalah energi yang dimasukkan kedalam sistem, yang dapat

berupa perawatan (maintenace input), dan masukkan sinyal (signal input).

Maintenace input adalah energi yang dimasukkan agar sistem dapat

beroperasi. Signal input adalah energi yang diproses untuk didapatkan

10

keluaran. Contoh dalam sistem komputer program adalah maintenace

input sedangkan data adalah signal input untuk diolah menjadi informasi.

f. Keluaran (Output)

Keluaran sistem adalah hasil dari energi yang diolah dan diklasifikasikan

menjadi keluaran yang berguna dan sisa pembuangan. Contoh komputer

menghasilkan panas yang merupakan sisa pembuangan, sedangkan

informasi adalah keluaran yang dibutuhkan.

g. Pengolah Sistem

Suatu sistem menjadi bagian pengolah yang akan merubah masukkan

menjadi keluaran. Sistem produksi akan mengolah bahan baku menjadi

bahan jadi.

h. Sasaran Sistem

Suatu sistem pasti mempunyai tujuan (goal) atau sasaran (objective).

Sasaran dari sistem sangat menentukan input yang dibutuhkan sistem dan

kekuatan yang akan dihasilkan sistem.

2. Klasifikasi Sistem

Menurut Hutahaean (2014), Sistem dapat diklasifikasikan dalam beberapa

sudut pandang:

a. Sistem diklasifikasikan sebagai:

1) Sistem abstrak (abstrak system)

Sistem abstrak adalah sistem yang berupa pemikiran-pemikiran

atau ide-ide yang tidak tampak secara fisik.

2) Sistem fisik (physical system)

Sistem fisik adalah sistem yang ada secara fisik.

11

b. Sistem diklasifikasikan sebagai:

1) Sistem alamiyah (natural system)

Sistem alamiyah adalah sistem yang terjadi melalui proses alam,

tidak dibuat oleh manusia. Misalnya sistem perputaran bumi.

2) Sistem buatan manusia (human made system)

Sistem buatan manuasia adalah sistem yang dibuat oleh manusia

yang melibatkan interaksi antara manusia dengan mesin (human

machine system)

c. Sistem diklasifikasikan sebagai:

1) Sistem tertentu (deterministicl system)

Sistem tertentu adalah sistem yang beroperasi dengan tingkah laku

yang sudah dapat diprediksi, sebagai keluaran sistem yang dapat

diramalkan.

2) Sistem tak tentu (probalistic system)

Sistem tak tentu adalah sistem yang kondisi masa depannya tidak

dapat diprediksi karena mengandung unsur probabilistik.

d. Sistem diklasifikasikan sebagai:

1) Sistem tertutup (close system)

Sistem tertutup adalah sistem yang tidak terpengaruh dan tidak

berhubungan dengan lingkungan luar, sistem bekerja otomatis

tanpa ada turut campur lingkungan luar. Secara teoritis sistem

tertutup ini ada, kenyataannya tidak ada sistem yang benar-benar

tertutup, yang ada hanya relatively closed system.

12

2) Sistem terbuka (Open system)

Sistem terbuka adalah sistem yang berhubungan dan terpengaruh

dengan lingkungan luarnya. Sistem ini menerima input dan output

dari lingkungan luar atau subsistem lainnya. Karena sistem

terbuka terpengaruh lingkungan luar maka harus mempunyai

pengendali yang baik.

Menurut Sutabri dalam Isty & Afifah (2018), menyimpulkan bahwa “Sistem

dapat diartikan sebagai suatu kumpulan atau himpunan dari unsur, komponen, atau

variable yang terorganisasi saling berinteraksi, saling tergantung satu sama lain dan

terpadu”.

Jadi dapat simpulkan sistem adalah suatu himpunan atau kumpulan yang

terogranisasi yang saling berinteraksi antara komponen-komponennya yang secara

keseluruhan bersatu dalam suatu kesautan (unity) untuk mencapai tujuan tertentu

secara efisian dan efektif.

2.1.2. Informasi

Menurut Turban dalam Andalia & Setiawan (2015), mengemukakan bahwa

“informasi merupakan data yang telah diorganisir sehingga memberikan arti dan nilai

kepada penerimanya”.

Sedangkan menurut Sutabri dalam Handayani & Wijianto (2018), “Informasi

adalah data yang diklasifikasikan atau diolah atau diinterpretasikan untuk digunakan

dalam proses pengambilan keputusan”.

Menurut Menurut Mc Leod dalam Imaniawan & Elsa (2016), mengatakan

suatu informasi yang berkualitas harus memiliki ciri-ciri:

1. Akurat, artinya informasi harus mencerminkan keadaan sebenarnya.

13

2. Tepat waktu, artinya informasi itu harus tersedia atau ada pada saat informasi

tersebut diperlukan, tidak besok atau tidak beberapa jam lagi.

3. Relevan, artinya informasi yang diberikan harus sesuai dengan yang

dibutuhkan.

4. Lengkap, artinya informasi harus diberikan secara lengkap.

Informasi dapat diartikan sebagai sekumpulan data yang telah diproses

sehingga menjadi sesuatu yang dapat dimengerti dan bermanfaat bagi penerimanya.

2.1.3. Sistem Informasi

Menurut Hartono dalam Mahaseptiviana et al. (2014), “Sistem Informasi

merupakan suatu sistem di dalam suatu organisasi yang mempertemukan kesbutuhan

pengolahan transaksi harian, mendukung operasi, bersifat manajerial dan kegiatan

strategi dari suatu organisasi dan menyediakan pihak luar tertentu dengan laporan-

laporan yang diperlukan”.

1. Fungsi sistem informasi

Menurut Anggraeni & Irvani (2017), fungsi sistem informasi yaitu:

a. Untuk meningkatkan aksebilitas data yang ada secara efektif dan efisien

kepada pengguna, tanpa perantara sistem informasi.

b. Memperbaiki produktivitas aplikasi pengembangan dan pemeliharaan

sistem.

c. Menjamin tersedianya kwalitas dan keterampilan dalam memanfaatkan

sistem informasi secara kritis.

d. Mengidentifikasi kebutuhan mengenai ketrampilan pendukung sistem

informasi.

e. Mengantisipasi dan memahami akan konsekuensi ekonomi.

f. Menetapkan investasi yang akan diarahkan pada sistem informasi.

14

g. Mengembangkan proses perencanaan yang efektif.

2. Komponen Sistem Informasi

Menurut Anggraeni & Irvani (2017), Komponen-komponen dari sistem

informasi adalah sebagai berikut:

a. Komponen input, adalah data yang masuk ke dalam sistem informasi.

b. Komponen model, adalah kombinasi prosedur, logika dan model

matematika yang memproses data yang tersimpan di basis data dengan

cara yang sudah ditentukan untuk menghasilkan keluaran yang

diinginkan.

c. Komponen output, adalah hasil informasi yang berkualitas dan

dokumentasi yang berguna untuk semua tingkatan manajemen serta

semua pemakai sistem.

d. Komponen teknologi, adalah alat dalam sistem informasi, teknologi

digunakan dalam menerima input, menjalankan model, menyimpan dan

mengakses data, menghasilkan dan mengirimkan output dan memantau

pengendalian sistem.

e. Komponen basis data, adalah kumpulan data yang saling berhubungan

yang tersimpan di dalam komputer dengan menggunakan software

database.

f. Komponen kontrol, adalah komponen yang mengendalikan gangguan

terhadap sistem informasi.

3. Ciri-ciri sistem informasi

Menurut Anggraeni & Irvani (2017), ciri-ciri sistem informasi yaitu:

a. Baru, adalah informasi yang didapat sama sekali baru dan segar bagi

penerima

15

b. Tambahan, adalah informasi dapat diperbarui atau memberikan tambahan

terhadap informasi yang sebelumnya telah ada.

c. Kolektif, adalah informasi yang dapat menjadi suatu koreksi dari

informasi yang salah sebelumnya.

d. Penegas, adalah informasi yang dapat mempertegas informasi yang telah

ada.

Sistem informasi dapat diartikan sebagai gabungan dari teknologi informasi

dan aktivitas orang yang menggunakan teknologi informasi untuk mendukung proses

suatu manajemen dan operasional.

2.1.4. Jasa

Menurut Zeithaml dan Bitner dalam Ningratri (2017), ”Jasa pada dasarnya

adalah seluruh aktivitas ekonomi dengan output selain produk dalam pengertian fisik,

dikonsumsi dan diproduksi pada saat bersamaan, memberikan nilai tambah dan

secara prinsip tidak berwujud (intangible) bagi pembeli pertamanya”.

Sedangkan menurut Rangkuti dalam Suratno et al. (2016), “Jasa merupakan

pemberian suatu kinerja atau tindakan tak kesat mata dari suatu pihak kepada pihak

lain. Pada umumnya jasa diproduksi dan dikomsusi secara bersamaan, dimana

interaksi antara pemberi jasa diproduksi dan dikomsusi secara bersamaan, dimana

intraksi antara pemberi jasa dan penerima jasa mempengaruhi hasil jasa tersebut”.

2.1.5. Desain

Menurut Agus Sachari dalam Utami & Hakim (2016), menyatakan bahwa

“pada awalnya desain merupakan kata baru berupa peng-Indonesiaan dari kata

design (bahasa Inggris), istilah ini melengkapi kata “rancang/rancangan/merancang”

yang dinilai kurang mengekspresikan keilmuan, keluasan dan kewibawaan profesi.

Sejalan dengan itu, kalangan insinyur menggunakan istilah rancang bangun, sebagai

16

pengganti istilah desain. Namun di kalangan keilmuan seni rupa istilah “desain” tetap

secara konsisten dan formal dipergunakan”.

Menurut Diyatama Putri dalam Utami & Hakim (2016), “Elemen-elemen

desain sendiri terdiri atas 6 hal yaitu garis (line), bentuk (shape), tekstur (texture),

ruang, ukuran, dan warna”.

1. Garis (line)

Garis adalah sebuah unsur desain yang menghubungkan antara satu titik

dengan titik lainnya sehingga tergambarlah sebuah garis dengan bentuk

lengkung (curve) atau lurus (straight). Mampu membuat keteraturan,

mengarahkan pandangan dan memberikan kesan bergerak serta memiliki

karakter tertentu. Penggunaan garis dapat diaplikasikan dalam pembuatan

grafik atau bagan.

Sumber: Utami & Hakim (2016)

Gambar II.1. Garis dan Karakter yang Ditimbulkan

2. Bentuk (Shape)

Bentuk adalah seperangkat garis yang ditempatkan berdekatan, memiliki

diameter, tinggi dan lebar. Ini merupakan obyek 2 (dua) dimensi.

Berdasarkan sifatnya, bentuk dapat dikategorikan menjadi tiga, yaitu huruf,

simbol, dan bentuk nyata (form). Selain itu hal ini dapat digunakan sebagai

perantara sebuah ide.

17

Sumber: Utami & Hakim (2016)

Gambar II.2. Bentuk Dasar

3. Tekstur (Texture)

Tekstur merupakan sebuah visualisasi dari permukaan yang dapat dinilai

dengan cara dilihat atau diraba. Pada prakteknya, tekstur sering dikategorikan

sebagai corak dari suatu permukaan benda. Tekstur dapat menambah dimensi

dan kekayaan sebuah layout, menegaskan atau membawa ke dalam sebuah

rasa atau emosi tertentu.

Sumber: Utami & Hakim (2016)

Gambar II.3. Contoh Tekstur

4. Ruang

Ruang adalah jarak yang memisahkan antar sesuatu. Biasanya digunakan

memisahkan atau menyatukan elemen-elemen layout. Ruang juga berfungsi

sebagai tempat istirahat bagi mata. Dalam bentuk fisiknya, pengidentifikasian

ruang digolongkan menjadi dua unsur, yaitu obyek (figure) dan latar belakang

(background).

18

Sumber: Utami & Hakim (2016)

Gambar II.4. Desain dengan White Space

5. Ukuran

Ukuran adalah seberapa besar atau kecil sesuatu hal. Perbandingan ukuran

satu bentuk terhadap bentuk lainnya. Dengan menggunakan elemen ini kamu

dapat menciptakan kontras dan penekan (emphasis) pada obyek desain,

sehingga orang akan tahu sisi menarik atau menonjol dari desain itu dan

melihatnya terlebih dahulu.

6. Warna

Warna merupakan media paling akhir dalam komunikasi simbolik dan yang

terpenting. Nyatanya, warna dibagi ke dalam dua section, warna yang timbul

karena sinar Red Green Blue (RGB) dan warna yang dibuat dalam unsur tinta

atau cat Cyan Magenta Yellow Black (CMYK). Dengan warna, desainer dapat

menampilkan identitas, menyampaikan pesan atau menarik perhatian serta

menegaskan sesuatu.

19

Sumber: Utami & Hakim (2016)

Gambar II.5. Unsur Warna

2.1.6. Desain Grafis

Menurut Maharta dalam Senoprabowo et al. (2019), “desain grafis yaitu

membuat, merancang suatu produk dengan kombinasi bentuk, teks, warna, dan

banyak hal lainnya yang menarik sehingga produk yang dihasilkan memiliki seni

keindahan dan tingkat pemahaman yang mudah”.

2.1.7. Logo

Menurut David E. Carter dalam Utami & Hakim (2016), “logo adalah

identitas suatu perusahaan dalam bentuk visual yang diaplikasikan dalam berbagai

sarana fasilitas dan kegiatan perusahaan sebagai bentuk komunikasi visual. Logo

dapat juga disebut dengan simbol, tanda gambar, merek dagang (trademark) yang

berfungsi sebagai lambang identitas diri dari suatu badan usaha dan tanda pengenal

yang merupakan ciri khas perusahaan”.

Menurut David E. Carter dalam Utami & Hakim (2016), “Pertimbangan -

pertimbangan tentang logo yang baik itu harus mencakup beberapa hal sebagai

berikut :

1. Original & Desctinctive, atau memiliki nilai kekhasan, keunikan, dan daya

pembeda yang jelas.

20

2. Legible, atau memiliki tingkat keterbacaan yang cukup tinggi meskipun

diaplikasikan dalam berbagai ukuran dan media yang berbeda-beda.

3. Simple atau sederhana, dengan pengertian mudah ditangkap dan dimengerti

dalam waktu yang relatif singkat.

4. Memorable, atau cukup mudah untuk diingat,karena keunikannya, bahkan

dalam kurun waktu yang lama.

5. Easily associated with the company, dimana logo yang baik akan mudah

dihubungkan atau diasosiasikan dengan jenis usaha dan citra suatu

perusahaan atau organisasi.

6. Easily adaptabel for all graphic media. Disini, faktor kemudahan

mengaplikasikan (memasang) logo baik yang menyangkut bentuk fisik,

warna maupun konfigurasi logo pada berbagai media grafis perlu

diperhitungkan pada proses pencanangan. Hal itu untuk menghindari

kesulitan-kesulitan dalam penerapannya.

Menurut John Murphy dan Michael Rowe dalam Wafa & Counselor (2016),

logo digolongkan menjadi 7 jenis yaitu :

1. Name Only Logo, Logo yang diambil sebuah nama, dengan menggunakan

gaya grafis khusus. Logo jenis ini memberi ketegasan dan pesan langsung

kepada konsumen. Contohnya : logo Yves Saint Laurent, Sony, Panasonic,

Nikon, Xerox.

2. Name / Symbol Logo, Logo yang terdiri dari nama perusahaan atau produk

dengan gaya tipografis yang berkarakter kuat, tersusun dari bentuk-bentuk

grafis seperti oval, kotak atau lingkaran. Sebagai contoh adalah logo Ford,

Du Pont, Hertz. Kelebihan logo jenis ini adalah pada bentuknya yang ringkas

dan fleksibel karena jenis logo ini sepertinya mampu berdiri sendiri.

21

3. Initial Letter Logo, Logo yang menggunakan huruf awal atau inisaial dari

nama produk atau perusahaan dan menjadikannya sebagai elemen utama logo

tersebut. Logo jenis ini terkadang menunjukkan gabungan nama pemilik

perusahaan. Contohnya adalah logo Hewlett-Packard, IBM, RCTI.

4. Pictorial Name Logo, Logo yang menggunakan nama produk atau organisasi

sebagai komponen penting dari gaya logo, dimana secara keseluruhan logo

ini memiliki gaya yang sangat khusus. Perusahaan yang menggunakan logo

ini biasanya perusahaan yang sudah cukup terkenal seperti Coca Cola,

Kodak, McDonald, Rolls Royce. Karena kuatnya image perusahaan / produk

yang memakain logo ini, maka bila terjadi peniruan logo tersebut oleh

perusahaan lain maka citra yang dihasilkan akan tetap mengacu pada produk

atau perusahaan yang ditiru.

5. Associative Logo, Logo yang berdiri bebas yang biasanya tidak memuat nama

produk atau perusahaan, tetapi memiliki asosiasi langsung dengan nama,

produk atau wilayah aktifitasnya. Contohnya logo perusahaan minyak Shell

yang menunjukkan gambar kerang sebagai asosiasi dari fosil penghasil

minyak. Jenis logo ini mempunyai daya tarik kuat dan mudah untuk

dipahami.

6. Allusive Logo, Logo yang bersifat kiasan. Logo jenis ini memiliki hubungan

yang tidak langsung antara nama dengan logonya sehingga logo jenis ini sulit

untuk dipahami, dan memerlukan waktu lebih agar orang lain bisa memahami

apa maksud dari logo yang bersangkutan. Contohnya logo Mercedes Benz

yang terdiri dari bentuk bintang segitiga yang merepresentasikan dari sistem

kemudi mobil, bentuk A pada perusahaan penerbangan Alitalia yang

dihasilkan dari bentuk ekor pesawat yang berfungsi sebagai penyeimbang.

22

7. Abstract Logo, Logo yang memiliki bentuk visual yang abtsrak. Logo jenis

ini dapat menimbulkan beragam persepsi pemahaman tergantung dari daya

pemahaman konsumen. Contohnya logo Citoen, Bakrie Brothers, dan

sebagainya. Kelebihan jenis dari logo ini adalah kemampuannya untuk tampil

dalam bermacam-macam variasi dan sangat orisinil sehingga mampu

meminimalisasikan terjadinya kemiripan sebuah logo dengan logo lainnya.

Namun kekurangannya logo ini menjadi sukar dipahami oleh konsumen

karena bentuknya yang abstrak, membuat konsumen tidak mengerti

sepenuhnya makna yang terkandung dalam logo tersebut.

2.1.6. Brosur

Menurut The ALA Glossary of Library and Information Science dalam

Ruyadi et al. (2017), menyatakan bahwa “brosur atau buklet adalah terbitan tidak

berkala yang terdiri dari satu hingga sejumlah kecil halaman, tidak terkait dengan

terbitan lain, dan selesai dalam sekali terbit. Halamannya sering dijadikan satu

biasanya memiliki sampul tapi tidak menggunakan jilid keras”.

2.1.7. Banner atau Spanduk

Menurut Nikko dalam Raharjo & Pribadi (2017), menjelaskan “spanduk atau

banner adalah “suatu kain rentang yang isinya informasi, slogan ataupun berita yang

diinformasikan kepada umum/public”. Spanduk juga dapat diartikan sebagai kain

membentang yang biasanya terletak di tepi jalan yang berisi text, berwarna serta

bergambar.

Fungsi spanduk atau banner diantaranya:

1. Spanduk dapat mempengaruhi citra produk suatu perusahaan.

2. Menimbulkan kepercayaan orang banyak, khususnya konsumen terhadap

suatu produk ataupun bisnis.

23

3. Mengingatkan kepada masyarakat umum pada suatu produk atau perusahaan.

4. Menimbulkan atau membangun loyalitas masyarakat umum atau konsumen.

Dalam mendesain spanduk atau banner ada hal-hal yang perlu diperhatikan

yaitu:

1. Layout

Ukuran spanduk disesuaikan dengan kebutuhan dan letak pemasangan

spanduk.

2. Konten

Konten spanduk dapat berupa logo, konten tulisan yang akan ditampilkan

sesuai dengan tema serta foto-foto pendukung.

3. Ketelitian.

Dalam membuat spanduk ketelitian dapat berupa ejaan penulisan, letak logo,

dan penulisan. Ketelitian diperlukan untuk mengurangi kesalahan sebelum

spanduk tersebut dicetak

4. Warna

Dalam mendesain spanduk warna disesuaikan dengan kebutuhan dan tema.

Mendesain spanduk warna disesuaikan agar terlihat kontras dan dapat dibaca

oleh pembaca secara jelas.

5. Gambar

Hal yang dipergunakan dalam untuk menarik calon konsumen adalah

pemilihan gambar/tulisan. Gambar memiliki resolusi tinggi agar tidak blur

saat cetak.

2.1.8. Object Oriented Programming (OOP)

Menurut Dharma dalam Fridayanthie & Charter (2016), “OOP (Object

Oriented Programming) adalah sebuah pendekatan untuk pengembangan suatu

24

software, dimana dalam struktur software tersebut didasarkan kepada interaksi objek

dalam penyelesaian suatu proses atau tugas”.

2.1.9. Website

Menurut Rahdian dalam Ernest (2018), “Website adalah kumpulan dari

halaman-halaman situs atau link yang biasanya terangkum dalam sebuah domain atau

subdomain yang tepatnya berada di dalam World Wide Web (WWW) di internet”.

Ada beberapa jenis-jenis web yang di golongkan berdasarkan perubahan dan

cara interaksi, berikut adalah penggolongan secara garis besar.

1. Website Statis

Website statis ialah web yang isinya jarang dirubah, contoh dari jenis website

ini adalah www.hondacengkareng.com, www.mitsubishi-motors.co.id, dan

website lainnya yang jarang terjadi perubahan.

2. Website Dinamis

Website dinamis yang menyiadakan konten atau isi yang berubah-ubah

misalkan seperti www.detik.com, www.kompas.com.

3. Website Interaktif

Website interaktif merupakan web yang digunakan untuk berinteraksi sesama

pengguna atau pengguna lainnya. Contoh website interaktif ialah jejaring

sosial, blog, forum. Pada website ini, user bisa berinteraksi dan menulis apa

yang menjadi pemikirannya.

Dan sebuah website memiliki komponen pendukung yang terdapat dalamnya

antara lain:

1. Web Browser

Menurut Ahmia & Belbachir (2018), menggambarkan bahwa “Web browser

digunakan untuk menampilkan hasil website yang telah dibuat. Web browser

25

yang sering digunakan, diantaranya Mozzila Firefox, Google Chrome, Opera,

dan UC Browser”. Aplikasi web browser ialah aplikasi yang di gunakan

untuk menampilkan halaman web agar pengunjung suatu website dapat

melihat atau membaca informasi.

Sumber: Google Chrome

Gambar II.6. Google Chrome Web Browser

2. Web Server

Menurut Fathansyah dalam Agus & Safitri (2015) menerangkan bahwa “web

server adalah Server Web merujuk pada perangkat keras (server) dan

perangkat lunak yang menyediakan layanan akses kepada pengguna melalui

protokol komunikasi Hypertext Transfer Protocol (HTTP) ataupun variannya

seperti File Transfer Protocol (FTP) dan Hypertext Transfer Protocol Secure

(HTTPS) atas berkas-berkas yang terdapat pada suatu Uniform Resource

Locator (URL) ke pemakai”.

Web Server merupakan suatu perangkat dalam server yang berfungsi untuk

menerima dan memproses permintaan dari client atau browser melalui

protokol HTTP / HTTPS dalam bentuk halaman website berupa Hypertext

Markup Language (HTML) atau Hypertext Prepocessor (PHP).

26

3. Domain

Menurut Premysl Raban.eu dalam Bjerrum & Gladrow (2017) bahwa

“domain adalah sistem global (global adressing system) yang membuat

bisanya penerjemahan alat Internet Protocol (IP) yang tersusun atas angka

menjadi nama (nama domain) dan sebaliknya”.

Domain adalah nama unik yang diberikan untuk mengidentifikasi server

komputer seperti web server dan mail server agar lebih mudah diakses tanpa

menggunakan IP address server suatu website.

4. Hosting

Menurut Premysl Raban.eu dalam Bjerrum & Gladrow (2017), menerangkan

bahwa “hosting merupakan tempat penyimpanan data website dimana

didalamnya meliputi kapasitas penyimpanan, bandwidth yang merupakan

sebuah kapasitas yang di gunakan untuk mengukur jumlah pengunjung

website serta database”.

Hosting merupakan layanan berbasis internet yang disewakan sebagai tempat

menyimpan data berupa informasi, gambar, video dan konten-konten yang

dari sebuah website sehingga dapat diakses lewat internet.

5. Internet

Menurut Greenlaw dalam Sherlyanita & Rakhmawati (2016), menyimpulkan

bahwa ”Internet adalah sebuah sistem informasi global yang terhubung secara

logika oleh address yang unik secara global yang berbasis pada Internet

Protocol (IP), mendukung komunikasi dengan menggunakan Transmission

Control Protocol (TCP)/IP, menyediakan, menggunakan dan membuatnya

bisa diakses baik secara umum maupun khusus”.

27

Internet terdiri dari jaringan-jaringan komputer kecil di seluruh dunia yang

saling terhubung dan membentuk jaringan komputer yang sangat besar.

2.1.10. Bahasa Pemrograman

Bahasa Pemrograman yang dipakai dalam perancangan website antara lain :

1. HyperText Markup Language (HTML)

Menurut Syarif et al., (2016) mengemukakan bahwa :

HyperText Markup Language (HTML) adalah sebuah bahasa markup

yangdigunakan untuk membuat sebuah halaman web, menampilkan

berbagaiinformasi di dalam sebuah penjelajah web Internet dan

formating hypertext sederhana yang ditulis kedalam berkas format

American Standard Code for Information Interchange (ASCII) agar

dapat menghasilkan tampilan wujud yang terintegerasi.

Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata

dan disimpan kedalam format ASCII normal sehingga menjadi home page

dengan perintah-perintah. HTML merupakan bahasa pemrograman standar

yang digunakan untuk membuat website, yang dapat diakses oleh browser

untuk menampilkan berbagai bentuk informasi. HTML memungkinkan user

untuk membuat dan menyusun bagian head, body, bottom dan link.

Berikut contoh penulisan koding html:

<!DOCTYPE html>

<html>

<head>

<title>Judul Dokumen</title>

</head>

<body>

<p>Ini adalah isi dari dokumen</p>

</body>

</html>

28

2. Hypertext Preprocessor (PHP)

Menurut Firman el al. (2016), mengemukakan bahwa:

PHP atau kependekan dari Hypertext Preprocessor adalah salah satu

bahasa pemrograman open source yang sangat cocok atau

dikhususkan untuk pengembangan web dan dapat ditanamkan pada

sebuah skripsi HTML. PHP merupakan bahasa scripting server – side,

dimana pemrosesan datanya dilakukan pada sisi server.

Sederhananya, serverlah yang akan menerjemahkan skrip program,

baru kemudian hasilnya akan dikirim kepada client yang melakukan

permintaan.

Berikut contoh penulisan koding php:

<?php

echo "……";

echo "………….";

echo "………….. <br />";

echo "……… <br />";

?>

3. Cascading Style Sheet (CSS)

Menurut Henderson dalam Pahlevi et al. (2018), mengemukakan bahwa “CSS

kepanjangan dari Cascading Style Sheet adalah bahasa-bahasa yang

merepresentasikan halaman web seperti warna, layout, dan font”.

Dengan menggunakan CSS, seorang web developer dapat membuat halaman

web yang dapat beradaptasi dengan berbagai macam ukuran layar. Pembuatan

CSS biasanya terpisah dengan halaman HTML. Meskipun CSS dapat

disisipkan di dalam halaman HTML. Hal ini ditujukan untuk memudahkan

pengaturan halaman HTML yang memiliki rancangan yang sama.

Berikut contoh penulisan koding php:

<html>

<head>

29

<title>………..</title>

<style type=”text/CSS”>

P {font-family: verdana;}

</style>

</head.

<body>

<p>………………</p>

</body>

</html>

4. Javascript

Menurut Kustiyahningsih dan Anamisa dalam Lavarino & Yustanti (2016),

menyimpulkan bahwa “JavaScript adalah bahasa yang berbentuk kumpulan

skrip berjalan pada suatu dokumen HTML. Bahasa ini adalah bahasa

pemrograman untuk memberikan kemampuan tambahan terhadap HTML”.

Javascript adalah bahasa pemrograman web yang digunakan untuk membuat

efek pada halaman web sehingga menjadi menarik dan interaktif. Javascript

merupakan bahasa pemrograman client side atau bahasa yang pemrosesannya

dilakukan oleh client.

Berikut ini cara penulisan skrip javascript:

<script type=”text/javascript”>

……..source code……..

</script>

30

5. JQuery

Menurut Syarif et al., (2016) menyimpulkan bahwa:

JQuery merupakan sebuah Javascript Library atau bisa disebut juga

sebagai perpustakaan dari kumpulan kode / listing Javascript yang

siap pakai.

Dalam arti sederhana, JQuery dapat digunakan untuk meringkas sebuah

listing Javascript yang panjang dalam sebuah proyek pembuatan website,

sehingga sebagai Developer Web, akan diberikan kemudahan dalam

menghadapi bagian yang mengandung Javascript. JQuery merupakan

program yang berjalan pada sisi server dan akan ditampilkan pada Browser

Web. JQuery dapat berjalan didalam HTML, atau bahasa pemrograman

berbasis web lainnya.

Berikut ini cara penulisan skrip jquery:

<!DOCTYPE html>

<html>

<head>

<title>……….</title>

<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="jquery.js"></script>

</head>

<body>

………….

</body>

</html>

31

2.1.11. Basis Data

Menurut Sutabri dalam Handayani & Wijianto (2018), mengemukakan bahwa

“Basis data (database) merupakan kumpulan data yang saling berkaitan dan

berhubungan satu dengan yang lainnya, tersimpan di perangkat keras komputer dan

perangkat lunak digunakan untuk memanipulasinya”.

Sedangkan menurut Gat (2015), “Basis data didefinisikan sebagai kumpulan

data yang terintegrasi dan diatur sedemikian rupa sehingga data tersebut dapat

dimanipulasi, diambil, dan dicari secara cepat”.

Basis data merupakan himpunan kelompok data yang saling terhubung dan

tersimpan dalam media penyimpanan elektronik yang diorganisasi sedemikian rupa

supaya dapat dimanfaatkan kembali dengan mudah dan cepat. Beberapa basis data

yang digunakan untuk pembuatan website, diantaranya :

1. My Structured Query Language (MySQL)

Menurut Kustiyahningsih dalam Firman et al. (2016) mengemukan bahwa

“MySQL adalah sebuah basis data yang mengandung satu atau sejumlah

tabel. Tabel terdiri atas sejumlah baris dan setiap baris mengandung satu atau

sejumlah tabel”.

MySQL merupakan sebuah implementasi dari sistem manajemen basis data

relasional (RDBMS) yang didistribusikan secara gratis dibawah lisensi

General Public License (GPL)

2. PhpMyAdmin

Menurut Barri et al. (2015), menyimpulkan bahwa :

PhpMyadmin adalah perangkat lunak bebas yang ditulis dalam bahasa

pemrograman PHP yang digunakan untuk menangani administrasi

MySQL melalui Jejaring Jagat Jembar (World Wide Web),

PhpMyAdmin mendukung berbagai operasi MySQL, diantaranya

(mengelola basis data, tabel-tabel, bidang (fields), relasi (relations),

indeks, pengguna (users), perijinan (permissions), dan lain-lain.

32

Sedangkan menurut Rahman dalam Nisa & Supriyanta (2015),

“PhpMyAdmin adalah sebuah software berbasis pemrograman PHP yang

dipergunakan sebagai administrator MySQL melalui browser (web) yang

digunakan untuk management database“.

Sumber : PHPMyAdmin

Gambar II.7. Tampilan PhpMyAdmin

2.1.12. Aplikasi Perangkat Lunak

1. XAMPP

Menurut Palit et al. (2015), “XAMPP adalah perangkat lunak bebas, yang

mendukung banyak sistem operasi, merupakan kompilasi dari beberapa

program”.

Fungsi XAMPP adalah sebagai server yang berdiri sendiri (localhost), yang

terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah

bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl”. Nama

XAMPP merupakan singkatan dari X (empat sistem operasi apapun), Apache,

MySQL, PHP dan Perl.

33

Sumber : XAMPP Control Panel v3.2.1

Gambar II.8. Tampilan XAMPP v3.2.1

Kelebihan menggunakan XAMPP diantaranya :

a. Mendukung teknologi web populer seperti PHP, MySQL dan Perl.

b. XAMPP dilengkapi fitur manajemen database PhpMyAdmin seperti pada

server hosting sesungguhnya, sehingga lebih mudah untuk

mengembangkan aplikasi web berbasis database.

c. XAMPP berjalan pada background sehingga tidak akan mengganggu

aktivitas pengguna.

2. Notepad ++

Menurut MADCOMS dalam Ayu & Permatasari (2018), mengemukakan

bahwa “Notepad++ adalah sebuah text editor yang sangat berguna dalam

membuat program. Notepad++ menggunakan komponen Scintilla untuk

menampilkan teks dan berkas kode sumber berbagai bahasa pemrograman

yang berjalan didalam sistem operasi Micorosoft Windows”.

34

Sumber : Notepad++

Gambar II.9. Tampilan Notepad ++

Kelebihan menggunakan Notepad++ diantaranya :

a. Notepad++ memiliki fitur auto complete pada pada kata-kata.

b. File yang belum disimpan tidak langsung hilang saat aplikasi ditutup.

c. Mempunya banyak tools didalamnya, sehingga memudahkan

penggunaannya.

2.1.13. Model Pengembangan Perangkat Lunak

Model pengembangan perangkat lunak atau biasa dikenal dengan Software

Development Life Cycle (SDLC) atau sering disebut juga System Development Life

Cycle yang digunakan untuk mengembangkan atau mengubah suatu sistem perangkat

lunak dengan menggunakan model-model dan metodologi yang dipergunakan orang

untuk mengembangkan sistem-sistem perangkat lunak sebelumnya. Metode

pengembangan perangkat lunak memiliki beberapa model, model yang digunakan

yaitu model waterfall (air terjun).

Menurut Rosa dan Shalahuddin dalam Larasati & Masripah (2017), “Model

SDLC air terjun (waterfall) sering juga disebut model sekuensial linier (sequential

linear) atau alur hidup klasik (classic life cycle). Model air terjun menyediakan

35

pendekatan alur hidup perangkat lunak secara sekuensial atau terurut dimulai dari

analisis, desain, pengodean, pengujian, dan tahap pendukung (support)”.

Langkah-langkah yang penting dalam model ini adalah sebagai berikut:

1. Analisis Kebutuhan Perangkat Lunak

Proses pengumpulan 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 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.

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 dari segi 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.

36

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.

2.1.14. Framework

Menurut Betha Sidik dalam Destiningrum & Jafar (2015), mengemukakan

bahwa “Framework adalah kumpulan intruksi-intruksi yang dikumpulkan dalam

class dan function-function dengan fungsi masing-masing untuk memudahkan

developer dalam memanggilnya tanpa harus menuliskan syntax program yang sama

berulang-ulang serta dapat menghemat waktu”,

Beberapa framework yang digunakan dalam perancangan website antara lain :

1. Bootstrap

Menurut Sengkey et al. (2015), mengemukakan bahwa “Bootstrap

merupakan Framework ataupun Tools untuk membuat aplikasi web ataupun

situs web responsive secara cepat, mudah dan gratis”.

Bootstrap terdiri dari CSS dan HTML untuk menghasilkan Grid, Layout,

Typography, Table, Form, Navigation, dan lain-lain. Di dalam bootstrap juga

sudah terdapat jQuery plugins untuk menghasilkan komponen User Interface

(UI) yang cantik seperti Transitions, Modal, Dropdown, Scrollspy, Tooltip,

Tap, Popover, Alert, Button, Carousel dan lain-lain.

37

2. CodeIgniter

Menurut Betha Sidik dalam Destiningrum & Jafar (2015), “CodeIgniter

adalah sebuah framework php yang bersifat open source dan menggunakan

metode MVC (Model, View, Controller) untuk memudahkan developer atau

programmer dalam membangun sebuah aplikasi berbasis web tanpa harus

membuatnya dari awal”.

a. Model

Bagian ini digunakan untuk mengolah basis data. Pengolahan basis data

berupa pengambilan data, menambah data, menghapus, dan

memperbaharui data dilakukan di sini. Dan bagian ini mengerjakan semua

instruksi yang berhubungan dengan basis data. Model diturunkan dari

class CI_Model, yang terdapat di pustaka codeigniter.

b. Views

View adalah bagian yang menampilkan data yang telah diolah di dalam

controller dan kemudian data berupa array atau object akan di terima oleh

view. Tampilan memang dipisahkan dari basis data dan kontrol halaman

hal ini berfungsi agar pengembang lebih mudah dalam membuat

tampilan.

c. Controller

Daur hidup aplikasi website menggunakan CI hanya berputar antara

model, view dan controller maka, controller menjadi penghubung antara

model dan view. Controller tidak langsung terhubung dengan view dan

model melainkan user harus menghubungkan secara manual melalu

perintah $this->load-> yang menjadi perintah penghubung antara model,

view, dan controller.

38

2.2. Teori Pendukung

Teori pendukung berisikan tentang alat-alat yang digunakan dalam penulisan

laporan Tugas Akhir. Alat-alat yang digunakan berfungsi sebagai dokumentasi dan

pemodelan sistem menggunakan Struktur Navigasi, Entity Relationship Diagram

(ERD), Logical Record Structure (LRS)

2.2.1. Struktur Navigasi

Menurut Ardiansyah dalam Imaniawan & Wati (2017), “Struktur Navigasi

dapat diartikan sebagai alur dari suatu program yang menggambarkan rancangan

hubungan antara area yang berbeda sehingga memudahkan proses pengorganisasian

seluruh elemen-elemen website“.

Jenis struktur navigasi menurut Binanto dalam Achyani & Arviana (2017),

adalah :

1. Linear Navigation Model

Digunakan oleh sebagian besar website. Informasi diberikan secara

sekuensial dimulai dari satu halaman. Beberapa desainer web menggunakan

satu halaman untuk masuk atau keluar dari dari website. Pengguna akan

melakukan navigasi secara berurutan dari frame atau byte informasi yang satu

ke yang lainnya.

.

Sumber : Achyani & Arviana (2017)

Gambar II.10. Struktur Navigasi Linear

39

2. Hierarki model

Diadaptasi dari top-down design. Konsep navigasi ini dimulai dari satu node

yang menjadi homepage. Dari homepage dapat dibuat beberapa cabang ke

halaman-halaman utama. Apabila diperlukan, dari tiap halaman utama dapat

dikembangkan menjadi beberapa cabang lagi. Hal ini seperti struktur organisasi

dalam perusahaan.

Sumber : Achyani & Arviana (2017)

Gambar II.11. Struktur Navigasi Hierarki

3. Nonlinear

Pengguna akan melakukan navigasi dengan bebas melalui isi proyek dengan

tidak terkait dengan jalur yang sudah ditentukan sebelumnya

Sumber : Achyani & Arviana (2017))

Gambar II.12. Struktur Navigasi Nonlinear

40

4. Komposit

Pengguna akan melakukan navigasi dengan bebas (secara non-linear), tetapi

terkadang dibatasi presentasi linear film atau informasi penting dan atau pada

data yang paling terorganisasi secara logis pada suatu hierarki.

Sumber : Achyani & Arviana (2017)

Gambar II.13. Struktur Navigasi Komposit

2.2.2. Entity Relationship Diagram (ERD)

Menurut Ladjamudin dalam Ramdhani et al. (2019), “Entity Relationship

Diagram (ERD) adalah suatu model jaringan yang menggunakan susunan data yang

disimpan dalam sistem secara abstrak. ERD merupakan model jaringan data yang

menekankan pada struktur dan relationship data”.

Menurut Iswandy dalam Anggraini et al. (2018), “ERD adalah alat

permodelan data utama dan akan membantu mengorganisasi data dalam sebuah

proyek ke dalam entitas-entitas dan menentukan hubungan antar entitas”.

Simbol-simbol yang digunakan pada ERD adalah sebagai berikut:

Tabel II.1. Simbol Entity Relationship Diagram (ERD)

Simbol Deskripsi

Entitas / Entity Entitas adalah suatu objek yang dapat

diidentifikasi dalam lingkungan pemakai.

41

Relasi Relasi menunjunkan adanya hubungan di

antara sejumlah entitas yang berbeda.

Atribut Atribut berfungsi mendeskripsikan karakter

entitas (atribut yang berfungsi sebagai key).

Garis

Garis sebagai penghubung antara relasi

dengan entitas, relasi dan entitas dengan

atribut.

Sumber: Anggraini et al. (2018)

2.2.3. Logical Record Structure (LRS)

Pengertian Logical Record Structure (LRS) menurut Simarmata & Paryudi

dalam Ramdhani et al. (2019), “LRS merupakan transformasi dari penggambaran

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

LRS hampir mirip dengan penggambaran normalisasi file, hanya saja tidak

digambarkan simbol asterix (*) sebagai simbol Primary Key (kunci utama) dan

Foreign Key (kunci tamu).

Derajat Relasi Atau Kardinalitas Ratio:

1. One to one

Setiap anggota entitas A hanya boleh berhubungan dengan satu anggota

entitas B, begitu pula sebaliknya.

2. One to many

Setiap anggota entitas A dapat berhubungan dengan lebih dari satu anggota B

tetapi tidak sebaliknya.

42

3. Many to many

Setiap entitas A dapat berhubungan dengan banyak entitas himpunan entitas

B dan demikian pula sebaliknya.

2.2.4. Implementasi dan Pengujian Web

Menurut Guntur Setiawan dalam Imaniawan & Wati (2017) menyatakan

bahwa “Impiementasi menurut Guntur Setiawan adaiah periuasan aktivitas yang

saling menyesuaikan proses interkasi antara tujuan dan tindakan untuk mencapainya

serta memerlukan jaringan pelaksana dan birokrasi yang efektif”.

Pada pengujian ini, metode yang digunakan adalah metode Black Box

Testing. Black Box Testing merupakan pengujian yang digunakan untuk mengamati

hasil dari eksekusi suatu program.

Menurut Rosa dan Shalahuddin (dalam Fridayanthie & Mahdiati, 2016)

mengemukakan bahwa “Black-box testing adalah perangkat lunak dari segi

spesifikasi fungsional tanpa menguji desain dan kode program”. Beberapa kategori

kesalahan yang diuji oleh black box testing, diantaranya:

1. Fungsi-fungsi yang salah atau hilang.

2. Kesalahan interface

3. Kesalahan dalam struktur data atau akses database eksternal

4. Kesalahan performa

5. Kesalahan inisialisasi dan terminasi.

Kasus uji yang dibuat untuk melakukan pengujian kotak hitam harus dibuat

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

uji yang dibuat adalah :

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

yang benar.

43

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

yang salah, misalnya nama pemakai benar dan kata sandi salah, atau

sebaliknya, atau keduanya.

Kelebihan blackbox testing :

1. Dapat memilih subset test secara efektif dan efisien.

2. Dapat menemukan cacat pada program

3. Dapat digunakan untuk menilai konsistensi program.