bab ii landasan teori - repository.bsi.ac.id · 4. pengertian web server web server merupakan...
Post on 09-Nov-2020
3 Views
Preview:
TRANSCRIPT
9
BAB II
LANDASAN TEORI
2.1. Konsep Dasar Web
Website sudah menjadi kebutuhan masyarakat, terutama bagi perusahaan,
organisasi dan pemilik situs online. Mengingat kompetisi visual yang semakin
berkembang pesat, daya tarik menjadi kebutuhan yang paling penting sehingga
programmer dituntut untuk merancang sebuah tampilan website yang menarik agar
banyak pengunjung yang berminat untuk mengaksesnya.
A. Website
Berikut ini akan dijelaskan pengertian dari segala sesuatu yang berhubungan
tentang website agar sebuah website dapat diakses oleh pemakainya, diantaranya:
1. Internet
Menurut Kadir (2014:306) “Internet merupakan contoh jaringan terbesar yang
menghubungkan jutaan komputer yang tersebar di seluruh penjuru dunia dan tidak
terikat pada satu organisasi pun”.
Cikal bakal jaringan internet pertama kali dikembangkan tahun 1969 dengan
nama ARPAnet (US Defense advanced Research Projects Agency) oleh Departemen
Pertahanan Amerika Serikat. ARPAnet dibangun dengan sasaran untuk membuat
jaringan komputer yang tersebar untuk menghindari pemusatan informasi di satu titik
yang dipandang rawan untuk dihancurkan apabila terjadi peperangan.
10
2. World Wide Web
Menurut Mcleod dan Schell (2008:79) “World Wide Web (WWW) adalah
suatu akses informasi yang biasa digunakan oleh URL untuk mengidentifikasi
berbagai konten yang terdapat di internet”.
3. Web Browser atau Browser
Menurut Kadir (2014:186) “Web browser atau biasa disebut browser
(peramban) saja adalah perangkat lunak yang berguna untuk mengakses informasi
web ataupun untuk melakukan transaksi via web”.
4. Pengertian Web Server
Web Server merupakan aplikasi yang berguna untuk melayani permintaan
halaman web dan mengirimkan dokumen HTML yang diminta ke klien (Kadir,
2014:329).
B. Bahasa Pemrograman
Bahasa pemograman yang digunakan dalam perancangan website, antara lain:
1. PHP
PHPHypertext Preprocessor (PHP) merupakan suatu bahasa scripting
khususnya digunakan untuk web development. Karena sifatnya yang server side
scripting, maka untuk menjalankan PHP harus menggunakan web server
(Hidayatullah dan Kawistara, 2015:231).
2. HTML
Hypertext Markup Language (HTML) merupakan bahasa standard yang
digunakan untuk menampilkan halaman web (Hidayatullah dan Kawistara, 2015:13).
11
3. JavaScript
Menurut Hidayatullah dan Kawistara (2015:422) “JavaScript ialah suatu bahasa
scripting yang digunakan sebagai fungsionalitas dalam membuat suatu web”.
C. Basis Data (Database)
Menurut Kadir (2014:218) “Basis data (Database) adalah suatu
pengorganisasian sekumpulan data yang saling terkait sehingga memudahkan
aktivitas untuk memperoleh informasi”.
Basis data dimaksudkan untuk mengatasi problem pada sistem yang memakai
pendekatan berbasis berkas.Untuk mengolah basis data diperlukan perangkat lunak
yang disebut Database Management System (DBMS).
1. MySQL
Menurut Kadir (2009:15) “MySQL (My Structure Query Language) merupakan
software yang tergolong database server dan bersifat open source. Open source
menyatakan bahwa software ini dilengkapi dengan source code (kode yang dipakai
untuk membuat MySQL)”.
2. Xampp
Xampp merupakan sebuah aplikasi web server.Web server sendiri merupakan
tempat menyimpan file-file maupun data-data untuk membuat website.Juga sering
diartikan sebagai layanan data pada web browser (Kadir, 2009:5).
3. PhpMyAdmin
Menurut Kadir (2009:30) “PhpMyAdmin adalah utilitas yang tersedia pada
WAMP5 yang dapat digunakan untuk berinteraksi dengan database MySQL. Utilitas
12
ini berbasis web dan dapat digunakan untuk melakukan berbagai operasi yang
mengakses database”.
D. Aplikasi Perancangan Web
Dalam perancangan website ini, ada beberapa aplikasi yang digunakan,
diantaranya:
1. Wamp Server
Menurut Kadir (2009:20) “Wamp Server adalah sebuah software yang
mengemas MySQL, PHP, dan Apache sehingga memudahkan para pengembang
sistem yang hendak menggunakan ketiga software tersebut dalam menginstal dan
melakukan koneksi”.
2. Adobe Dreamweaver CS4
Adobe Dreamweaver CS4 merupakan program aplikasi yang digunakan untuk
melakukan desain halaman website secara visual. Dalam mendesain halaman website,
aplikasi ini menyesdiakan fasilitas-fasilitas yang memberikan kemudahan bagi para
pengembang web (Wahana, 2010:2).
Ada dua halaman pada Adobe Dreamweaver CS4, yaitu Start Page dan Area
Kerja. Dibawah ini akan dijelaskan tentang halaman pada Adobe Dreamweaver CS4.
a. Start Page
Start Page merupakan kotak dialog yang ditampilkan pertama kali bersamaan
dengan jendela utama aplikasi Adobe Dreamweaver CS4 saat dijalankan. Fungsi dari
Start Page ini untuk menampilkan menu pilihan yang ada di Adobe
DreamweaverCS4, dimana user berhak memilih menu mana yang akan dipakai atau
dijalankan.
13
Start Page menampilkan empat pilihan menu dan sebuah checkbox untuk
menonaktifkan kotak dialog Start Page. Menu yang ditampilkan meliputi Open a
Recent Document, Create New, Top Features (videos),dan Help Online.
Sumber: (Hidayatullah dan Kawistara, 2015:14)
Gambar II.1. Start PageDreamweaver CS4
1. Open a Recent Document
Menu ini menampilkan daftar nama dokumen yang pernah dibuka dengan
Adobe Dreamweaver CS4.
2. Create New
Menu ini digunakan untuk membuat dokumen web yang baru. Beberapa tipe
dokumen web yang disediakan oleh Adobe Dreamweaver CS4, antara lain:
a) HTML
Hypertext Markup Language (HTML) merupakan sebuah bahasa dasar
yang digunakan untuk merancang halaman web statis.
14
b) ColdFusion
ColdFusion merupakan bahasa scripting yang digunakan untuk
pemrograman web server.ColdFusion digunakan pada Adobe ColdFusion,
BlueDragon, dan lainnya.
c) PHP
PHPHypertext Preprocessor (PHP) merupakan bahasa pemrograman
scripting web server-side. Dengan pemrograman server-side, sebuah
websiteakan lebih dinamis. PHP biasanya terpasang pada file HTML yang
disimpan dengan ekstensi \php.
d) XSLT (Entire Page)
XSLT merupakan bahasa pemrograman yang mempunyai sintaks dasar
sebagaimana XML.XSLT digunakan untuk mengubah dokumen XML
menjadi HTML atau format lainnya.
e) ASP VBScript
ASP VBScript merupakan bahasa scripting server-side turunan dari bahasa
Visual Basic.ASP disimpan dengan ekstensi *.asp atau “.vbs.
f) PHP
PHPHypertext Preprocessor (PHP) merupakan bahasa pemrograman
scripting web server-side. Dengan pemrograman server-side, sebuah
websiteakan lebih dinamis. PHP biasanya terpasang pada file HTML yang
disimpan dengan ekstensi \php.
15
g) XML
Exstensible Markup Language (XML) merupakan bahasa yang mirip
dengan HTML, tetapi penggunaannya tidak terbatas pada pemrograman
web saja.
h) CSS
Cascading Style Sheet (CSS) merupakan bahasa style yang digunakan untuk
mendesain halaman web yang bertujuan memisahkan isi (content)
webdengan desainweb.
i) JavaScript
JavaScript merupakan bahasa scripting turunan dari pemrograman
Java.JavaScript digunakan untuk pemrograman web client-side.
j) More
Menu ini digunakan untuk menampilkan Type Document dan template
dokumen web secara lebih lengkap.
k) Dreamweaver Site
Menu ini digunakan untuk membuat proyek website (site) baru dengan
Adobe Dreamweaver CS4.
3. Top Features (Videos)
Merupakan menu pilihan link yang berupa rekaman video penggunaan fasilitas
yang disediakan Dreamweaver secara online. Menu link rekaman video yang
disediakan, antara lain Related Files, Live View, Code Navigator, Dataset
Wizard, Web Widgets, JavaScript Support dan sebagainya.
16
4. Don’t Show Again
Kotak dialog Start Pageakan selalu ditampilkan bersamaan dengan jendela
utama Adobe Dreamweaver CS4 saat aplikasi ini dijalankan. Agar kotak dialog
Start Page tidak ditampilkan lagi, centang checkbox Don’t Show Again.
5. Help Online
Merupakan menu pilihan untiuk menampilkan bantuan tentang cara
penggunaan, fitur-fitur terbaru Adobe Dreamweaver CS4 dan lainnya secara
online.
b. Area Kerja
Area kerja Adobe Dreamweaver CS4 adalah lingkungan yang digunakan untuk
merancang halaman web Anda. Pada area kerja ini terdapat jendela utama, yaitu
jendela dokumen (Document Window) yang berfungsi untuk mendesain halaman,
baik dengan cara penulisan kode maupun secara visual. Selain itu, juga terdapat
Menubar, Toolbar, dan panel-panel yang membantu desain halaman web dengan
mudah.
Sumber: Hidayatullah dan Kawistara, (2015:15)
Gambar II.2. Area Kerja Dreamweaver CS4
17
1. Menubar
Menubarmerupakan sebuah grup menu yang terdapat pada bagian atas aplikasi
yang tersusun dari deretan teks/label. Setiap menu terdiri dari submenu-
submenu sesuai kategori menu masing-masing.
2. Workspace Switcher
Workspace Switchermerupakan sebuah fasilitas yng berfungsi untuk mengubah
mode tampilan area kerja sesuai kebutuhan perancang web.Workspace Switcher
ini berada sejajar dengan menubar sebelah kanan.Secara default, mode tampilan
area kerja Adobe Dreamweaver CS4 adalah mode Designer.Adobe
Dreamweaver CS4 memiliki mode area kerja yang banyak, di antaranya mode
Coder yang hanya menampilkan kode pembuatan halaman dan Classic.
3. Document Toolbar
Toolbar merupakan kumpulan tombol yang berfungsi memudahkan
pengembang untuk menggunakan fasilitas yang disediakan Dreamweaver. Pada
toolbar ini, terdapat tombol-tombol untuk mengubah mode jendela dokumen
yang ditampilkan dan beberapa tombol lain.
4. Document Window
Document Window / jendela dokumen merupakan area yang digunakan untuk
membuka, mengedit, menampilkan desain dokumen dan atau kode dokumen
web yang aktif. Jendela dokumen ini mempunyai tool-tool yang digunakan
untuk menampilkan informasi pada halaman, seperti Related File And Code
18
Naviator, Tag Selector dan fasilitas lain, seperti Zooming, HandTool, Selected
Tool dan informasi lainnya.
5. Panel Groups
Panel Groups merupakan kumpulan panel berupa tab-tab pilihan yang
mempunyai fungsi berbeda-beda. Panel merupakan sebuah jendela untuk
memudahkan pembuatan desain web dengan menampilkan informasi
pendukung pada jendela informasi.
6. Tag Selector
Tag Selector berfungsi menampilkan tag yang diseleksi pada area desain.
7. Panel Properties
Panel Properties berfungsi menampilkan properti dari elemen halaman web
yang terpilih.
E. Model Pengembangan Perangkat Lunak
Menurut Rosa dan Shalahuddin (2011:27) “Model SDLC air terjun (waterfall)
sering juga disebut model sekuensial linier (sequential linier) atau alur hidup klasik
(classic life cycle)”.
Model air terjun menyediakan pendekatan alur hidup perangkat lunak secara
sekuensial atau terurut dimulai dari analisis, desain, pengodean, pengujian, dan tahap
pendukung (support).
19
Berikut adalah gambar model air terjun:
Sistem/Rekayasa
Informasi
Analisis Desain PengujianPengodean
Sumber: Rosa dan Shalahuddin (2011:27)
Gambar II.3. Metode Waterfall
1. Analisis kebutuhan perangkat lunak
Proses pengumpulan kebutuhan dilakukan secara intensif untuk menspesifikasikan
kebutuhan perangkat lunak agar dapat dipahami perangkat lynak seperti apakah
yang dibutuhkan oleh pengguna. Spesifikasi kebutuhan perangkat lunak ini perlu
untuk didokumentasikan.
2. Desain
Desain perangkat lunak merupakan proses multilangkah 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 kedalam program perangkat lunak.Hasil dari tahap ini
merupakan program komputer sesuai dengan yang telah dibuat pada tahap desain.
20
4. Pengujian
Pengujian fokus pada perangkat lunak dari segi logik dan fungsional serta
memastikan bahwa semua bagian sudah diuji.Hal ini dilakukan untuk
meminimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan sesuai
dengan yang diinginkan.
5. Pendukung atau pemeliharaan
Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan ketika
sudah dikirim ke pengguna.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.2. Teori Pendukung
Di poin ini penulis akan membahas tentang teori pendukung yang sangat
berpengaruh dan juga diperlukan dalam membangun web ini. Teori-teori ini
mengenai struktur navigasi, ERD (Entity Relationship Diagram) beserta
komponennya,LRS (Logical Record Structure), dan juga mengenai teknik pengujian
web dengan metode black box testing.
A. Struktur Navigasi
Menurut Fauzi (2008:3) mengatakan “Struktur navigasi adalah struktur atau
alur dari suatu program”. Sebelum membuat suatu aplikasi maupun website
sebaiknya kita menentukan struktur navigasi terlebih dahulu. Ada empat macam
21
bentuk dasar dari struktur navigasi yang biasa digunakan dalam pembuatan aplikasi
menurut Fauzi (2008:4), yaitu:
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: Fauzi (2008:4)
Gambar II.4. 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 non-linier ini berbeda
dengan percabangan pada struktur hirarki, karena pada percabangan non-linier ini
walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan
yang sama yaitu tidak ada Master Page dan Slave Page.
22
Sumber: Fauzi (2008:4)
Gambar II.5. 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.
Sumber: Fauzi (2008:5)
Gambar II.6. Struktur Navigasi Hirarki
4. Struktur Navigasi Campuran
Struktur Navigasi Campuran (composite) merupakan gabungan dari ketiga
struktur sebelumnya yaitu linier, non-linier dan hirarki.Struktur navigasi ini juga
23
biasa disebut dengan struktur navigasi bebas.Struktur navigasi ini banyak digunakan
dalam pembuatan website sehingga dapat memberikan interaksi yang lebih tinggi.
Sumber: Fauzi (2008:5)
Gambar II.7. Struktur Navigasi Campuran
B. Entity Relationship Diagram (ERD)
Menurut Sutanta (2011:91) “Entity Relationship Diagram (ERD) merupakan
suatu model data yang dikembangkan berdasarkan objek. Entity Relationship
Diagram (ERD) digunakan untuk menjelaskan hubungan antar data dalam basis data
kepada pengguna secara logis”.
1. Komponen Entity Relationship Diagram (ERD)
Komponen Entity Relationship Diagram menurut Sutanta (2011:91) adalah
sebagai berikut:
a) Entitas merupakan suatu objek yang dapat dibedakan dari lainnya yang dapat
diwujudkan dalam basis data. Objek dasar dapat berupa orang, benda, atau hal
yang keterangannya perlu disimpan didalam basis data. Entitas dinyatakan
dengan simbol persegi panjang.
24
Sumber: Sutanta (2011:91)
Gambar II.8. Simbol Entitas
b) Relasi merupakan hubungan antara sejumlah entitas yang berasal dari
himpunan entitas yang berbeda. Relasi dinyatakan dengan simbol belah ketupat.
Sumber: Sutanta (2011:91)
Gambar II.10. Simbol Relasi
c) Atribut merupakan keterangan-keterangan yang terkait pada sebuah entitas
yang perlu disimpan dalam basis data. Atribut berfungsi sebagai penjelas pada
sebuah entitas. Atribut digambarkan dengan simbol elipse.
Sumber: Sutanta (2011:91)
Gambar II.9. Simbol Atribut
2. Derajat Relationship dalam Entity Relationship Diagram
Menurut Hidayatullah dan Kawistara (2015:151) “Relasi memiliki derajat
keterhubungan.Derajat keterhubungan antar entitas pada suatu relasi disebut dengan
kardinalitas”. Terdapat tiga jenis kardinalitas:
a) Satu ke satu (1-1) yaitu setiap entitas pada himpunan entitas A berhubungan
dengan paling banyak dengan satu entitas pada himpunan entitas B, begitu juga
sebaliknya.
25
b) Satu ke banyak (1-N) yaitu setiap entitas pada himpunan entitas A dapat
berhubungan dengan banyak entitas pada himpunan entitas B, begitu juga
sebaliknya.
c) Banyak ke banyak (N-N) yaitu setiap entitas pada himpunan entitas A dapat
berhubungan dengan banyak entitas pada himpunan entitas B, demikian juga
sebaliknya.
C. Logical Record Structure (LRS)
Menurut Frieyadie (2007:13) “LRS merupakan hasil dari pemodelan Entity
Relationship (ER) beserta atributnya sehingga bisa terlihat hubungan-hubungan antar
entitas”.Contoh :
<Nama Tabel>
<Nama Field Kunci Utama>
<Nama Field 2>
<Nama Field 3>...
...
<Nama Field N>
Sumber: Frieyadie (2007:13)
Gambar II.11. Model Logical Record Structure
1. Hal-hal yang mempengaruhi pembuatan LRS
Ada tiga hal yang dapat berpengaruh dalam pembuatan LRS menurut
Frieyadie (2007:14), yaitu :
a. Jika tingkat hubungan (cardinality) satu pada satu (one-to-one), maka
digabungkan dengan entitas yang lebih kuat (strong entity), atau digabungkan
dengan entitas yang memiliki atribut yang lebih sedikit.
26
b. Jika tingkat hubungan (cardinality) satu pada banyak (one-to-many), maka
hubungan relasi atau digabungkan dengan entitas yang tingkat hubungannya
banyak.
c. Jika tingkat hubungan (cardinality) banyak pada banyak (many-to-many), maka
hubungan relasi tidak akan digabungkan dengan entitas manapun, melainkan
menjadi sebuah LRS.
2. Transformasi ERD ke LRS
Aturan-aturan dalam melakukan transformasi Entity Relationship Diagram ke
Logical Record Structure adalah sebagai berikut:
a. Setiap entityakan diubah kebentuk sebuah kotak dengan nama entity berada
diluar kotak dan atribut berada didalam kotak.
b. Sebuah relasi kadang disatukan dalam sebuah kotak bersama entity, kadang
dipisah dalam sebuah kotak tersendiri.
Aturan pokok diatas akan sangat dipengaruhi oleh elemen yang menjadi titik
perhatian utamapada langkah transformasi yaitu cardinality/kardinalitas.
D. Pengujian web
Menurut Simarmata (2010:237) “Pengujian adalah proses terhadap aplikasi
program untuk menemukan segala kesalahan dan segala kemungkinan yang akan
menimbulkan kesalahan sesuai dengan spesifikasi perangkat lunak yang telah
ditentukan sebelum aplikasi tersebut diserahkan kepada pelanggan”.
Dalam membangun sistem informasi berbasisweb ini, penulis melakukan
pengujian dengan metode black box testing.
27
Menurut Rosa dan Shalahuddin (2013:275) “Black box testing adalah pengujian
perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan kode
program. Pengujian ini dimaksudkan untuk mengetahui apakah fungsi-fungsi
masukan dan keluaran sesuai dengan spesifikasi yang dibutuhkan”.
top related