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