7

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Dalam dunia teknologi khususnya internet saat ini sangat berpengaruh

dalam dunia bisnis maupun ilmu pengetahuan. Internet menyediakan layanan

berupa website yang di dalamnya terdapat berbagai informasi dari seluruh penjuru

dunia yang dapat digunakan untuk keperluan bisnis, ilmu pengetahuan dan lain

sebagainya. (Hidayat, et al., 2017:176).

Menurut Subhan dalam Hidayat, et al. (2017:176) menjelaskan bahwa,

“Sistem informasi merupakan kumpulan data yang diolah menjadi bentuk yang

lebih berguna dan lebih berarti bagi yang menerima. Tanpa suatu informasi, suatu

sistem tidak akan berjalan dengan lancar dan akhirnya bisa mati. Dengan kata lain

sumber dari informasi adalah data.”

Menurut Fahmi dan Sugirato (2015:359) menjelaskan tentang wakaf yaitu:

Sebagaimana disebutkan dalam UU No. 41 tahun 2004 tentang wakaf dan

peraturan Badan Wakaf Indonesia nomor 4 tahun 2010 tentang pedoman

pengelolaan dan pengembangan harta benda wakaf, bahwa wakaf adalah

perbuatan hukum wakif untuk memisahkan dan/atau menyerahkan sebagian

harta benda miliknya untuk dimanfaatkan selamanya atau untuk jangka

waktu tertentu sesuai dengan kepentinganya guna keperluan ibadah

dan/atau kesejahteraan umum menurut syariah.

Harta benda wakaf ialah harta benda yang diwakafkan oleh wakif, yang

memiliki daya tahan lama dan/atau manfaat jangka panjang serta mempunyai nilai

ekonomi menurut syariah. Wakif adalah pihak yang mewakafkan harta benda

miliknya melalui ikrar wakaf yaitu pernyataan kehendak wakif yang diucapkan

secara lisan dan/atau tulisan kepada Nadzir untuk mewakafkan harta benda

8

miliknya (pasal 1). Wakif meliputi perseorangan, organisai maupun badan hukum.

Nadzir meliputi perseorangan, organisasi atau badan hukum adalah pihak penerima

harta benda wakaf dari wakif untuk dikelola dan dikembangkan sesuai dengan

peruntukanya. (Fahmi dan Sugirato, 2015:359).

2.1.1. Website

Menurut Fathurrahman (2014:2) mengemukakan bahwa:

Website merupakan kumpulan halaman yang menampilkan informasi data

teks, data gambar diam atau gerak, data animasi, suara, video dan atau

gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang

membentuk satu rangkaian bangunan yang saling terkait di mana masing-

masing dihubungkan dengan jaringan-jaringan halaman (hyperlink).

Website dikategorikan menjadi dua yaitu website statis dan website dinamis

atau interaktif. Website statis adalah website yang menampilkan informasi-

informasi yang sifatnya statis (tetap), sedangkan website dinamis adalah web yang

menampilkan informasi serta dapat berinteraksi dengan user yang sifatnya dinamis.

Sehingga untuk membuat website dinamis dibutuhkan kemampuan pemrograman

website. Secara garis besar, website bisa digolongkan menjadi 2 bagian yaitu:

1. Web Server

Menurut Sadeli dalam Supriyatna dan Nisa (2015:36) mengemukakan bahwa,

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

2. Web Browser

Menurut Ramadhani dan Nugraha (2018:192) menjelaskan bahwa,”Web

browser adalah perangkat lunak yang memungkinkan mengambil hypermedia

dengan mengetik parameter pencarian atau mengklik grafik ”.

9

2.1.2. Bahasa Pemrograman

Menurut Setiawan dalam Sukmaindrayana dan Sidik (2017:33)

mengemukakan bahwa, “Bahasa pemrograman adalah teknik komando/intruksi

standar untuk memerintah komputer yang merupakan suatu himpunan dari aturan

sintaks dan sistematik yang dipakai untuk mendefinisikan program komputer”.

Bahasa pemrograman yang penulis gunakan pada pembuatan website ini

adalah:

1. HTML (Hyper Text Markup Languange)

