7 BAB II LANDASAN TEORI 2.1 World Wide Web Dunia internet

BAB II
LANDASAN TEORI
2.1
World Wide Web
Dunia internet semakin berkembang, terutama penggunaanya dalam
bidang media komunikasi dan informasi. Internet adalah suatu jaringan komputer
global, sedangkan World Wide Web bukan sekedar jaringan tetapi didalamnya
terdapat suatu set aplikasi komunikasi dan sistem perangkat lunak yang memiliki
karakteristik tertentu.
2.2
Perancangan Antarmuka Pengguna Aplikasi Web
Perancangan antarmuka pengguna adalah bagian dari bidang studi yang
dikenal dengan Interaksi Manusia dan Komputer (Human Computer Interaction).
Interaksi Manusia dan Komputer adalah sebuah studi perencanaan, dan
perancangan tentang bagaimana manusia dan computer bekerja bersama sehingga
kebutuhan manusia dapat dicapai dengan cara yang seefektif mungkin.
Antarmuka pengguna merupakan bagian dari komputer dan perangkat
lunaknya dimana manusia dapat melihat, mendengar, menyentuh, berinteraksi,
atau memahami.
Dalam sebuah perancangan antarmuka sebuah web dikenal sebuah konsep
The Three Layers of The Web, atau tiga lapisan web.
7
Gambar 2.1 layer of web design
Ketika merancang sisi antarmuka pengguna sebuah web applikasi,
dokumen web pada dasarnya terdiri dari tiga tingkatan lapisan. Ketiga lapisan itu
ialah content, presentation, dan behavior.
Content adalah lapisan dasar pada sebuah antarmuka web, yang berupa
document yang dapat diakses secara langsung oleh pengguna sebuah web. Dalam
implementasinya, content merupakan lapisan HTML/XHTML.
Presentation adalah lapisan kedua yang merupakan lapisan yang berfungsi
untuk memberikan sebuah penampilan tertentu pada sebuah dokumen. Lapisan ini
berfungsi untuk memberikan style tertentu kepada dokumen yang diakses oleh
pengguna. Dalam implementasinya lapisan ini adalah sebuah dokumen CSS.
Behaviour merupakan lapisan terakhir dari The Three Layers of The Web.
Lapisan ini berfungsi untuk memberikan behavior tertentu seperti interaktifitas
dan dynamic behavior
pada sebuah dokumen atau elemen pada dokumen
8
tersebut. Seperti, memberikan efek hover pada sebuah tombola tau link. Pada
implementasinya lapisan ini adalah sebuah dokumen javascript.
2.2.1 XHTML
Berdasarkan pembagian layer diatas, HTML merupakan tingkatan pertama
dimana inti dari informasi yang ingin ditampilkan berada pada layer ini. HTML
merupakan singkatan dari Hypertext Markup Language, yang digunakan oleh
semua pembuat halaman web karena bersifat sederhana dan terbuka. HTML tidak
tergantung pada perangkat lunak atau perangkat keras tertentu untuk membuat
atau menjalankannya.
XHTML adalah versi lain dari HTML. XHTML merupakan singkatan dari
Extensible Hypertext Markup Language. XHTML merupakan pengembangan dari
HTML. XHTML memberikan struktur dokumen yang lebih terstruktur
dibandingkan dengan dokumen HTML. Sebuah dokumen XHTML didefinisikan
sebagai dokumen XML.
XHTML adalah keluarga dari tipe dokumen HTML 4. XHTML merupakan
tipe dokumen yang berbasiskan XML dan di-design untuk bekerja pada user
agents berbasis XML.
2.2.2 CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet) adalah cara yang direkomendasikan untuk
mengontrol lapisan presentation pada sebuah dokumen web. Keuntungan dalam
menggunakan CSS untuk mengontrol lapisan presentation dibandingkan dengan
9
menggunakan markup HTML adalah, dengan menggunakan CSS styling pada
sebuah dokumen web dapat dipisahkan. Dengan pemisahan tersebut, sebuah style
pada dokumen dapat dengan mudah dikontrol, dirubah maupun dihapus tanpa
harus repot melakukan banyak perubahan.
CSS adalah kumpulan aturan-aturan pemformatan yang mengontrol
tampilan dari konten dalam sebuah halaman web yang direkomendasikan oleh
W3C. CSS memiliki fungsi mengatur tampilan dari halaman web yang akan
dibuat. Dengan segala kelebihannya dalam pengaturan antarmuka pengguna, CSS
sebagai lapisan presentation memiliki peranan penting dalam pembangunan
sebuah web dewasa ini.
2.2.3 Javascript dan jQuery
Javascript yang merupakan behavior layer dalam sebuah aplikasi web
adalah sebuah bahasa scripting (scripting language) yang memberikan
pengambang web keleluasaan untuk meningkatkan sebuah web statis dengan
menyediakan content yang dinamis, personal dan interaktif.
Javascript adalah sebuah interpreted language dan bukanlah sebuah
compiled language. Pada dasarnya komputer tidak perlu mengerti javascript sama
sekali. Komputer membutuhkan sesuatu untuk menafsirkan kode javascript dan
merubahnya menjadi sesuatu yang dapat dimengerti oleh komputer, itulah kenapa
javascript disebut sebagai interpreted language.
Komputer hanya mengenali kode mesin, yang pada dasarnya merupakan
sebuah kode biner (yaitu satu dan nol). Ketika browser mengenali javascript,
10
browser kemudian mengirimkan kode javascript tersebut kepada sebuah program
khusus bernama interpreter , yang kemudian merubah kode javascript tersebut ke
dalam kode mesin yang dikenali oleh computer.
Oleh karena javascript bukanlah sebuah compiled language, maka dapat
dijelaskan pula bahwa javascript bukanlah sebuah script bagian dari Java.
jQuery adalah sebuah javascript library yang cukup popular digunakan
pada saat ini. jQuery digunakan karena memiliki beberapa keuggulan, antara lain
:
1. Kompatibilitas antar browser
Ada kalanya dalam mengembangkan sebuah web dengan menggunakan
javascript, tampilan yang dihasilkan pada beberapa buah browser berbeda
antara satu dan yang lainnya. jQuery memfasilitasi masalah ini dengan
adanya fungsi – fungsi untuk memecahkan masalah ini. Pengembang tidak
lagi harus membuat fungsi – fungsi yang berbeda untuk setiap browser.
2. CSS 3.0 Selectors
jQuery juga memfasilitasi permasalahan dalam penggunaan CSS 3.0 yang
tidak sepenuhnya didukung oleh semua browser.
3. Plugin
Pengembang jQuery telah membuat jQuery sedemikian mungkin, sehingga
memudahkan untuk siapa pun dalam mengembangkan fungsionalitas –
fungsinalitas lain yang berdasarkan fungsi inti dari jQuery, sehingga saat
ini terdapat banyak sekali plugin – plugin yang beredar yang telah
11
dikembangkan oleh komunitas. Hal ini memudahkan pengembang web
dalam membuat fungsionalitas yang rumit sekali pun.
4. Mempertahankan keteraturan Markup
Yang dimaksud dengan mempertahanakan keteraturan markup disini
adalah,
dengan
menggunakan
jQuery
pengembang
web
dapat
mempertahankan struktur markup HTML/XHTML tetap bersih tanpa
terganggu oleh script – script jQuery sehingga memudahkan dalam
pemeliharaan dokumen web.
2.3
PHP
PHP adalah bahasa pemrograman seperti halnya Java, Pascal, Basic atau
C. PHP diperkenalkan pada tahun 1994 , dan merupakan hasil kerja dari Rasmus
Lerdorf. Karena sifatnya yang open source, maka semua orang di seluruh dunia
boleh mengembangkan, menggunakan dan mendistribusikan secara gratis, pada
awalnya, kepanjangan dari PHP adalah personal home page, tetapi kemudian
mengalami
perubahan
menjadi
PHP
Hypertext
Preprocessor.
Adapun keunggulan – keunggulan yang dimiliki oleh PHP, yaitu :

