6
BAB II
LANDASAN TEORI
2.1. Konsep Dasar Web
Menurut Fitri Marisa (2017:1) Website dapat diartikan sebagai kumpulan
halaman-halaman yang digunakan untuk mempublikasikan informasi berupa teks,
gambar, dan program multimedia lainya berupa animasi (gamabr gerak, tulisan
gerak), suara, dan atau gabunagn dari semuanya itu baik yang berifat statis
maupun dinamis yang membentuk suatu rangkaian bangunan yang saling terkait
antara satu halaman dengan halaman yang lain yang sering disebut hyperlink.
A. Website
1. Web Server
Menurut Aan dalam Jurnal (2013:2) menyimpulkan bahwa:
Web server adalah server yang melayani permintaan klien terdapat halaman
web seperti apache, IIS (Internet Information Server) dan berkomunikas
dengan Middleware untuk menterjemahkan kode-kode tertentu,
menjalankan kode-kode tersebut dan memungkinkan berinteraksi dengan
basis data, PHP atau ASP.
Contoh Web Server:
a. Apache
Apache merupakan salah satu jenis web server yang paling banyak
digunakan di internet.
b. Nginx
Nginx (dibaca engine x) merupakan salah satu web server open source
selain apache.
7
c. ISS (Internet Information Services)
IIS merupakan web server yang digunakan dalam Windows, terutama
Windows 2000 dan Windows 2003.
2. Web Browser
Menurut Putri dkk (2018:2) menyimpulkan bahwa:
Web browser adalah sebuah program komputer yang dibuat untuk menerjemahkan
kode-kode perintah HTML menjadi tampilan web di komputer pengguna berupa
text, image, dan multimedia yang dapat dilihat dan di nikmati langsung. Tampilan
web yang dihasilkan dapat dibaca dan dimengerti oleh orang awam sekalipun.
Contoh Web Browser: Mozilla Firefox, Google Chorme, Internet Exploler
3. Website SISFO Akademik
Menurut Tedi Kurnia dkk (2012:9):
Sistem Informasi Akademik Siswa Berbasis Web adalah:
a. Sistem yang dirancang dapat mengakomodasi kebutuhan dalam
mempermudah dan mempercepat kinerja guru dan staf yang bertugas
dalam mengelola data akademik siswa. Dengan demikian penyimpanan
data-data tentang siswa pada current system dapat diminimalkan.
b. Sistem informasi akademik siswa berbasis web telah mengakomodasi
guru dan staf yang bertugas untuk dapat mengelola data-data akademik
siswa, dengan mudah dapat diakses lewat internet.
c. Unified Approach (UA) dapat digunakan sebagai metodologi untuk
menganalisis dan merancang Sistem Informasi Akademik Siswa
Berbasis web
Contoh Web Sisfo Akademik: www.bsi.ac.id
8
B. Bahasa Pemograman
Menurut Zairen, Danisa dan Anggit Dwi Hartanto (2013) “Bahasa
Pemrograman adalah instruksi atau perintah yang dibuat manusia dengan
membentuk susunan kode yang kemudian diterjemahkan oleh program computer
sehingga dimengerti oleh komputer.”
1. HTML
Menurut Jubilee Enterprise (2017:1):
HTML adalah (Hypertext Markup Language). Lantas, apa itu arti dari tiap-
tiap kata yang membentuk singkatan HTML itu? Berikut penjelasan
singkatnya:
a. Hypertext adalah sebuah teks yang apabila diklik akan membawa Anda
pergi dari satu dokumen ke dokumen lainnya. Dalam prakteknya,
Hypertext berwujud sebuah link yang bisa mengantar Anda ke dunia
internet yang sangat luas.
b. Markup adalah tag (semacam kode) yang mengatur layout dan
tampilan-tampilan visual yang kita lihat di sebuah website, termasuk
font, warna teks, gambar, dan sebagainya.
c. Language yang merupakan penunjuk bahwa HTML adalah semacam
script pemrograman.
Dengan kata lain, HTML adalah script pemrograman yang mengatur
bagaimana kita menyajikan informasi di dunia internet dan bagaimana
informasi itu membawa kita melompat dari satu tempat ke tempat lainnya.
9
Contoh Bahasa Pemograman HTML:
Gambar II.1 Contoh Bahasa Pemograman HTML
2. PHP
Menurut TIM EMS (2016:1), “PHP adalah singkatan dari PHP Hypertext
Preprocessing. Merupakan bahasa scripting untuk web yang cukup populer.
Dengan PHP, Anda bisa membuat web dinamis di mana kode PHP
diselipkan di antara script kode-kode HTML yang merupakan bahasa
markup standar untuk dunia web.”
Contoh Bahasa Pemograman PHP:
Gambar II.2 Contoh Bahasa Pemograman PHP
3. CSS
Menurut Abdul Kadir dalam Jurnal Fajar Hariadi (2013:3), “CSS adalah
singkatan dari Cascading Style-Sheet, yaitu sebuah pengembangan atas
kode HTML yang sudah ada sebelumnya. Dengan CSS, bisa menentukan
10
sebuah struktur dasar halaman web secara lebih mudah dan cepat, serta irit
size.”
Contoh Bahasa Pemograman CSS:
Gambar II.3 Contoh Bahasa Pemograman CSS
4. Java Script
Menurut Indra Yatini dalam Jurnal (2014:2) menyimpulkan bahwa:
JavaScript adalah bahasa scripting kecil, ringan, berorientasi objek yang
ditempelkan pada kode HTML dan di proses di sisi client. JavaScript
digunakan dalam pembuatan website agar lebih interaktif dengan
memberikan kemampuan tambahan terhadap HTML melalui eksekusi
perintah di sisi browser. JavaScript dapat merespon perintah user dengan
cepat dan menjadikan halaman web menjadi responsif.
Contoh Bahasa Pemograman JavaScript:
Gambar II.1 Contoh Bahasa Pemograman JavaScript
11
5. JQuery
Menurut Indra Yatini dalam Jurnal (2014:2), “jQuery adalah JavaScript
library yang dirancang untuk meringkas kode-kode JavaScript, sehingga
dapat menyederhanakan penulisan skrip program, sesuai dengan slogan
“write less, do more” .”
Contoh Bahasa Pemograman JQuery:
Gambar II.4 Contoh Bahasa Pemograman JQuery
C. Basis Data dan Aplikasi Basis Data
Menurut Said Mirza Fahlevi (2013:1) “Basis data (database) adalah
sekumpulan data yang saling berhubungan secara logis dan terorganisir dengan
baik. Basis data merupakan salah satu komponen utama pendukung program
aplikasi. Hampir semua program aplikasi yang melibatkan pengelolaan data dapat
dipastikan menggunakan basis data sebagai tempat penyimpanan datanya. ”
Menurut Robi Yanto (2016:5) “Basis data digunakan untuk mengatasi
permasalahan pengolahan data dengan metode pengarsipan berkas dan basis data
sangat diperlukan dalam membangun sistem informasi pada sebuah perusahaan
sehingga dengan basis data dapat meningkatkan kinerja perusahaan dan
meningkatkan daya saing perusahaan.”
Menurut Said Mirza Fahlevi (2013:12) “Program Aplikasi Basis Data
(Database Application Program) adalah program komputer yang berinteraksi
12
dengan basis data dengan cara mengirimkan perintah ke Sistem Pengelola Basis
Data. ”
1. PhpMyAdmin
Menurut Aprilita Dwiyani dalam Jurnal (2013:2) MySQL adalah salah satu
perangkat lunak Database Management System (DBMS) yang sering
digunakan saat ini, yang didistribusikan secara gratis di bawah lisensi GPL
(GNU General Public License). Sehingga setiap orang mudah untuk
mendapatkan dan bebas untuk menggunakan MySQL.
2. MySQL
Menurut Aprilita Dwiyani dalam Jurnal (2013:2) MySQL adalah salah satu
perangkat lunak Database Management System (DBMS) yang sering
digunakan saat ini, yang didistribusikan secara gratis di bawah lisensi GPL
(GNU General Public License). Sehingga setiap orang mudah untuk
mendapatkan dan bebas untuk menggunakan MySQL.
Contoh Koneksi MySQL:
Gambar II.5 Contoh Koneksi MySQL
D. Metode Pengembangan Perangkat Lunak
Metode yang digunakan pada pengembangan perangkat lunak ini
menggunakan model waterfall. Menurut Pressman dan Sommervile dalam
13
Muharto, dan Arisandy Ambarita, M.Kom. (2016), metode ini terdiri beberapa
tahapan, yaitu:
1. Analisis dan definisi kebutuhan. Layanan, batasan, dan tujuan sistem
ditentukan melalui konsultasi dengan user atau pemakai.
2. Perancangan sistem dan perangkat lunak. Proses perancangan sistem
membagi persyaratan dalam sistem perangkat keras atau perangkat lunak.
Kegiatan ini menentukan arsitektur sistem secara keseluruhan. Perancangan
melibatkan identifikasi dan deskripsi abstraksi sistem perangkat lunak
mendasar.
3. Implementasi dan pengujian unit. Pada tahap ini, perancangan perangkat
lunak direalisasikan dengan program atau unit program. Pengujian ini
melibatkan verifikasi bahwa setiap unit telah memenuhi spesifikasi.
4. Integrasi dan pengujian sistem. Unit program atau program individu
diintegrasikan dan diuji sebagai sistem yang lengkap untuk menjamin
bahwa kebutuhan sistem telah dipenuhi.
5. Operasi dan pemeliharaan, yaitu mengoperasikan program di lingkungannya
dan melakukan pemeliharaan. Baisanya ini merupakan fase siklus hidup
yang paling lama. Pemeliharaan mencakup koreksi dari berbagai error yang
tidak ditemukan pada tahap-tahap sebelumnya, melakukan perbaikan atas
implementasi unit sistem dan pengembangan layanan sistem, dan
persyaratan-persyaratan baru ditambahkan.
2.2. Teori Pendukung
A. Struktur Navigasi
14
Menurut Petrus Andre (2014), Dalam menciptakan sebuah website, hal
pertama yang harus kita lakukan adalah menentukan struktur navigasi. Struktur
Navigasi merupakan struktur atau alur dari suatu program yang merupakan
rancangan hubungan (rantai kerja) dari beberapa area yang berbeda dan dapat
membantu mengorganisasikan seluruh elemen pembuatan Website.
Macam-macam Struktur Navigasi pada Website:
1. Struktur Navigasi Linier
Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang
berurut, yang menampilkan satu demi satu tampilan layar secara berurut
menurut urutannya. Tampilan yang dapat ditampilkan pada sruktur jenis ini
adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat
dua halaman sebelumnya atau dua halaman sesudahnya.
Gambar II.6 contoh 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.
15
Gambar II.7 contoh Struktur Navigasi Non-Linier
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.
Gambar II.8 contoh 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
16
digunakan dalam pembuatan website karena struktur ini dapat digunakan
dalam pembuatan website sehingga dapat memberikan ke-interaksian yang
lebih tinggi.
Gambar II.9 contoh Struktur Navigasi Campuran
B. Entity Relationship Diagram (ERD)
Menurut Rosa dan Shalahuddin (2016:50) “Permodelan awal basis data
yang paing banyak digunakan adalah menggunakan Entity Relationship Diagram
(ERD). ERD dikembangkan berdasarkan teori himpunan dalam bidang
matematika”. ERD digunakan untuk pemodelan basis data relasional. Sehingga
jika penyimpanan basis data menggunakan OODBMS maka perancangan basis
data tidak perlu menggunakan ERD. ERD memiliki beberapa aliran notasi seperti
notasi Chen (dikembangkan oleh Peter Chen), Barker (dikembangkan oleh
Richard Barker, Ian Palmer Harry Ellis), notasi Crow’s Foot, dan beberapa notasi
lain. Namun yang banyak digunakan adalah notasi dari Chen. Sebuah relasi
digunakan untuk meringkas data yang ada dalam database sehingga penggunaan
data menjadi lebih fleksibel. Penggunaan memori penyimpanannya pun lebih
efisien.
Beberapa manfaat adanya relasi adalah:
1. Penyimpanan data lebih efisien.
2. Tingkat efektivitas dan konsistensi data lebih terjamin.
17
3. Memudahkan administrator dalam memantau atau mengontrol data yang ada
dalam database.
Macam-macam relasi atau hubungan dalam database terdiri dari:
1. One To One (1-1)
Yaitu setiap baris data pada tabel pertama dihubungkan hanya ke satu baris
data pada tabel kedua
Gambar II.10 contoh ERD One To One
Sumber: Bayu Pratama
2. One To Many (1-M)
Yaitu setiap baris data dari tabel pertama dapat dihubungkan ke satu baris atau
lebih data pada tabel kedua.
Gambar II.11 contoh ERD One To Many
Sumber: Bayu Pratama
3. Many To Many (M-M)
Yaitu satu baris atau lebih data pada tabel pertama bisa dihubungkan ke satu
atau lebih baris data pada tabel kedua.
18
Gambar II.12 contoh ERD Many To Many
Sumber: Bayu Pratama
C. Logical Record Strukture (LRS)
Menurut Hasugian dan Shidiq (2012:608) memberikan batasan bahwa LRS
adalah “Sebuah model sistem yang digambarkan dengan sebuah diagram ER akan
mengikuti pola atau aturan permodelan tertentu dalam kaitannya dengan konvensi
ke LRS”. Perubahan yang terjadi yaitu mengikuti aturan-aturan sebagai berikut:
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 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.
Gambar II.13 contoh LRS
19
D. Implementasi dan Pengujian (Black Box Testing)
Belajar Sistem Informasi (2017:1), Pengertian Black Box Testing adalah
pengujian yang dilakukan hanya mengamati hasil eksekusi melalui data uji dan
cek fungsional perangkat lunak. Jadi analogi seperti yang kita lihat kotak hitam,
kita dapat melihat hanya penampilan luar, tanpa mengetahui apa di balik bungkus
hitamnya. Sama seperti pengujian kotak hitam, mengevaluasi hanya penampilan
eksternal (antarmuka), fungsional tanpa mengetahui apa yang sebenarnya terjadi
dalam codingan.
Tujuan Black Box Testing adalah untuk mencari kesalahan/kegagalan dalam
operasi tingkat tinggi, yang mencakup kemampuan dari perangkat lunak,
operasional/tata laksana, skenario pemakai. Fungsi dari pengujian ini berdasarkan
kepada apa yang dapat dilakukan oleh sistem. Untuk melakukan pengujian
perilaku seseorang harus mengerti lingkup dari aplikasi, solusi bisnis yang
diberikan oleh aplikasi, dan tujuan sistem dibuat.
Contoh pengujian pada aplikasi internet banking, maka pengujian yang
dilakukan adalah menjalankan aplikasi, memeriksa apakah semua fungsi pada
aplikasi berjalan dengan baik serta mengecek tampilan dari aplikasi tersebut
apakah sesuai dengan design yang sudah ditentukan atau belum.
Black Box Testing dapat menemukan error seperti:
1. Fungsi atau logika yang tidak benar
2. error interface
3. error performance
4. Kesalahan dalam struktur data atau akses database eksternal
20
Kelebihan Black Box Testing
1. Tidak perlu melihat source code secara detail
2. Mendeteksi kesalahan pengetikan / Typo
3. Mendeteksi kesalahan Design / User Interface dari sebuah software /
website
4. Menampilkan asumsi yang tidak sesuai dengan kenyataan, untuk di analisa
dan diperbaiki.
5. Seorang Tester tidak harus Programmer
Kekurangan Black Box Testing
1. Ketergantungan dengan dokumen dan design software tersebut
2. Tidak sampai level code, sehingga tester tidak mengetahui level security
dari software tersebut