Menurut Setiawan (2017:16) menjelaskan bahwa, “HTML atau Hyper Text

Markup Languange merupakan sebuah bahasa pemrograman terstruktur yang

dikembangkan untuk membuat halaman website yang dapat diakses atau

ditampilkan menggunakan web browser”.

2. PHP

Menurut Setiawan (2017:54) mengemukakan bahwa:

PHP sendiri sebenarnya merupakan singkatan dari Hypertext Preprocessor,

yang merupakan sebuah bahasa scripting tingkat tinggi yang dipasang pada

dokumen HTML. Sebagian sintaks dalam PHP mirip dengan bahasa C, Java

dan Perl, namun pada PHP ada beberapa fungsi yang lebih spesifik. Sedangkan

tujuan dari penggunaan bahasa ini adalah untuk memungkinkan perancangan

web yang dinamis dan dapat bekerja secara otomatis.

3. CSS (Cascading Style Sheet)

Menurut Setiawan (2017:116) menjelaskan bahwa, “CSS merupakan salah

satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya

tampilan/layout halaman web supaya lebih elegan dan menarik”.

4. JavaScript

Menurut Setiawan (2017:194) menjelaskan bahwa, ”JavaScript adalah bahasa

scripting yang populer di sebagian besar browser. JavaScript disisipkan pada

10

halaman web menggunakan tag <script>. Kegunan javascript adalah untuk

menambah interaktif suatu website”.

Beberapa hal tentang javascript adalah sebagai berikut:

a. Open Source (semua orang dapat menggunakan secara gratis).

b. JavaScript merupakan bahasa scripting yang ringan.

c. JavaScript embeded (disisipkan) dalam html.

d. Dalam javascript, script akan langsung dieksekusi tanpa kompilasi.

5. JQuery

Menurut Sianipar dalam Hidayat, et al. (2017:176) menjelaskan bahwa,

“JQuery merupakan sebuah pustaka JavaScript yang memuat banyak perangkat

siap pakai. Perangkat-perangkat tersebut berupa kode-kode JavaScript pustaka

yang dapat langsung dipakai untuk halaman web”.

2.1.3. Basis Data

Menurut Priyadi (2014:2) menjelaskan bahwa, “Sekumpulan fakta berupa

representasi tabel yang saling berhubungan dan disimpan dalam media

penyimpanan secara digital”. Basis data yang digunakan pada website yang

dibangun, yaitu:

1. MySQL

Menurut Zefriyenni dan Santoso dalam Sukrianto (2017:20) mengemukakan

bahwa, “MySQL merupakan software RDBMS (server database) yang dapat

mengelola database dengan cepat, dapat menampung data dengan jumlah yang

besar, dapat diakses banyak user (multi-user) dan dapat melakukan suatu

proses sikron atau bersamaan (multi-threaded)”.

11

2. PhpMYAdmin

Menurut Madcoms dalam Hidayat, et al. (2017:177) menjelaskan bahwa,

“PhpMyAdmin adalah sebuah aplikasi open source yang berfungsi untuk

memudahkan manajemen MySQL”.

PhpMyAdmin dapat membuat database, membuat table, menginsert,

menghapus dan mengupdate data dengan GUI dan terasa lebih mudah, tanpa

perlu mengetikan perintah SQL secara manual. Karena berbasis web, maka

PhpMyAdmin dapat dijalankan dibanyak Operating System, selama dapat

menjalankan web server dan MySQL.

3. Xampp

Menurut Madcoms dalam Hidayat, et al. (2017:177) menjelaskan bahwa:

Xampp adalah sebuah paket kumpulan software yang terdiri dari Apache,

MySQL, phpMyAdmin, PHP, Perl, Filezilla dan lain-lain yang berfungsi untuk

memudahkan instalasi lingkungan PHP, dimana biasanya lingkungan

pengembangan web memerlukan PHP, Apache, MySQL, dan phpMyAdmin

serta software lainnya yang terkait dengan pengembangan web.

4. SQL

Menurut Rosa dan Shalahuddin (2016:50) menjelaskan bahwa, ”SQL

(Structure Query Language) adalah bahasa yang digunakan untuk mengelola

