Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
7
BAB II
LANDASAN TEORI
2.1. Konsep Dasar Web
Pembuatan Tugas Akhir ini tidak lepas dari teori-teori yang mendukung
kemudahan dalam mempelajari dan merancang sebuah website yang diharapkan dapat
berfungsi secara maksimal. Sebuah website yang mudah digunakan dan mudah
dimengerti akan sangat membantu pengguna dalam pencarian informasi yang
diinginkan. Berikut ini adalah teori pendukung yang memperkuat penulisan Tugas
Akhir ini.
2.1.1. Website
Website atau situs dapat diartikan sebagai kumpulan-kumpulan halaman
yang digunakan untuk menampilkan informasi yang bersifat statis maupun dinamis
yang membentuk suatu rangkaian yang saling terkait dimana masing-masing
dihubungkan dengan jaringan-jaringan halaman (hyperlink). Website biasa juga
disebut dengan web.
Menurut Sibero (2013:11), “Web adalah suatu sistem yang berkaitan
dengan dokumen digunakan sebagai media untuk menampilkan teks, gambar,
multimedia, dan lainnya pada jaringan internet”.
8
Secara garis besar website dapat digolongkan menjadi tiga, yaitu :
a. Website Statis
Website statis adalah website yang tidak memiliki kode server-side processing
seperti PHP atau ASP.NET. secara teknis, yang disebut dengan website statis
adalah halaman web dengan ekstensi html atau htm. Website statis pada
umumnya hanya digunakan untuk menampilkan informasi tanpa meminta data
dari user. Kebanyakan website di dunia, pada awalnya hanya berupa halaman
statis, hingga ditemukannya Tag FORM pada kode HTML.
b. Website Dinamis
Website dinamis merupakan website yang dibuat dari file yang mengandung
kode server-side processing seperti PHP atau ASP.NET. Website dinamis
memberikan kesempatan kepada user untuk lebih berinteraksi dengan
halaman web tersebut. Contoh diperlukannya website dinamis adalah ketika
pembuatan halaman buku tamu, atau pembuatan aplikasi-aplikasi database.
c. Website interaktif
Website interaktif adalah website yang didalamnya terdapat komunikasi secara
aktif. Contoh dari website interaktif adalah web forum yang didalamnya user
dapat berinteraktif atau beradu argumentasi dengan user lain atau pemilik web
itu sendiri mengenai permasalahan yang sedang diperbincangkan.
9
Berikut adalah beberapa hal yang berhubungan dengan website :
1. Internet
Melalui perkembangan informasi, tercipta suatu jaringan antar komputer yang
saling berkaitan. Jaringan ini dikenal dengan nama internet. Internet telah
memberikan konstribusi dan andil yang sangat besar bagi perkembangan dunia.
Kehadiran internet telah menghapus batas dan jarak terhadap akses informasi.
Menurut Sibero (2013:10), “Internet adalah jaringan komputer yang menghubungkan
antara jaringan secara global, internet dapat disebut juga jaringan dalam suatu
jaringan yang luas”.
Ada tiga komponen dasar yang membuat internet berfungsi, yaitu :
a. Jaringan komputer, berfungsi sebagai media atau saluran yang digunakan
untuk lalu lintas data.
b. Protocol berfungsi sebagai alat komunikasi dari satu sistem ke sistem lain.
c. Program aplikasi, adalah fasilitas yang digunakan oleh pemakai untuk dapat
berinteraksi di internet.
2. Web Browser
Menurut Sibero (2013:12), “Web browser adalah aplikasi perangkat lunak
yang digunakan untuk mengambil dan menyajikan sumber informasi web,
didefinisikan dengan Uniform Resource Identifer (URL) yang dapat terdiri dari
halaman web, video, gambar, ataupun konten lainnya”. Untuk dapat mengakses
khususnya WWW (World Wide Web) diperlukan program aplikasi yang disebut
browser dan sebuah sistem yang harus berada dilingkaran jaringan TC/IP (Transfer
Control/Internet Protocol) internasional (internet). Tugas browser membuka sebuah
10
dokumen setelah sebuah sub kalimat hypertext tertentu yang dipilih. User hanya perlu
meng-klik, maka informasi lainnya yang berhubungan dengan kalimat tersebut akan
tampil. Beberapa web browser yang banyak digunakan oleh user diantaranya adalah
Internet Explorer, Mozilla Firefox, Opera dan lain-lain.
3. Web Server
Menurut Sibero (2013:11), “Web server adalah sebuah komputer yang terdiri
dari perangkat keras dan perangkat lunak”. Secara bentuk fisik dan cara kerjanya,
perangkat keras web server tidak berbeda dengan komputer rumah atau PC, yang
membedakan adalah kapasitas dan kapabilitasnya. Perbedaan tersebut dikarenakan
web server bekerja sebagai penyedia layanan yang dapat diakses oleh banyak
pengguna, sehingga dibutuhkan kapasitas dan kapabilitas dibandingkan dengan PC,
dukungan tersebut sangat dibutuhkan agar web server dapat berjalan optimal.
2.1.2. Bahasa Pemrograman
Dalam merancang dan membangun sebuah sistem aplikasi berbasis web
dibutuhkan bahasa pemrograman. Adapun bahasa pemrograman yang digunakan
antara lain :
1. HTML (Hypertext Markup Language)
Menurut Sibero (2013:19), “HTML (Hyper Text Markup Language) adalah
bahasa yang digunakan pada dokumen web sebagai bahasa untuk pertukaran
dokumen web”. HTML adalah suatu bahasa pemrograman hypertext. Hal ini memiliki
fungsi untuk membangun kerangka atau format web berbasis HTML File HTML
11
adalah file teks biasa yang didalamnya terdiri dari tag-tag markup, file HTML ini bisa
kita buat menggunakan software text editor seperti notepad.
Berikut adalah daftar tag-tag HTML yang bisa digunakan untuk membuat
halaman situs :
a. Tag<html…</html>
Tag ini adalah tag markup utama dari sebuah dokumen html yang mengapit
tag-tag markup lainnya.
b. Tag<head>…<//head>
Ruang diantara tag ini digunakan sebagai tempat untuk meletakkan meta data
suatu dokumen HTML.
c. Tag<title>…</title>
Tag ini digunakan untuk membuat judul suatu dokumen HTML.
d. Tag<body>…</body>
Tag ini digunakan untuk menempatkan content atau isi suatu dokumen
HTML.
e. Tag<p>…</p>
Tag ini digunakan untuk membuat suatu paragraf.
f. Tag<br>
Tag ini digunakan untuk membuat baris kosong.
g. Tag<i>…</i>
Tag ini digunakan untuk membuat tampilan teks yang berbeda diantara ruang
tag tersebut menjadi miring (italic).
12
h. Tag<a>…</a>
Tag ini digunakan bersama atribut href=””, untuk membuat suatu link.
2. PHP (Pretext Hypertext Preprocessor)
Menurut Sibero (2013:49) “PHP adalah pemrograman interpreter yaitu proses
penerjemahan baris kode sumber menjadi kode mesin yang dimengerti komputer
secara langsung pada saat baris kode dijalankan”. PHP disebut sebagai pemrograman
Server Side Programming, hal ini dikarenakan seluruh prosesnya dijalankan pada
server.
Pemrograman PHP dapat ditulis dalam dua bentuk yaitu penulisan baris kode
PHP pada file tunggal dan penulisan kode PHP pada halaman html. Kedua cara
penulisan tersebut tidak memiliki perbedaan, hanya menjadi kebiasaan gaya
penulisan dari programmer.
3. XAMPP
Menurut Aditya (2011:16) mendefinisikan bahwa “XAMPP adalah perangkat
lunak bebas, yang mendukung banyak sistem operasi, merupakan kompilasi dari
beberapa program”. Fungsinya adalah sebagai server yang berdiri sendiri (localhost),
yang terdiri atas program apache HTTP Server, MySQL database, dan penerjemah
bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP
merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP
dan Perl. Program ini tersedia dalam GNU General Public License dan bebas,
merupakan web yang mudah digunakan yang dapat melayani tampilan halaman web
yang dinamis.
13
4. JavaScript
Menurut Hidayatullah dan Jauhari (2014:422) “JavaScript adalah suatu
bahasa scripting yang digunakan sebagai fungsionalitas dalam membuat suatu web”.
JavaScript sendiri bersifat client-side sehingga untuk menggunakannya browser
Anda harus mengaktifkan fitur JavaScript (bila konfigurasi browser Anda diset pada
konfigurasi default, secara otomatis browser Anda sudah mengaktifkan fitur
JavaScript).
JavaSript dikembangkan oleh netscape, sebagai bahasa pemrograman
“sederhana” karena tidak dapat digunakan untuk membuat suatu aplikasi atau applet.
Namun, dengan JavaScript kita dapat membuat sebuah halaman web yang interaktif
dengan mudah.
5. CSS (Cascading Style Sheet)
Menurut Agung (2012:41) “CSS merupakan singkatan dari Cascading Style
Sheet. Jadi dapat disimpulkan secara sederhana sebagai berikut HTML 5 digunakan
untuk menentukan struktur dokumen website dan CSS bertugas untuk mempercantik
website ini.”
CSS digunakan para web designer untuk mengatur style elemen yang ada
dalam halaman web, mulai dari memformat teks, sampai pada memformat layout.
Tujuan dari penggunaan CSS ini adalah agar diperoleh suatu konsistensi style pada
elemen tertentu. Sebagai contoh, misalnya untuk mengatur style elemen heading,
diinginkan jenis font-nya adalah Arial, ukuran 20 pixel, dan berwarna merah. Dengan
CSS, kita cukup menuliskan property dari elemen heading tersebut sekali saja, dan
akan memperoleh hasil yang diinginkan.
14
6. Macromedia Dreamweaver 8
Menurut Hadi (2009:2) “Macromedia Dreamweaver 8 adalah sebuah program
web editor yang digunakan untuk membuat dan mendesain web”. Dreamweaver 8
mempunyai kehandalan dalam membuat dan mendesain web tanpa harus menulis tag-
tag HTML (Hyper Text Markup Language) satu persatu. Dreamweaver menggunakan
metode klik dan drag yang dapat mempermudah dalam membuat website dengan
cepat, mudah, menarik dan interaktif. Software ini juga menghimpun banyak
teknologi terkini untuk menemani dan membantu dalam merancang sebuah website.
Macromedia Dreamweaver 8 memiliki satu jendela mini yang disebut HTML Source
tempat kode-kode HTML tertulis. Setiap kali mendesain website seperti menulis kata,
meletakkan gambar, membuat tabel, dan proses lainnya, tag-tag HTML akan tertulis
secara langsung mengiringi proses pengaturan website.
7. JQuery
Menurut Hidayatullah dan Jauhari (2014:426), “JQuery adalah kumpulan
fungsi-fungsi JavaScript yang sudah dibentuk sebagai suatu objek”. Sehingga
penggunaan JQuery ini bisa dikategorikan sebagai suatu library yang nantinya kita
hanya perlu menggunakan fungsi-fungsi di dalam library tersebut.
JQuery pertama kali dirilis oleh Jhon Resig pada tahun 2006. Pada
perkembangannya JQuery tidak sekedar sebagai library JavaScript, namun memiliki
keandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak
developer web menggunakannya. JQuery dikenal dengan slogan “Write less, do
more” artinya penulisan kode yang sedikit tetapi memiliki beberapa aksi (action).
15
2.1.3. Basis Data
Menurut Ichwan (2011:12) bahwa “Basis data (Database) adalah
kumpulan data berelasi yang disusun, diorganisasikan dan disimpan secara sistematik
dalam media simpan komputer mengacu kepada metode-metode tertentu sedemikian
rupa sehingga dapat diakses secara cepat dan mudah menggunakan program atau
aplikasi komputer untuk memperoleh data dari basis data tersebut”.
Sebagai satu kesatuan istilah, basis data sendiri dapat didenifinikan dalam
sejumlah sudut pandang, seperti :
a. Himpunan kelompok data (arsip) yang saling berhubungan yang diorganisasi
sedemikian rupa agar kelak dapat dimanfaatkan kembali dengan cepat dan
mudah.
b. Kumpulan data yang saling berhubungan yang disimpan secara bersama
sedemikian rupa dan tanpa pengulangan (redundansi) yang tidak perlu, untuk
memenuhi berbagai kebutuhan.
c. Kumpulan file atau table atau arsip yang saling berhubungan yang disimpan
dalam media penyimpanan elektronis untuk selanjutnya di dalam buku ini,
kita akan menggunakan istilah tabel (table), sebagai komponen utama
pembangun basis data.
16
1. MySQL
Menurut Sadeli (2013:10) menjelaskan bahwa “MySQL database yang
menghubungkan script php menggunakan perintah query dan escape character yang
sama dengan php”. MySQL mempunyai tampilan client yang mempermudahkan anda
dalam mengakses database dengan kata sandi untuk mengijinkan proses yang bisa
anda lakukan.
2. PHPMyAdmin
Menurut Sadeli (2013:10), “PHPMyAdmin adalah sebuah software yang
berbentuk seperti halaman situs yang terdapat pada web server”. Fungsi dari halaman
ini adalah sebagai pengendali database MySQL sehingga pengguna MySQL tidak
perlu repot untuk menggunakan perintah-perintah SQL. Karena dengan adanya
halaman ini semua hal tersebut dapat dilakukan hanya dengan meng-klik menu fungsi
yang ada pada halaman PHPMyAdmin.
2.1.4. Model Pengembangan Perangkat Lunak
Menurut Sukamto, dan M. Shalahuddin (2013:38), “Salah satu model
pengembangan perangkat lunak adalah model Waterfall”. Model waterfall (air terjun)
merupakan salah satu model SDLC sering juga disebut model sequential linier atau
alur hidup klasik (classic life cycle). Model air terjun menyediakan pendekatan alur
hidup perangkat lunak secara sequential atau terurut dimulai dari analisis, desain,
pengodean, pengujian, dan tahap pendukung (support).
17
Berikut adalah gambar model air terjun :
Sumber : Sukamto dan M. Shalahuddin (2013:28)
Gambar II. 1. Ilustrasi Model Waterfall
a. Analisis 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.
b. 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
Pengkodean
Pengujian
Sistem Rekayasa Informasi
Analis
Desain
18
selanjutnya. Desain perangkat lunak yang dihasilkan pada tahap ini juga perlu
didokumentasikan.
c. Pembuatan kode program
Desain ditranslasikan ke dalam program perangkat lunak. Hasil dari tahap ini
adalah program komputer sesuai yang telah dibuat pada tahap desain.
d. Pengujian
Pengujian fokus pada perangkat lunak secara dari segi logik 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.
e. Pendukung (support) atau pemeliharaan (maintenance)
Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan
ketika sudah dikirimkan ke user. Perubahan 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, tetapi untuk membuat perangkat
lunak baru.
19
2.2. Teori Pendukung
Teori pendukung merupakan alat yang digunakan untuk mendukung dan
menggambarkan bentuk dari logika model dari suatu sistem dengan menggunakan
simbol-simbol, lambang-lambang, diagram-diagram yang menunjukan secara tepat
arti dan fungsinya.
1. Struktur Navigasi
Menurut Andre (2014) “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”(www.andre.web.id).
Menurut Irwan (2010) ada 4 macam dasar struktur navigasi yaitu :
a. Struktur Linier
Struktur navigasi yang hanya mempunyai satu rangkaian cerita yang terurut.
Struktur ini menampilkan satu demi satu tampilan layar secara berurutan
menurut aturannya.
Sumber : Irwan (2010)
Gambar II.2.
Struktur Navigasi Linier
20
b. Struktur Hierarki
Struktur navigasi hierarki sering disebut struktur navigasi bercabang, yang
merupakan suatu struktur yang mengandalkan percabangan untuk
menampilkan data atau gambar layar berdasarkan kriteria tertentu. Tampilan
pada menu pertama disebut master page (halaman utama satu), halaman
tersebut mempunyai halaman percabangan yang disebut slave page (halaman
pendukung), dan jika dipilih akan menjadi halaman kedua, dan seterusnya.
Sumber : Irwan (2010)
Gambar II.3.
Struktur Navigasi Hierarki
c. Struktur Non Linier
Struktur non linier merupakan pengembangan dari struktur penjejakan linier
yang diperkenalkan membuat struktur navigasi bercabang. Pada percabangan
non linier walaupun terdapat banyak percabangan tetapi tiap-tiap tampilan
mempunyai kedudukan yang sama, sehingga tidak terdapat “master page” dan
“slave page”.
21
Sumber : Irwan (2010)
Gambar II.4.
Struktur Navigasi Non Linier
d. Struktur Campuran
Struktur navigasi yang merupakan gabungan dari struktur navigasi non linier
dan hierarki, dan biasa disebut juga struktur navigasi bebas, maksudnya
adalah jika suatu tampilan membutuhkan percabangan.
Sumber : Irwan (2010)
Gambar II.5.
Struktur Navigasi Campuran
22
2. Entity Relationship Diagram (ERD)
Menurut Verdi (2012:276) memberikan batasan bahwa “Entity Relationship
Diagram (ERD) adalah suatu rancangan atau bentuk hubungan suatu kegiatan
didalam sistem yang berkaitan langsung dan mempunyai fungsi didalam proses
tersebut”. ERD merupakan suatu pemodelan dari basis data relasional yang
didasarkan atas presepsi didalam dunia nyata, dunia ini senantiasa terdiri dari
sekumpulan objek yang saling berhubungan antara satu dengan yang lainnya. Suatu
objek disebut entity dan hubungan yang dimilikinya disebut relationship. Suatu entity
bersifat unik dan memiliki atribut sebagai pembeda dengan entity lainnya.
ERD merupakan suatu model untuk menjelaskan hubungan antara data dalam
basis data berdasarkan objek-objek dasar data yang mempunyai hubungan antara
relasi. ERD untuk memodelkan struktur data dan hubungan antara data, untuk
menggambarkannya digunakan beberapa notasi dan simbol. Pada dasarnya ada tiga
simbol yang digunakan, yaitu :
a. Entity
Entity merupakan objek yang mewakili sesuatu yang nyata dan dapat
dibedakan simbol dari entity ini biasanya digambarkan dengan persegi
panjang.
b. Atribut
Setiap entitas pasti mempunyai elemen yang disebut atribut yang berfungsi
untuk mendeskripsikan karakteristik dari entitas tersebut. Isi dari atribut
mempunyai sesuatu yang dapat mengidentifikasikan isi elemen satu dengan
yang lain.
23
c. Hubungan/Relasi
Relasi didefinisikan sebagai hubungan yang terjadi antara entity. Representasi
diagram relasi adalah sebuah garis lurus yang menghubungkan dua buah
entity, kunci relasi harus mengidentifikasi sebuah baris yang unik di dalam
sebuah relasi.
d. Derajat Relasi
Ada tiga tingkat kemungkinan yang terjadi yaitu :
1) One to One (1:1)
Tingkat hubungan dinyatakan one to one jika suatu kejadian pada entity
pertama hanya mempunyai satu hubungan dengan satu kejadian pada
entitas kedua. Demikian juga sebaliknya satu kejadian pada entity yang
pertama.
2) One to Many (1:M)
Tingkat hubungan one to many adalah sama dengan many to one (M:1),
tergantung dari arah mana hubungan tersebut dilihat. Untuk satu kejadian
pada entitas yang pertama dapat mempunyai banyak hubungan dengan
kejadian pada entitas kedua. Sebaliknya satu kejadian pada entitas yang
kedua hanya bisa mempunyai satu hubungan dengan satu kejadian pada
entitas pertama.
24
3) Many to Many (M:N)
Tingkat hubungan many to many terjadi jika tiap kejadian pada sebuah
entitas mempunyai banyak hubungan dengan kejadian pada entitas
lainnya, baik dilihat dari entitas yang pertama maupun dilihat dari sisi
entitas yang kedua.
3. Logical Reord Structure (LRS)
Menurut Ripai dalam goresanpena.com (2013) mengemukakan “LRS (Logical
Record Structure) adalah representasi dari struktur record-record pada tabel-tabel
yang terbentuk dari hasil relasi antar himpunan entitas”. Beberapa record
digambarkan oleh kotak empat persegi panjang dan dengan nama yang unik. Beda
LRS dengan diagram E-R nama, tipe record berada diluar kotak field tipe record
ditempatkan.
Logical record structure terdiri dari link-link diantara tipe record. Link ini
menunjukkan arah satu tipe record lainnya. Banyak link dari LRS yang diberi tanda
field-field yang kelihatan pada kedua link tipe record. Penggambaran LRS mulai
dengan menggunakan model yang dimengerti. Dua metode yang dapat digunakan,
dimulai dengan hubungan kedua model yang dapat dikonversikan ke LRS. Metode
yang lain dimulai dengan ER-diagram dan langsung dikonversikan ke LRS.
4. Pengujian Web Black-Box Testing
Menurut Sukamto dan Shalahuddin (2013:275), ”Black-Box Testing
(Pengujian Kotak Hitam) yaitu menguji perangkat lunak dari segi fungsional tanpa
menguji desain dan kode program”. Dengan kata lain, blackbox merupakan user
testing. Pengujian yang mengabaikan mekanisme internal sistem atau komponen dan
25
fokus semata-mata pada output yang dihasilkan yang merespon input yang dipilih dan
kondisi eksekusi. Perancang uji memilih input yang valid dan tidak valid serta
menentukan ouput yang benar.
Metode uji dapat diterapkan pada semua tingkat pengujian perangkat lunak
unit, integrasi, fungsional, sistem dan penerimaan. Ini biasanya terdiri dari
kebanyakan jika tidak semua pengujian pada tingkat yang lebih tinggi, tetapi juga
bisa mendominasi testing juga.
Uji coba blackbox berusaha untuk menemukan kesalahan dalam beberapa
kategori, diantaranya :
a. Fungsi-fungsi yang salah atau hilang.
b. Kesalahan interface.
c. Kesalahan dalam struktur data atau akses database eksternal.
d. Kesalahan performa.
e. Kesalahan inisialisasi dan terminasi.