BAB II LANDASAN TEORI · a. Manipulasi HTML/DOM b. Manipulasi CSS c. Methodevent HTML d. Efek dan...
Transcript of BAB II LANDASAN TEORI · a. Manipulasi HTML/DOM b. Manipulasi CSS c. Methodevent HTML d. Efek dan...
7
BAB II
LANDASAN TEORI
2.1. Konsep Dasar Web
Menurut Tim EMS (2014:1) ”Website adalah apa yang anda lihat via browser,
sedangkan yang disebut sebagai (web) sebenarnya adalah sebuah aplikasi web, karena
melakukan action tertentu dan membantu anda melakukan kegiatan tertentu”.
2.1.1. Website
1. Internet
Menurut Wahyuningsih dan Makmur (2017:7) “Internet merupakan singkatan
dari interconnected networking yaitu sistem yang menghubungkan antar jaringan
dengan memanfaatkan kemajuan teknologi telekomunikasi menggunakan satelit”.
2. Website
Menurut Tim EMS (2014:2) Menyimpulkan bahwa:
Website adalah kumpulan halaman web yang diletakkan dalam satu
tempat/site/situs. Jadi, di dalam website terdapat halaman-halaman web beserta
file-file pendukungnya, seperti gambar, video, dan file digital lain yang
diletakkan dalam satu tempat yang diidentifikasi melalui nama domain (domain
name) dan alamat ip (IP address).
Sedangkan menurut Josi (2016:1) “Website atau situs dapat diartikan sebagai
kumpulan halaman yang menampilkan informasi data teks, data gambar diam
atau gerak, data animasi, suara, video dan gabungan dari semuanya baik yang
bersifat statis maupun dinamis yang membentuk suatu rangkaian bangunan yang
saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan
halaman (hyperlink)”.
Menurut Tim EMS (2014:8) ada beberapa jenis website di zaman sekarang,
yaitu:
8
a. Website Affiliate
Adalah portal yang tidak sekedar berupa CMS, namun juga bisa
mensindikasi konten dari pihak ketiga.
b. Website Arsip
Website ini menyimpan informasi-informasi penting di internet. Jadi
fungsinya mirip perpustakaan online yang menyimpan hal-hal penting dan
menarik di internet.
c. Website Blog
Website ini digunakan untuk menyimpan informasi yang dimiliki seorang
individu atau perusahaan dan memungkinkan informasi tersebut diberi
komentar oleh user.
d. Website Konten
Website konten adalah website yang menawarkan informasi yang berguna
ke pembacanya.
e. Website Korporat
Website Korporat adalah Website yang dimiliki oleh perusahaan, dipakai
untuk menyampaikan informasi-informasi dalam berbagai aspek yang dimiliki
oleh perusahaan atau organisasi tersebut.
f. Website e-commerce
Website e-commerce atau sering juga disebut website toko online yang
memungkinkan terjadinya transaksi barang dan jasa melalui website tersebut.
3. Aplikasi Berbasis Web
a. XAMPP
9
Menurut Ardhana (2017:1) “XAMPP adalah perangkat lunak gratis yang
bebas digunakan, XAMPP berfungsi sebagai server yang berdiri sendiri
(localhost), yang terdiri dari Apache HTTP Server, MySQL database dan
Perl”.
b. Sublime Text
Menurut Ardhana (2017:3) “Sublime Text merupakan sebuah syntax editor
yang menggunakan Phyton API”. Sublime Text mempunyai fitur plugin
tambahan yang mempermudah bagi penggunanya.Tidak hanya memiliki fitur
yang menarik, Sublime Text juga menampilkan desain yang simpel dan
memiliki ciri khas tersendiri sehingga menjadikan Sublime Text terkesan
elegan untuk sebuah text editor.
2.1.2. Bahasa Pemrograman
Dalam pembuatan website tentu menggunakan bahasa pemrograman untuk
dapat menerjemahkan setiap perintah dalam website yang pada saat diakses. Berikut
ini adalah bahasa pemrograman dan framework yang penulis gunakan dalam
merancang website yaitu :
1. HTML
Menurut Tim EMS (2016:2) “HTML adalah singkatan dari Hypertext Markup
Language, Bahasa pemrograman ini terdiri dari tag dan aturan-aturan yang
memungkinkan anda membuat dokumen hypertext. Halaman web adalah dokumen
hypertext”.
Sedangkan menurut Winarno dkk (2015:28) “HTML adalah bahasa yang
mengatur bagaimana tampilan isi dari situs web”. Di dalam HTML ada tag-
10
tagdimana tag berfungsi menyediakan informasi berkaitan dengan sifat dan struktur
konten serta referensi untuk gambar dan media lainnya.
2. PHP
Menurut Tim EMS (2014:59) “PHP adalah singkatan dari PHP Hypertext
Preprocessor.Saat pertama kali dikembangkan oleh programmer bernama Resmus
Lerdoff, PHP awalnya adalah singkatan dari Personal Home Page Tools”.
3. AJAX
Menurut Tim EMS (2016:119) “AJAX merupakan teknik untuk membuat
halaman web yang responsif dan dinamis”. AJAX memungkinkan halaman web
untuk di-update secara sinkron di mana proses pertukaran data dengan ukuran kecil
bisa dilakukan di belakang layar.
Hal tersebut membuat anda bisa meng-update bagian halaman web tanpa harus
melakukan loading ulang keseluruhan halaman. Berikut ini cara kerja AJAX ketika
ada event di website :
11
Sumber : Tim EMS (2016:119)
Gambar II. 1. Cara Kerja AJAX
AJAX tersusun dari beberapa teknologi yang berbasis pada standar internet.
Teknologi-teknologi tersebut adalah sebagai berikut :
a. XMLHttpRequest: untuk pertukaran data dengan server secara sinkron.
b. JavaScript/DOM: untuk menampilkan atau berinteraksi dengan informasi
c. CSS: untuk memberi style pada data.
d. XML: sering digunakan sebagai format untuk transfer data.
Dengan berbekal keempat teknologi tersebut, aplikasi AJAX bersifat independen
terhadap browser dan platform sehingga bisa digunakan di mana saja.
4. CSS
Menurut Winarno dkk (2015:69) ”CSS merupakan singkatan dari Cascading
Style Sheet”. CSS berfurngsi mendefenisikan bagaimana elemen HTML
ditampilkan.Kenapa CSS sangat penting? Ini karena pada awalnya HTML tidak
An event occurs
Create an
XMLHttpRequest
object
Send HttpRequest
Browser
Proccess HTTPRequest
Send HttpRequest
Server
Process the returned
data using
JavaScript
Update page content
Browser
Internet
Internet
12
pernah diniatkan untuk berisi tag untuk pemformatan dokumen. HTML hanya
diniatkan untuk mendefenisikan konten dokumen saja.
5. JavaScript
Menurut Winarno dkk (2014:1) “JavaScript, ditinjau dari jenisnya adalah bahasa
jenis scripting”. Karena berupa bahasa scripting seperti HTML, maka JavaScript
sangatlah ringan. Cocok diletakkan di file web yang di transfer via jaringan internet.
6. jQuery
Menurut Winarno dkk (2014:51) “jQuery adalah sebuah framework yang
memudahkan penerapan JavaScript”. jQuery adalah sebuah library JavaScript yang
memiliki motto “write less do more”. Artinya dengan mengetik kode yang sedikit,
ada banyak hal yang bisa anda lakukan dengan jQuery.
Menurut Winarno dkk (2014:51) Library jQuery memiliki beberapa fitur
berikut, yaitu :
a. Manipulasi HTML/DOM
b. Manipulasi CSS
c. Methodevent HTML
d. Efek dan animasi
e. AJAX
f. Utility
7. Bootstrap
Menurut Jakobus dan Marah (2016:6) “Bootstrap adalah kerangka
pengembangan web yang membantu pengembang membangun antarmuka web”.
Framework Bootstrap terdiri dari campuran antara JavaScript dan CSS, dan
menyediakan pengembang dengan semua komponen penting yang diperlukan untuk
mengembangkan pengguna web yang berfungsi penuh antarmuka.
13
Sedangkan menurut Husein dalam Josi (2016:2) “Bootstrap adalah Framework
ataupun tools untuk membuat aplikasi web ataupun website yang bersifat
responsive secara cepat, mudah dan gratis”. Kata responsive disini berarti bahwa
tampilan web (lebar dan susunan isinya dapat berubah otomatis sesuai dengan lebar
layar yang menampilkannya)
2.1.3. Basis Data
1. Database
Menurut Sukamto dan Shalahuddin (2016:43) mengemukakan bahwa “Basis
data adalah sistem terkomputerisasi yang tujuan utamanya adalah memelihara data
yang sudah diolah atau informasi dan membuat informasi tersedia saat dibutuhkan”.
Pada intinya basis data merupakan media untuk menyimpan data agar dapat
diakses dengan mudah dan cepat.
Sumber : Sukamto dan Shalahuddin (2016:44)
Gambar II. 2. Ilustrasi Basis Data
tabel 1
tabel 2
tabel n
…………….
Basis Data
14
Berdasarkan gambar di atas tujuan dibuatnya tabel-tabel di sini adalah untuk
menyimpan data ke dalam tabel-tabel agar mudah diakses. Oleh karena itu, untuk
merancang tabel-tabel yang akan dibuat maka dibutuhkan pola pikir penyimpanan
data nantinya jika dalam bentuk baris-baris data (record) dimana setiap baris terdiri
dari beberapa kolom.
2. MySQL
Menurut Sadeli (2014:10)“MySQL adalah database yang menghubungkan script
php menggunakan perintah query dan escaps character yang sama dengan php”.
3. phpMyAdmin
Menurut Sadeli (2014:10)“phpMyAdmin adalah sebuah software yang berbentuk
seperti halaman situs yang terdapat pada web server”. Fungsi dari halaman ini
adalah sebagai pengendali databaseMySQL sehingga MySQL tidak perlu repot
untuk menggunakan perintah-perintah SQL.
2.1.1 Model Pengembangan Perangkat Lunak
Menurut Sukamto dan Shalahuddin (2016:26) “SDLC atau Software
Development Life Cycle adalah proses mengembangkan atau mengubah suatu sistem
perangkat lunak dengan menggunakan model-model dan metodologi yang digunakan
orang untuk mengembangkan sistem-sistem perangkat lunak sebelumnya”. Berikut
adalah gambar model air terjun:
15
Sumber: Sukamto dan Shalahuddin (2016:29)
Gambar II. 3.
Ilustrasi Model Waterfall
1. Analisis Kebutuhan Perangkat Lunak
Prosespengumpulan kebutuhan dilakukan secara intensif untuk
mespesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat lunak
seperti apa yang dibutuhkan oleh user. Spesifikasi kebutuhan perangkat lunak pada
tahap ini perlu untuk didokumentasikan.
2. Desain
Desain perangkat lunak adalah proses multi langkah yang fokus pada desain
pembuatan program perangkat lunak, representasi antarmuka, dan prosedur
pengkodean. Tahap ini mentranslasi kebutuhan perangkat lunak dari tahap analisis
kebutuhan ke representasi desain agar dapat diimplementasikan menjadi program
pada tahap selanjutnya. Desain perangkat lunak yang dihasilkan pada tahap ini juga
perlu di dokumentasikan.
Analisis Pengkodean Pengujian Desain
Sistem/Rekayasa
Informasi
16
3. Pembuatan Kode Program
Desain harus ditranslasikan ke dalam program perangkat lunak. Hasil dari
tahap ini adalah program komputer sesuai dengan desain yang telah dibuat pada
tahap desain.
4. Pengujian
Pengujian fokus pada perangkat lunak secara lojik dan fungsional dan
memastikan bahwa semua bagian sudah diuji.Hal ini dilakukan untuk
meminimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan sesuai
dengan yang diinginkan.
5. Pendukung (support) atau pemeliharaan (maintenance)
Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan
ketika sudah dikirimkan ke user. Perubahan bisa terjadi karena adanya kesalahan
yang muncul dan tidak terdeteksi saat pengujian atau perangkat lunak harus
beadaptasi dengan lingkungan baru. Tahap pendukung atau pemeliharaan dapat
mengurangi proses pengembangan mulai dari analisis spesifikasi untukperubahan
perangkat lunak yang sudah ada, tapi tidak untuk membuat perangkat lunak baru.
2.2. Tools Program
2.2.1. Struktur Navigasi
Menurut Ardiansyah (2016:61) “Struktur Navigasi dapat diartikan sebagai
alur darisuatu program yang menggambarkan rancangan hubungan antar area yang
berbeda sehingga memudahkan proses pengorganisasian seluruh element website”.
Bentuk dasar dari struktur navigasi sebagai berikut :
17
1. Struktur Navigasi Linier
Struktur navigasi linier hanya mempunyai rangkaian cerita yang berurut yang
menampilkan satu demi satu tampilan layar secara berurut menurut urutannya.
Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu halaman
sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya
atau dua halaman sesudahnya, pengguna akan melakukan navigasi secara
berurutan, dalam frame atau byte informasi satu ke yang lainnya.
Sumber : Ardiansyah (2016:61)
Gambar II. 4. Struktur Navigasi Linier
2. Struktur Navigasi Hierarkis
Struktur dasar ini disebut juga struktur linier dengan percabangan karena
pengguna melakukan navigasi disepanjang cabang pohon struktur yang terbentuk
oleh logika isi.
Sumber: Ardiansyah (2016:61)
Gambar II. 5. Struktur Navigasi Hierarkis
3. Struktur Navigasi Tidak Berurutan (Non-Linear)
18
Struktur navigasi non-linier merupakan pengembangan dari struktur navigasi
linier. Pada struktur ini diperkenankan membuat navigasi bercabang percabangan
yang dibuat pada struktur non-linier ini berbeda dengan percabangan pada struktur
hirarki, karena ada percabangan non-liner ini walaupun terdapat percabangan tetep
tiap-tiap tampilan mempunyai kedudukan yang sama yaitu tidak ada Master Page
dan Slave Page, pengguna akan melakukan navigasi dengan bebas melalui isi
proyek dengan tidak terikat jalur yang sudah ditentukan sebelumnya.
Sumber: Ardiansyah (2016:61)
Gambar II. 6.
Struktur Navigasi Non-Linier
4. Struktur Navigasi Campuran (Composite)
Struktur navigasi jenis ini pengguna akan melakukan navigasi dengan bebas
(secara non-linier) tetapi terkadang dibatasi presentasi linier film atau informasi
penting dan pada data yang paling terorganisasi secara logis pada suatu hirarki.
19
Sumber: Ardiansyah(2016:61)
Gambar II. 7.
Struktur Navigasi Composite
2.2.2. Entity Relationship Diagram (ERD)
Menurut Sukamto dan Shalahuddin (2016:53) “ERD adalah bentuk paling
awal dalam melakukan perancangan basis data relasional”. Jika menggunakan
OODBMS maka perancangan ERD tidak perlu dilakukan.ERD memiliki beberapa
aliran notasi seperti notasi Chen (dikembangkan oleh Peter Chen), Barker
(dikembangkan oleh Richard Barker, Ian Palmer, Harry Ellis), notasi Crow’sFoot,
dan beberapa notasi lain. Namun yang banyak digunakan adalah notasi
Chen.Menurut Sukamto dan Shalahuddin (2016:52) bentuk hubungan relasi dalam
ERD adalah sebagai berikut:
20
Tabel II. 1.
Hubungan Relasi dalam ERD
Nama Gambar
Binary
Tenary
N-ary
Sumber : Sukamto dan Shalahuddin (2016:52)
A. Logical Record Structure (LRS)
Menurut Kusrini dalam Nugraha dan Octasia (2016:2) “LRS (Logical Record
Structure) merupakan representasi dari struktur record-record pada tabel-tabel yang
terbentuk dari hasil relasi antar himpunan entitas pada diagram E-R”.
Sedangkan Menurut Ardiansyah (2016:53) “LRS Merupakan transformasi dari
penggambaran ERD dalam bentuk yang lebih jelas dan mudah untuk dipahami”.
Sedangkan menurut Hasugian dan Shidiq dalam Puspitasari (2016:3)
Memaparkan LRS adalah “sebuah model sistem yang digambarkan dengan sebuah
diagram-ER akan mengikuti polaaturan pemodelan tertentu dalam kaitannya dengan
R1 E2 E1
E3
R1 E2 E1
E2
E4
R1 E3 E1
21
konversi ke LRS”.maka perubahan yang terjadi adalah mengikuti aturan - aturan
berikut ini :
1. Setiap entitas akan diubah kebentuk kotak
2. Sebuah atribut relasi disatukan dalam sebuah kotak bersama entitas jika
hubungan yang terjadi pada diagram-ER 1:M (relasi bersatu dengan cardinality
M) atau tingkat hubungan 1:1 (relasi bersatu dengan cardinality yang paling
membutuhkan referensi)
3. Sebuah relasi dipisah dalam sebuah kotak tersendiri (menjadi entitas baru) jika
tingkat hubungannya M:M (many to many) dan memiliki foreign key sebagai
primary key yang diambil dari kedua entitas yang sebelumnya saling
berhubungan.
2.2.3. Implementasi dan Pengujian Web
Menurut Husda dan Wangdra (2016:109) “Tahap implementasi sistem
merupakan tahap meletakkan sistem supaya siap digunakan. Tahap ini termasuk juga
kegiatan menulis kode program jika tidak gunakan paket perangkat lunak aplikasi”.
Tahap implementasi sistem terdiri dari langkah-langkah sebagai berikut ini :
1. Menerapkan rencana implementasi
2. Melakukan kegiatan implementasi
3. Tindak lanjut implementasi
Menurut Abror dan Jati (2016:8) “Proses pengujian sistem dilakukan untuk
menghasilkan produk aplikasi yang sesuai dengan spesifikasi pada analisis
kebutuhan”. Oleh karena itu, pengujian sistem pada aplikasi dengan standar SDLC
lebih dikenal dengan pengujian blackbox texting.Pengujian blackbox testing dengan
pengujian validasi instrumen dan validasi aplikasi.
22
Menurut Sukamto dan Shalahuddin (2016:272) memberikan batasan bahwa
“Sering perangkat lunak mengandung kesalahan (error) pada proses-proses tertentu
pada saat perangkat lunak sudah berada di tangan user”. Kesalahan-kesalahan
(error) pada perangkat lunak sering disebut dengan “bug”. Untuk menghindari
banyaknya bug maka diperlukan adanya pengujian perangkat unak sebelum
perangkat lunak diberikan ke pelanggan atau selama preangkat lunak masih terus
dikembangkan.
1. Black-Box Testing (Pengujian Kotak Hitam)
Menurut Sukamto dan Shalahuddin (2016:275) “Blackbox Testing yaitu
menguji perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan
kode program”. Pengujian dimaksudkan untuk mengetahui apakah fungsi-fungsi,
masukan, dan keluaran dari perangkat lunak sesuai dengan spesifikasi yang
dibutuhkan.Pengujian kotak hitam dilakukan dengan membuat kasus uji yang
bersifat mencoba semua fungsi dengan memakai perangkat lunak apakah sesuai
dengan spesifikasi yang dibutuhkan. Kasus uji yang dibuat untuk melakukan
pengujian kotak hitam harus dibuat denan kasus benar dan kasus salah, misalkan
untuk kasus proses login maka kasus uji yang dibuat adalah :
a. Jika user memasukkan nama pemakai (username) dan kata sandi (password) yang
benar.
b. Jika user memasukkan nama pemakai (username) dan kata sandi (password) yang
salah, misalnya nama pemakai benar tapi kata sandi salah, atau sebaliknya, atau
keduanya salah.