data pada RDBMS”.

2.1.4. Model Pengembangan Perangkat Lunak

Metode yang digunakan untuk pengembangan perangkat lunak ini

menggunakan metode waterfall menurut Rosa dan Shalahuddin (2016:28) yang

terbagi menjadi lima tahapan, yaitu:

12

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 perangakat 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.

13

5. Pendukung (support) atau pemeliharaan (maintenance)

Tidak menutup kemungkinan sebuah perangkat lunak mengalamai 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.

Sumber: Rosa dan Shalahuddin (2016:29)

Gambar II.1

Ilustrasi model Waterfall

2.2. Teori Pendukung

2.2.1. Struktur Navigasi

Menurut (Andre, 2014) mengemukakan bahwa, “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”. Adapun macam-macam

strukutur navigasi sebagai berikut :

14

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 pada struktur jenis ini adalah satu

halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman

sebelumnya atau dua halaman sesudahnya.

Sumber : (Andre, 2014)

Gambar II.2

Struktur Navigasi Linier

2. Struktur Navigasi Non-Linier

Struktur navigasi non-linier atau struktur tidak berurut merupakan

pengembangan dari struktur navigasi linier. Pada struktur

ini diperkenankan membuat navigasi bercabang. Percabangan yang dibuat

pada struktur nonlinier ini berbeda dengan percabangan pada struktur hirarki,

karena pada percabangan nonlinier ini walaupun terdapat percabangan, tetapi

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

Page dan Slave Page.

Sumber: (Andre, 2014)

Gambar II.3

Struktusr Navigasi Non-Linier

15

3. Struktur Navigasi Hirarki

Struktur navigasi hirarki biasa disebut 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 Master Page (halaman utama kedua) dan seterusnya. Pada struktur

navigasi ini tidak diperkenankan adanya tampilan secara linier.

Sumber : (Andre, 2014)

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 juga biasa

disebut dengan struktur navigasi bebas. Struktur navigasi ini banyak digunakan

dalam pembuatan website karena struktur ini dapat digunakan dalam pembuatan

website sehingga dapat memberikan ke-interaksian yang lebih tinggi.

Sumber : (Andre, 2014)

Gambar II.5

Struktur Navigasi Campuran

16

2.2.2. Entity Relationship Diagram

Menurut Fathansyah (2015:74) menjelaskan bahwa “Pada Model Entity-

Relationship, semesta data yang ada di dunia nyata diterjemahkan dengan

memanfaatkan sejumlah perangkat konseptual menjadi sebuah diagram data, yang

umum disebut sebagai Diagram Entity-Relationship (Diagram E-R) “.

Notasi dasar diagram ERD (Entity Relationshiop Diagram ) menurut

Priyadi (2014:20) adalah sebagai berikut:

1. Entitas merupakan notasi untuk mewakili suatu objek dengan karakteristik

sama, yang dilengkapi oleh atribut, sehingga pada suatu lingkungan nyata

setiap objek akan berbeda dengan objek lainnya. Pada umumnya, objek dapat

berupa benda, pekerjaan, tempat dan orang

2. Relasi merupakan notasi yang digunakan untuk menghubungkan beberapa

entitas berdasarkan fakta pada suatu lingkungan.

3. Atribut merupakan notasi yang menjelaskan karakteristik suatu entitas dan juga

relasinya. Atribut dapat sebagai key yang bersifat unik, yaitu Primary Key atau

Foreign Key. Selain itu, atribut juga dapat sebagai atribut deskriptif saja, yaitu

sebagai pelengkap deskripsi suatu entitas dan relasi.

4. Garis penghubung merupakan notasi untuk merangkaikan keterkaitan antara

notasi-notasi yang digunakan dalam Diagram E-R, yaitu entitas, relasi dan

atribut.

Kardinalitas relasi yang terjadi di antara dua himpunan entitas (misalnya A

dan B) menurut Priyadi (2014:5) adalah sebagai berikut:

a. Kardinalitas satu ke satu (1:1), mempunyai arti bahwa setiap satu entitas pada

himpunan entitas A hanya dapat berelasi dengan satu entitas saja pada

17