Mudah digunakan. Sintaks PHP mudah dipelajari, bahkan untuk kalangan
non-programmer.

Serbaguna. PHP dapat berjalan pada berbagai macam sistem operasi
seperti windows, linux dan MacOs.

Gratis. Pengembang web dapat menggunakan PHP dengan gratis.
12

Bantuan penggunaan sangat banyak. Dukungan terhadap komunitas
pengembang web yang menggunakan PHP telah begitu banyak, karena itu
pengembang cukup mudah untuk mendapatkan bantuan.
Script PHP tidak dikirim secara langsung kepada client, tetapi di uraikan
terlebih dahulu oleh engine PHP. Elemen HTML dalam script dibiarkan begitu
saja, tetapi kode PHP di terjemahkan dan dieksekusi. Kode PHP dalam script bisa
mengeksekusi query database, membuat gambar, membaca dan menulis file dan
bisa berkomunikasi dengan server. Output dari kode PHP dikombinasikan dengan
HTML dalam script dan hasilnya dikirim kepada user.
2.4
Pemodelanan Data
Pemodelan data adalah teknik untuk mengatur dan mendokumentasikan
data dari sebuah sistem. Pemodelan data merupakan cara mempresentasikan
(mewakilkan) sebuah kondisi atau keadaan dari lapangan ke komputer.
2.4.1 Diagram Konteks
Diagram konteks merupakan alat pemodelan atau suatu diagram yang
menggambarkan sistem berbasis komputer yang dirancang secara global dan
merupakan suatu diagram alir data tingkat atas. Diagram konteks menggambarkan
seluruh jaringan, baik masukan maupun sebuah keluaran dari sebuah sistem.
Diagram
konteks terdiri
dari sebuah simbol
proses
tunggal
yang
menggambarkan sebuah sistem dan menunjukan data aliran utama untuk dan dari
terminator. Diagram ini merupakan dasar yang digunakan untuk menentukan
13
aliran data yang mengalir menuju sistem (input system) dan keluar dari sistem
(output system), yang meliputi objek berupa kesatuan luar (external entity).
Diagram konteks dapat mendefinisikan jangkauan proses penurunan sistem
informasi yaitu menetukan apa yang menjadi bagian dari sistem informasi dan apa
yang tidak menjadi bagian sistem informasi.
2.4.2 Diagram Aliran Data (DFD)
Diagram Aliran Data memodelkan kejadian dan proses (aktifitas yang
mengubah data) dalam sebuah sistem. Dari DFD dapat terlihat bagaimana
data mengalir ke dalam, ke luar dan di dalam sistem tersebut.
Beberapa simbol yang digunakan dalam Data Flow Diagram (DFD)
antara lain:
a. Proses (Process)
Proses adalah simbol pertama data flow diagram. Proses
dilambangkan dengan lingkaran, dimana proses ini menunjukan bagian
dari sistem yang mengubah satu atau lebih input dan output. Nama proses
dituliskan dengan satu kata, singkatan atau kalimat sederhana.
b. Aliran Data (Flow)
Aliran data digambarkan dengan tanda panah dari proses. Aliran
data juga digunakan untuk menunjukan bagian – bagian informasi dari
satu bagian ke bagian lain. Pembagian nama untuk aliran ini menunjukan
sebuah arti untuk sebuah aliran. Untuk kebanyakan sistem yang dibuat,
14
aliran data sebenarnya mengambarkan data yakni angka, huruf, pesan, dan
macam - macam informasi lainnya.
c. Simpanan Data (Storage)
Simpanan data digunakan sebagai penyimpanan bagi paket – paket
data. Notasi penyimpanan data digambarkan dengan garis horizontal yang
pararel. Simpanan data merupakan simpanan data dari data yang berupa
suatu file atau database di sistem komputer ataupun berupa arsip atau
catatan manual. Nama dari simpanan data menunjukan nama file-nya.
d. Kesatuan Luar (External Entity)
Setiap sistem pasti mempunyai batas sistem (boundary) yang
memisahkan suatu sistem dengan lingkungan luarnya. Kesatuan luar
merupakan kesatuan (entity) dilingkungan luar sistem yang dapat berupa
orang, Organisasi atau sistem lainnya yang berada di lingkungan luarnya
yang akan memberikan input atau output dari sistem.
2.5
Database
Basis data (database) dapat dibayangkan sebagai sebuah lemari arsip yang
ditempatkan secara berurutan untuk memudahkan dalam pengambilan kembali
data tersebut. Basis data menunjukkan suatu kumpulan data yang dipakai dalam
suatu lingkungan perusahaan atau instansi. Penerapan basis data dalam sistem
informasi disebut sebagai sistem basis data (database system).
15
Basis data terdiri dari kata basis dan data. Basis dapat diartikan sebagai
gudang atau tempat bersarang dan Data yang berarti representasi fakta dunia nyata
yang mewakili suatu objek seperti manusia, hewan, peristiwa, konsep dan
sebagainya yang direkam dalam bentuk angka, huruf, simbol, teks, gambar, bunyi
atau kombinasinya.
Jadi dapat disimpulkan bahwa Basis Data merupakan kumpulan data yang
saling berhubungan yang disimpan secara bersama sedemikian rupa dan tanpa
pengulangan (redudancy) yang tidak perlu, untuk memenuhi berbagai kebutuhan.
Atau bisa diartikan sebagai kumpulan file atau arsip yang saling berhubungan
yang disimpan dalam media penyimpanan elektronik.
Perancangan basis data dibutuhkan agar diperoleh suatu sistem yang sesuai
dengan apa yang diinginkan, dimana dapat melalui tahapan berikut :
a. Entity Relationship Diagram
ERD atau biasa disebut dengan diagram E-R secara grafis menggambarkan isi
sebuah database. Diagram ini memiliki dua komponen utama yaitu entity dan
relasi. Untuk melambangkan fungsi diatas maka digunakan simbol-simbol
yang bisa dilihat pada daftar simbol.
b. Normalisasi
Normalisasi merupakan tahapan perancangan dalam membangun basis data
relasional yang tidak secara langsung berkaitan dengan model data tetapi
menerapkan sejumlah aturan dan kriteria standar untuk menghasilkan struktur
tabel yang normal. Adapun langkah-langkah untuk menghasilkan struktur
tabel yang normal diantaranya yaitu :
16
1) Bentuk tidak normal (Unnormalized form)
Bentuk tidak normal yaitu bentuk ini merupakan kumpulan data yang tidak
ada keharusan mengikuti format tertentu, dapat saja data tidak lengkap
atau terduplikasi.
2) Bentuk normal satu (First normal form) / 1 NF
Bentuk normal satu yaitu bila relasi tersebut mempunyai nilai data yang
atomik, artinya tidak ada lagi kerangkapan data.
3) Bentuk normal dua (Second normal form) / 2NF
Bentuk normal dua yaitu bila relasi tersebut merupakan 1NF dan setiap
atribut tergantung penuh pada primary key.
4) Bentuk normal tiga (Third normal form) / 3NF
Bentuk normal tiga yaitu bila relasi merupakan 2NF dan tidak tergantung
secara transitif pada primary key atau pada bentuk normal tiga ini, mencari
ketergantungan lain selain primary key.
2.5.1 MySQL
MySQL (My Strukture Query Language) adalah sebuah program pembuat
database yang bersifat Open Source, artinya siapa saja boleh menggunakannya
dan tidak dicekal. MySQL merupakan produk yang berjalan pada semua platform
baik Windows atau Linux. Selain itu juga MySQL juga merupakan program
pengakses database yang bersifat jaringan sehingga dapat digunakan untuk multi
user.
17
Kelebihan dari MySQL adalah menggunakan bahasa Query standar yang
dimiliki SQL (Structure Query Language). Sebagai sebuah program penghasil
database, MySQL tidak dapat berjalan sendiri tanpa adanya sebuah aplikasi lain
(Interface). MySQL dapat didukung oleh hampir semua program aplikasi baik
yang open source seperti PHP maupun yang tidak.
18