Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
9
BAB II
LANDASAN TEORI
2.1. Konsep Dasar Web
1. Pengertian Internet dan Website
Interconnected Network merupakan kepanjangan dari internet. Internet
juga didefinisikan sebagai sebuah sistem komunikasi global yang dapat
menghubungkan komputer-komputer serta jaringan-jaringan komputer diseluruh
dunia.
Menurut Sibero (2011:10) “Internet (interconnection network) adalah
jaringan komputer yang menghubungkan antar jaringan secara global, internet
juga dapat disebut jaringan dalam suatu jaringan yang luas. Seperti halnya
jaringan komputer lokal maupun jaringan komputer area.
Komputer dan jaringan dengan berbagai platform (Unix, Linux, Windows,
Mac dan lain-lain) dapat bertukar informasi dengan adanya sebuah protokol
standar yang dikenal dengan nama TPC/IP (Transmission Control
Protocol/Intenet Protocol). Beberapa istilah yang sering digunakan user bekerja
dengan internet :
a. World Wide Web (WWW)
Menurut Arief (2011:7) World Wide Web (WWW) atau web adalah salah satu
aplikasi yang berisikan dokumen-dokumen multi-media (text, gambar,
animasi, video) di dalamnya menggunakan protokol HTTP (hypertext transfer
protocol) dan untuk mengaksesnya menggunakan perangkat lunak yang
disebut browser.
10
b. Web Server
Menurut Kustiyahningsih dan Anamisa (2011:8), "Web Server adalah
komputer yang digunakan untuk menyimpan dokumen-dokumen web,
komputer ini akan melayani permintaan dokumen web dari kliennya". Apache
merupakan web server yang paling populer dan memiliki rangking pertama
dalam persentase penggunanya.
c. Web Browser
Menurut Kustiyahningsih dan Anamisa (2011:8), Web Browser adalah
"Software yang digunakan untuk menampilkan informasi dari server web.
Software ini kini telah dikembangkan dengan menggunakan user interface
grafis, sehingga pemakai dapat dengan melakukan 'point and click' untuk
pindah antar dokumen". Contoh web browser antara lain, Mozilla Firefox,
Google Chrome, Opera dan lainnya.
d. URL dan HTTP
Menurut Kustiyahningsih dan Anamisa (2011:7), "URL (Universal Resource
Locator) adalah konsep nama file standar yang diperluas dengan jaringan
untuk menentukan lokasi informasi pada web server". Sedangkan HTTP
menurut Kustiyahningsih dan Anamisa (2011:7) yaitu "HTTP (Hypertext
Transfer Protocol) adalah suatu protokol yang menentukan aturan yang perlu
diikuti oleh web browser dalam meminta atau mengambil suatu dokumen dan
menyediakan dokumen yang diminta oleh browser".
11
Pengertian Website menurut Kustiyahningsih dan Anamisa (2011:4)
adalah, "World Wide Web (WWW), lebih dikenal dengan web yang merupakan
salah satu layanan yang didapat oleh pemakai komputer yang terhubung ke
internet dengan fasilitas hypertext untuk menampilkan data berupa text, gambar,
suara, animasi dan data multimedia lainnya".
Kategori Website menurut Kustiyahningsih dan Anamisa yaitu:
a. Web Statis
Menurut Kustiyahningsih dan Anamisa (2011:5): “Web statis adalah web
yang menampilkan informasi-informasi yang sifatnya statis (tetap)”. Disebut
statis karena pengguna tidak dapat berinteraksi dengan web tersebut. Dengan
demikian untuk mengetahui suatu web tersebut bersifat statis atau dinamis
dapat dilihat dari tampilannya. Jika suatu web hanya berhubungan dengan
halaman web lain dan berisi suatu informasi yang tetap maka web tersebut
disebut statis.
b. Web Dinamis
Menurut Kustiyahningsih dan Anamisa (2011:5) adalah "Web dinamis adalah
web yang menampilkan informasi serta dapat berinteraksi dengan pengguna”.
Web yang dinamis memungkinkan pengguna untuk berinteraksi menggunakan
form sehingga dapat mengolah informasi yang ditampilkan. Web dinamis
bersifat interaktif, tidak kaku dan terlihat lebih indah.
Menurut Kustiyahningsih dan Anamisa (2011:9) Dalam Web
programming, terdapat server-side programming dan client-side programming.
Client-side programming adalah untuk membuat web yang statis. sedangkan
untuk membuat web yang dinamis (dapat interaktif dengan user) diperlukan
12
server-side dan client-side programming. Program web yang tergolong dalam
client-side adalah JavaScript, VB Script, HTML dan lain-lain. Sedangkan
program web yang tergolong server-side adalah CGI/Perl, ASP, JSP, PHP dan
CFM.
Berdasarkan basis pengembangan, aplikasi (software) dapat dibedakan
menjadi dua macam yaitu aplikasi berbasis desktop dan aplikasi berbasis web.
Aplikasi berbasis desktop dikembangkan untuk dijalankan dimasing-masing client
(komputer pengakses aplikasi pengolahan database). Database diletakkan di
server sedangkan aplikasi di install masing-masing client. Bahasa pemrograman
yang digunakan untuk aplikasi tipe ini biasanya adalah Borland Delphi, Visual
Basic, Java netbean dan sebagainya. Pada aplikasi berbasis desktop, aplikasi
dibangun dengan menggunakan tool terntentu, kemudian dikompilasi. Hasilnya
dapat langsung digunakan dalam komputer.
Sedangkan aplikasi berbasis web tidak perlu di install dimasing-masing
client pengakses aplikasi karena aplikasi cukup dikonfigurasi di server. Kemudian
client mengakses dari browser seperti IE, Opera, Firefox dan Google Chrome.
Excutor aplikasi dilakukan oleh web server seperti Apache, IIS, Xitami dan lain
sebagainya.
2. Bahasa Pemrograman
Terdapat banyak bahasa pemrograman dalam membangun aplikasi
berbasis website. Dalam tugas akhir ini penulis hanya membahas 5 bahasa
pemrograman web yaitu:
13
a. Perl Hypertext Prepocessor (PHP)
Menurut Kustiyahningsih dan Anamisa (2011:14) "PHP (atau resminya PHP:
Perl Hypertext Preprocessor) adalah tugas akhir bersifat server-side yang
ditambahkan ke dalam HTML". PHP sendiri merupakan singkatan dari
Personal Home Page Tools. Skrip ini akan membuat suatu aplikasi
diintegrasikan kedalam HTML sehingga suatu halaman web tidak lagi bersifat
statis, namun menjadi bersifat dinamis. Sifat server-side berarti pengerjaan
tugas akhir dilakukan di server, baru kemudian hasilnya dikirimkan ke
browser .
b. Hypertext Markup Language (HTML)
Menurut Kustiyahningsih dan Anamisa (2011:13), "HTML kependekan dari
Hyper Text Markup Language. Dokumen HTML adalah file text murni yang
dapat dibuat dengan editor teks sembarang. Dokumen ini dikenal sebagai web
page". File-file HTML ini berisi instruksi-instruksi yang kemudian
diterjemahkan oleh browser yang ada dikomputer client (user) sehingga isi
informasinya dapat ditampilkan secara visual dikomputer pengguna (user).
c. Cascading Style Sheet (CSS)
Menurut Ardhana (2012:108) "Cascading Style Sheet (CSS), merupakan salah
satu bahasa pemrograman web untuk mengendalikan beberapa komponen
dalam sebuah web sehingga akan lebih terstruktur dan seragam". CSS dapat
mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel,
ukuran border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi
antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah
bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.
14
Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang
sama dengan format yang berbeda.
d. Javascript
Menurut Kustiyahningsih dan Anamisa (2011:65): “JavaScript adalah bahasa
yang berbentuk kumpulan skrip berjalan pada suatu dokumen HTML”. Bahasa
ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan
terhadap bahasa HTML dengan mengizinkan pengeksekusian perintah-
perintah di sisi user artinya di sisi browser bukan di sisi server web.
JavaScript adalah bahasa yang "case sensitive" artinya membedakan
penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil,
contoh variabel atau fungsi dengan nama TEST berbeda dengan variabel
dengan nama test dan setiap instruksi diakhiri dengan karakter titik koma (;).
e. Jquery
Jquery menurut Kadir (2013:5) yaitu, "Jquery adalah pustaka yang dibangun
dengan menggunakan javascript”. Tujuannya adalah agar program pembuatan
javascript bisa dilakukan dengan ringkas.
3. Basis Data
Menurut Kustiyahningsih dan Anamisa (2011:145) "Basis data adalah
sekumpulan informasi yang diatur agar mudah dicari”. Dalam arti umum basis
data adalah sekumpulan data yang diproses dengan bantuan komputer yang
memungkinkan data dapat diakses dengan mudah dan tepat, yang dapat
digambarkan sebagai aktivitas dari satu atau lebih organisasi yang berelasi.
15
a. MYSQL
Menurut Kustiyahningsih dan Anamisa (2011:146) "MYSQL dapat
didefinisikan sebagai sistem manajemen database". Database sendiri
merupakan struktur penyimpanan data. Untuk menambah, mengakses dan
memproses data yang disimpan dalam sebuah database komputer, diperlukan
sistem manajemen database seperti MYSQL Server".
Gambar II.1
Tampilan PhpMyAdmin
b. XAMPP
Menurut Sidik (2014:72) bahwa “Xampp (X(Windows/Linux) Apache Mysql
PHP dan Perl) merupakan paket server web PHP dan database MySQL yang
paling populer dikalangan pengembang web dengan menggunakan PHP dan
MySQL sebagai database nya”.
16
Gambar II.2
Xampp Control Panel
c. Aplikasi Yang Digunakan
a. Adobe Dreamweaver CS6
Menurut Madcoms (2011:3), Adobe Dreamweaver CS6 adalah software
terkemuka untuk membangun dan mengedit web dengan menyediakan
kemampuan visual dan tingkat kode, yang dapat digunakan untuk
membuat website berbasis standar dan desain untuk desktop, mobile,
smartphone, tablet, dan perangkat lainnya. Menurut Madcoms (2010:10)
welcome screen Dreamweaver terdapat beberapa bagian yang sangat
berguna untuk pekerjaan, antara lain:
1) Create New: bagian ini menampilkan beberapa pilihan jenis lembar
kerja baru yang akan dibuka dalam Adobe Dreamweaver CS6.
2) Open a recent Item: bagian ini merupakan file yang pernah dibuka atau
dibuat sebelumnya dalam lembar kerja Adobe Dreamweaver CS6.
Klik ikon Open untuk membuka file lain.
17
3) Top Feature : bagian ini menampilkan fitur-fitur terbaru dan
terpopuler dari Adobe Dreamweaver CS6.
Gambar II.3
Tampilan Awal Lembar Kerja Dreamweaver CS6
b. Adobe Photoshop CS5
Adobe Photoshop atau biasa disebut Photoshop, adalah perangkat lunak
editor citra buatan Adobe Systems yang dikhususkan untuk pengeditan foto
atau gambar dan pembuatan efek (www.ilmuphotoshop.com, 2014). Ada
tiga komponen penting ketika kita bekerja dengan Photoshop, antar lain:
EA. MenuBar : Ini menu didalam lembar Photoshop.
EB. ToolBox : Tools untuk mengedit foto atau gambar di Photoshop.
EC. Side Bar : Layer, Channel, Navigator dll.
18
Gambar II.4
Tampilan Awal Lembar Kerja Photoshop
4. Model Pengembangan Perangkat Lunak
Menurut Rosa dan Shalahuddin (2013:28) model air terjun (waterfall)
sering juga disebut model sekuensi liner (Sequential Linear) atau alur hidup
perangkat lunak secara sekuensial atau terurut dimulai dari analisis, desain,
pengkodan, pengujian dan tahap pendukung (support) Langkah-langkah yang
penting dalam model waterfall menurut Rosa dan Shalahudin (2013:28) adalah:
a. 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 di dokumentasikan.
19
b. Desain Sistem dan Perangkat Lunak
Desain perangkat lunak adalah proses multi langkah yang fokus pada desain
pembuatan program perangkat lunak termasuk struktur data, arsitektur
perangkat lunak, representasi antar muka, dan prosedur pengkodean. Tahap ini
mentranslasikan kebutuhan perangkat lunak dari tahap analisis kebutuhan ke
representasi desain agar dapat di implementasikan menjadi program pada
tahap selanjutnya. Desain perangkat lunak yang dihasilkan pada tahap ini juga
perlu di dokumentasikan.
c. Pembuatan Kode Program
Desain harus ditranslasikan kedalam program perangkat lunak. Hasil dari
tahap ini adalah program komputer sesuai dengan desain yang telah dibuat
pada tahap desain.
d. Pengujian
Pengujian fokus pada perangkat lunak secara segi logis dan fungsional untuk
memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk
meminimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan
sesui dengan yang diinginkan.
e. Pendukung (support) atau pemeliharaan (maintenance)
Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan
ketika sudah dikirimkan ke user. Perubahan bias 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
20
spesifikasi untuk perubahan perangkat lunak yang sudah ada, tapi tidak untuk
membuat perangkat lunak baru.
Langkah-langkah penting tersebut dalam bentuk gambar dapat dilihat pada
Gambar II.5 dibawah ini:
Sumber: Rosa dan Shalahuddin (2013:29)
Gambar II.5
Ilustrasi Model Waterfall
2.2. Teori Pendukung
1. Struktur Navigasi
Menurut Binanto (2010:268) “Struktur Navigasi adalah gabungan dari
struktur referensi informasi situs web dan mekanisme link yang mendukung
pengunjung untuk melakukan penjelajahan situs. Ada empat macam bentuk dasar
yaitu :
a. Struktur Navigasi Linear
Struktur navigasi linear 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, pengguna
Sistem Rekayasa Informasi
Analisis
Desain
Pengkodean
Pengujian
21
akan melakukan navigasi secara berurutan,
dalam frame atau byte informasi satu ke yang lainnya.
Sumber: Binanto (2010:269)
Gambar II.6
Struktur Navigasi Linear
b. Struktur Navigasi Hirarki
Struktur dasar ini disebut juga struktur linier dengan percabangan karena
pengguna melakukan navigasi disepanjang cabang pohon struktur yang
terbentuk oleh logika isi.
Sumber: Binanto (2010:269)
Gambar II.7
Struktur Navigasi Hirarki
c. Struktur Navigasi Tidak Berurut (Non-Linear)
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 pada percabangan non-
linear ini walaupun terdapat percabangan tetap tiap-tiap tampilan
mempunyai kedudukan yang sama yaitu tidak ada Master Page dan Slave
22
Page, pengguna akan melakukan navigasi dengan bebas melalui isi
proyek dengan tidak terikat dengan jalur yang sudah ditentukan
sebelumnya.
Sumber: Binanto (2010:270)
Gambar II.8
Struktur Navigasi Non Linear
d. Struktur Navigasi Campuran (Composite)
Struktur navigasi 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.
Sumber: Binanto (2010:270)
Gambar II.9
Struktur Navigasi Campuran
23
2. Entity Relationship Diagram
Menurut Yakub (2008:25) "ERD merupakan suatu model jaringan yang
menggunakan susunan data yang disimpan pada sistem secara abstrak. ERD juga
menggambarkan hubungan antara satu entitas yang memiliki sejumlah atribut
dengan entitas yang lain dalam suatu sistem yang terintegrasi”. Model data ini
juga akan membantu pada saat melakukan analisis dan perancangan basis data,
karena model data ini akan menunjukan bermacam-macam data yang dibutuhkan
dan hubungan antar data.
Menurut Yakub (2008:26) ERD terbagi atas tiga komponen, yaitu :
a. Entitas (Entity)
Entitas, yaitu kumpulan dari objek yang dapat di identifikasikan secara unik.
b. Relasi (Relation)
Relasi, yaitu hubungan yang terjadi antara satu atau lebih entitas. Jenis
hubungan antara lain; satu ke satu, satu ke banyak, dan banyak ke banyak.
c. Atribut (Atribute)
Atribut, yaitu karakteristik dari entity atau relasi yang merupakan penjelasan
detail tentang entitas.
d. Hubungan antara entity dengan atributnya dan himpunan entitas dengan
himpunan relasinya.
24
Di dalam ERD juga dikenal dengan derajat relasi atau kardinalitas.
Menurut Yakub (2008:33) kardinalitas yaitu “kardinalitas relasi menunjukan
maksimum entitas yang dapat berelasi dengan entitas pada himpunan entitas.
Dapat berupa satu ke satu (one-to-one), satu kebanyak (one-to-many), dan banyak
ke banyak (many-to-many)”. Penjelasan ketiga kardinalitas tersebut akan
dijelaskan dibawah ini :
a. One-to-one
Hubungan antara lain file pertama dan file kedua adalah satu berbanding satu
Sumber: Yakub (2008:33)
Gambar II.10
Hubungan One-to-one
b. One-to-many
Hubungan antara file pertama dan file kedua adalah satu berbanding banyak
atau dapat pula dibalik menjadi banyak berbanding satu.
Sumber: Yakub (2008:33)
Gambar II.11
Hubungan One-to-many
1 M
1 1
25
c. Many-to-many
Hubungan antara file pertama dan kedua adalah banyak berbanding banyak.
Sumber: Yakub (2008:33)
Gambar II.12
Hubungan Many-to-many
3. Derajat Relasi (Kardinalitas)
Model relasi ini berdasarkan persepsi dunia nyata diantaranya humpunan
objek dasar dan relasi antar entitas (Yakub, 2008:33).
a. Satu ke Satu (One to One)
Setiap entitas pada himpunan entitas A berhubungan dengan paling banyak
dengan satu entitas pada himpunan entitas B, begitu juga sebaliknya.
Sumber: Yakub (2008:33)
Gambar II.13
Kardinalitas Relasi Satu ke Satu
M M
26
b. Satu ke Banyak (One to Many)
Setiap entitas pada himpunan entitas A dan dapat berhubngan dengan banyak
entitas pada himpunan entitas B, tetapi tidak sebaliknya, dimana setiap entitas
pada himpunan entitas berhubungan dengan paling banyak dengan satu entitas
pada himpunan entitas A.
Sumber: (Yakub:34)
Gambar II.14
Kardinalitas Relasi Satu ke Banyak
c. Banyak ke Banyak (Many to Many)
Setiap entitas pada himpunan entitas A dapat berhubungan dengan banyak
entitas pada himounan entitas B, demikian, juga sebaliknya. Berikut
kardinalitas banyak ke banyak dapat dilihat pada gambar dibawah ini.
Sumber: (Yakub:35)
Gambar II.15
Kardinalitas Relasi Banyak ke Banyak
27
4. Logical Record Structure (LRS)
Menurut Frieyadie (2007:13) “LRS merupakan hasil dari pemodelan
Entity Relational Ship (ER) beserta atributnya sehingga bisa terlihat hubungan-
hubungan antar entitas”.
Dalam pembuatan LRS terdapat 3 hal yang dapat mempengaruhi yaitu:
a. Jika tingkat hubungan (cardinality) satu pada satu (one-to-one), maka di
gabungkan dengan entitas yang lebih kuat (strong entity), atau digabungkan
dengan entitas yang memiliki atribut yang lebih sedikit.
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.
5. Pengujian Web
Menurut Rosa dan Shalahuddin (2013:275) mengemukakan bahwa:
Pengujian adalah satu set aktifitas yang direncanakan dan sistematis untuk
menguji atau mengevaluasi kebenaran yang diinginkan. Pada perangkat lunak ada
sebuah pengujian elemen sebuah topik yang memiliki cakupan luas dan sering
dikaitkan dengan verifikasi (verification) dan validasi (validation) (V&V).
Pengujian untuk verifikasi dilakukan mulai dari lingkup yang kecil naik
ke lingkup yang besar seperti pada Gambar II.12.
28
Sumber: Rossa dan Shalahuddin (2013:275)
Gambar II.16
Hirarki Pengujian Sistem
Sedangkan pengujian untuk validasi memiliki beberapa pendekatan
sebagai berikut:
a. Black-Box Testing (Pengujian Kotak Hitam)
Black Box Testing yaitu menguji perangkat lunak dari segi spesifikasi
fungsional tanpa menguji desain dan kode program. Pengujian dimaksudkan
untuk mengetahui 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 pengujuan kotak hitam harus dibuat
dengan kasus benar dan kasus salah, misalkan untuk proses login maka kasus
uji yang dibuat adalah:
1) Jika user memasukan nama pemakai (username) dan kata sandi
(password) yang benar.
29
2) 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.
b. White-Box Testing (Pengujian Kotak Putih)
White Box Testing yaitu menguji pernagkat lunak dari segi desain dan kode
program apakah mampu menghasilkan fungsi-fungsi, masuk, dan keluaran
sesuai dengan spesifikasi kebutuhan. Pengujian kotak putih dilakukan dengan
memeriksa lojik dari kode program. Pembuatan kasus uji bisa mengikuti
standar pengujian dari standar pemrograman yang seharusnya. Pengujian
kotak putih misalkan menguji alur (dengan menelusuri) pengulangan (looping)
pada logika pemrograman seperti ilustrasi berikut:
Sumber: Rosa dan Shalahuddin (2013:276)
Gambar II.17
Pengujian Kotak Putih