himpunan entitas B. Begitupun sebaliknya, bahwa setiap satu entitas pada

himpunan entitas B hanya dapat berelasi dengan satu entitas saja pada

himpunan entitas A.

Sumber : Priyadi (2014:6)

Gambar II.6

Kardinalitas Satu ke Satu

b. Kardinalitas satu ke banyak (1:N), mempunyai arti bahwa setiap satu entitas

pada himpunan entitas A dapat berelasi dengan banyak entitas pada himpunan

entitas B. Namun tidak demikian untuk sebaliknya, bahwa beberapa entitas

pada himpunan entitas B hanya dapat berelasi dengan satu entitas saja pada

himpunan entitas A.

Sumber : Priyadi (2014:6)

Gambar II.7

Kardinalitas Satu ke Banyak

18

c. Kardinalitas banyak ke satu (N:1), mempunyai arti bahwa beberapa entitas

pada himpunan entitas A hanya dapat berelasi dengan satu entitas saja pada

himpunan entitas B. Namun tidak demikian untuk sebaliknya, bahwa setiap

satu entitas pada himpunan entitas B dapat berelasi dengan beberapa entitas

pada himpunan entitas A.

Sumber: Priyadi (2014:7)

Gambar II.8

Kardinalitas Banyak ke Satu

d. Kardinalitas banyak ke banyak (N:N), mempunyai arti bahwa beberapa entitas

pada himpunan entitas A dapat berelasi dengan banyak entitas pada himpunan

entitas B. Demikian juga untuk sebaliknya, bahwa beberapa entitas pada

himpunan entitas B dapat berelasi dengan banyak entitas pada himpunan

entitas A.

Sumber: Priyadi (2014:7)

Gambar II.9

Kardinalitas Banyak ke Banyak

19

Menurut Ladjamudin dalam Bukit dan Sofica (2018:45) menyatakan

bahwa, “Logical Record Structure (LRS) merupakan representasi dari struktur

record-record pada tabel-tabel yang terbentuk dari hasil antar himpunan entitas”.

Menentukan kardinalitas, jumlah tabel dan Key menurut (Setiawan, 2016)

sebagai berikut:

1. One to One (1-1) Tingkat hubungan ini menunjukan hubungan satu ke satu,

dinyatakan dengan satu kejadian pada entitas pertama dan hanya mempunyai

satu hubungan dengan satu kejadian pada entitas yang kedua dan sebaliknya.

2. One to Many (1-M) Tingkat hubungan satu ke banyak adalah sama dengan

banyak ke satu, tergantung dari arah mana hubungan tersebut dilihat. Untuk

satu kejadian pada entitas yang pertama dapat mempunyai banyak hubungan

dengan kejadian pada entitas yang kedua. Sebaliknya, satu kejadian pada

entitas yang kedua hanya dapat mempunyai satu hubungan dengan satu

kejadian pada entitas yang pertama.

3. Many to Many (M-M) Tingkat hubungan banyak ke banyak terjadi jika tiap

kejadian pada sebuah entitas akan mempunyai banyak hubungan dengan

kejadian pada entitas lainnya, dilihat dari sisi entitas yang pertama maupun

dilihat dari sisi yang kedua.

20

Sumber: Ibrahim dan Septiami (2017:91)

Gambar II.10

Contoh Logical Record Structure

2.2.3. Implementasi dan Pengujian Web

Menurut Rosa dan Shalahuddin (2016:272) menjelaskan bahwa, “Pengujian

adalah satu set aktifitas yang direncanakan dan sistematis untuk menguji atau

mengevaluasi kebenaran yang diinginkan”. Aktifitas pengujian terdiri dari satu set

atau sekumpulan langkah dimana dapat menempatkan desain kasus uji yang

spesifik dan metode pengujian.

Pengujian perangkat lunak adalah sebuah elemen sebuah topik yang

memiliki cakupan luas dan sering dikaitkan dengan verifikasi (verivication) dan

validasi (validation) (VdanV). Verifikasi mengacu pada sekumpulan aktifitas yang

menjamin bahwa perangkat lunak mengimplementasikan dengan benar sebuah

21

