BAB II LANDASAN TEORI...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 …

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.