fungsi yang spesifik. Validasi mengacu pada sekumpulan aktifitas yang berbeda

yang menjamin bahwa perangkat lunak yang dibangun dapat ditelusuri sesuai

dengan kebutuhan pelanggan (customer).

Salah satu Pengujian untuk validasi memiliki beberapa pendekatan

menurut Rosa dan Shalahuddin (2016:275) yaitu pengujian dengan Black Box

Testing (Pengujian Kotak Hitam). 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 dengan kasus

benar dan kasus salah, misalkan untuk kasus proses login maka kasus uji yang

dibuat adalah:

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

yang benar.

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

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

sebaliknya, atau keduanya salah.

2.2.4. Pengkodean

Menurut Jogiyanto dalam Rohim, et al. (2016:111) menjelaskan bahwa,

“Pengkodean adalah suatu susunan digit (angka), huruf dan karakter-karakter

khusus yang dapat dirancang dalam bentuk kode”.

22

Menurut Jogiyanto dalam Azis dan Sarmidi (2018:53) ada beberapa macam

tipe dari kode yang dapat digunakan di dalam sistem informasi, diantaranya adalah

kode mnemonik (mnemonic code), kode urut (sequential code), kode blok (block

code), kode grup (group code) dan kode desimal (decimal code), masing-masing

tipe dari kode tersebut mempunyai kebaikan dan kelemahannya tersendiri. Dalam

praktek, tipe-tipe kode yang ada dapat dikombinasikan.

1. Kode Mnemonik (Mnemonic Code)

Digunakan untuk tujuan supaya mudah di ingat. Kode mnemonik dibuat

dengan dasar singkatan atau mengambil sebagian karakter dari item yang akan

di wakili dengan kode ini. Sebagai contoh kode “P” untuk mewakili pria dan

kode “W’ untuk wanita untuk mudah diingat. Umumnya kode mnemonik

menggunakan huruf, akan tetapi dapat juga menggunakan gabungan huruf dan

angka misalnya barang dagangan komputer IBM pc dengan ukuran memori

640 Kb, colour monitor, dapat dikodekan menjadi K-IBM- PC-640- CO supaya

lebih mudah diingat. Kebaikan dari kode ini adalah mudah diingat dan

kelemahannya adalah kode dapat menjadi terlalu panjang.

2. Kode Urut (Sequential code)

Kode yang ini disebut juga kode seri (serial code) merupakan kode yang

nilainya urut antara satu kode dengan kode berikutnya.

Contoh kode urut adalah sebagai berikut:

001 Kass

002 Piutang Dagang

003 Persediaan Produk Selesai

004 Persediaan Produk Dalam Proses

23

005 Persediaan Bahan Baku

006 Biaya Dibayar Dimuka

3. Kode Blok (Block Code)

Kode blok (block code) mengklasifikasikan item ke dalam kelompok blok

tertentu yang mencerminkan suatu klasifikasi tertentu atas dasar pemakaian

maksimum yang diharapkan. Contoh kode blok adalah sebagai berikut:

Rekening-rekening dalam buku besar dapat diberi kode dengan

mengklasifikasikannya ke dalam kelompok rekening utama sebagai berikut:

BLOK KELOMPOK

1000-1999 AKTIVA LANCAR

2000-2999 AKTIVA TETAP

3000-3999 HUTANG LANCAR

3500-3999 HUTANG JANGKA PANJANG

4000-4999 MODAL

4. Kode Desimal (Decimal Code)

Kode desimal (decimal code) mengklasifikasikan kode atas dasar 10 unit angka

desimal dimulai dari angka 0 sampai dengan angka 9 atau dari 00 sampai

dengan 99 tergantung dari banyaknya kelompok.

5. Kode Grup (Group Code)

Kode grup (group code) merupakan kode yang berdasarkan field-field dan tiap

field-field nya mempunyai arti. Adapun contoh kode grup sebagai berikut:

NIM : X XX XX XXX

Dimana :

- Dijit 1 : Strata Pendidikan

24

- Dijit 2, 3 : Kode Program Studi

- Dijit 4,5 : Tahun Masuk/Angkatan

- Dijit 6, 7, 8: No. Urut (1/sd 999)