BAB II LANDASAN TEORI
2.1 Pemrograman Web (Web Programming) Pemrograman web diambil dari dua suku kata yaitu pemrograman dan web. Pemrograman yang dalam bahasa Inggris adalah programming yang diartikan proses, cara, perbuatan program. Definisi web: jaringan komputer yang terdiri dari kumpulan situs internet yang menawarkan teks dan grafik dan suara dan sumber daya animasi melalui protokol transfer hypertext. Orang banyak mengenal web dengan istilah WWW (world wide web), World Wide Web adalah layanan internet yang paling populer saat ini internet mulai dikenal dan digunakan secara luas setelah adanya layanan WWW. WWW adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk samudra belantara informasi. WWW berjalan dengan protokol HyperText Transfer Protokol (HTTP). Halaman Web merupakan file teks murni (plain
text)
yang
berisi
sintaks-sintaks
HTML
yang
dapat
dibuka/dilihat/diterjemahkan dengan InternetBrowser. Sintaks HTML mampu memuat konten teks, gambar, audio, video dan animasi. Kini internet identik dengan web, karena kepopuleran web sebagai standar antarmuka (interface) pada layanan-layanan yang ada di internet, dari awalnya sebagai penyedia informasi, ini digunakan juga untuk komunikasi dari email sampai dengan chatting, sampai dengan melakukan transaksi bisnis (commerce) (Betha Sidik,Ir, Pemrograman web dengan HTML, Informatika Bandung, 2005). Banyak keuntungan yang diberikan oleh aplikasi berbasis web dari pada aplikasi berbasis desktop, sehingga aplikasi berbasis web telah diadopsi oleh perusahaan sebagai bagian dari strategi teknologi informasinya (http://id.wikipedia.org/wiki/Pemrograman_web). Situs/web dapat dikategorikan menjadi dua yaitu web statis dan web dinamis atau interaktif. Web statis adalah web yang berisi/menampilkan informasi-informasi yang sifatnya statis (tetap), sedangkan web dinamis adalah
5
6
web yang menampilkan informasi serta dapat berinteraksi dengan user yang sifatnya dinamis (Sutarman, 2003:7). Sehingga
untuk
membuat
web
dinamis
dibutuhkan
kemampuan
pemrograman web. Dalam pemrograman web ada 2 kategori (Sutarman, 2003:7): 1.
Server – side Programming
2.
Client – side Programming
2.2 Situs Jejaring Sosial Situs jejaring sosial (bahasa Inggris: Social network sites) merupakan sebuah web berbasis pelayanan yang memungkinkan penggunanya untuk membuat profil, melihat isi pengguna yang tersedia, serta mengundang atau menerima teman untuk bergabung dalam situs tersebut. Tampilan dasar situs jejaring sosial ini menampilkan halaman profil pengguna, yang di dalamnya terdiri
dari
identitas
diri
dan
foto
pengguna
(http://id.wikipedia.org/wiki/Situs_jejaring_sosial).
2.3 Unifield Modelling Language (UML) Unified Modeling Language selanjutnya disebut UML adalah sebuah “bahasa” yang telah menjadi standar dalam industri untuk visualisasi, merancang, dan mendokumentasikan sistem perangkat lunak.UML menawarkan sebuah standar untuk merancang sebuah model sistem (Dharwiyanti dan Wahono, 2). Dengan menggunakan UML kita dapat membuat model untuk semua jenis perangkat lunak, dimana aplikasi tersebut dapat berjalan pada perangkat keras, sistem operasi, dan jaringan apapun serta ditulis dalam bahasa pemrograman apapun.Tetapi karena UML juga menggunakan kelas dan operasi pada konsep dasarnya maka lebih cocok untuk pembuatan perangkat lunak dalam bahasa berorientasi objek seperti C++, Java, C# atau VBNet.Walaupun demikian UML tetap dapat digunakan untuk modeling aplikasi prosedural dalam VB atau C. Seperti bahasa-bahasa lainnya, UML mendefinisikan notasi dan syntax / semantik.
Notasi
UML
merupakan
sekumpulan
bentuk
khusus
untuk
menggambarkan berbagai diagram perangkat lunak. Setiap bentuk memiliki makna tertentu dan syntax UML mendefinisikan bagaimana bentuk-bentuk
7
tersebut dapat dikombinasikan. UML terdiri dari 13 jenis diagram seperti tertulis dalam Tabel 2.1. Tabel 2.1 Diagram UML 2.0 (Dennis et al, 31) No
Diagram
Kegunaan
1
Class
Menggambarkan struktur dan relasi antar kelas yang dimodelkan dalam sistem.
2
Object
Menggambarkan relasi antar objek yang dimodelkan dalam sistem.
3
Package
Gabungan antara elemen UML
4
Deployment
Menampilkan arsitektur fisik dari sistem
5
Component
Menggambarkan relasi fisik antara komponen software.
6
Composite Structure
Meggambarkan struktur internal kelas,
7
Activity
Menggambarkan aliran peoses bisnis.
8
Sequence
Memodelkan behavior objek dalam use case, fokus pada waktu melakukan kegiatan.
9
Communication
Memodelkan behavior objek dalam use case, fokus pada komunikasi yang dilakukan antar objek.
10
Interaction Overview Menggambarkan ikhtisan aliran kontrol proses.
11
Timing
Menggambarkan interaksi antar objek, lebih menekankan pada waktu
12
State Machine
Memodelkan perilaku objek didalam sistem.
13
Use Case
Menangkap kebutuhan bisnis sistem dan menggambarkan interaksi antara sistem dengan lingkungan
Pada laporan tugas akhir ini diagram UML yang akan dibahas adalah use case diagram, activity diagram, class diagram.
8
2.3.1
Use Case Diagram Diagram use case menggambarkan fungsionalitas yang diharapkan dari
sebuah sistem. Yang ditekankan adalah “apa” yang diperbuat sistem, dan bukan “bagaimana”. Diagram use case dapat sangat membantu bila kita sedang menyusun requirement sebuah sistem, mengkomunikasikan rancangan kita dengan klien, dan merancang test case untuk semua feature yang ada pada sistem. Sebuah use case merepresentasikan sebuah interaksi antara aktor dengan sistem. Use case merupakan sebuah pekerjaan tertentu, misalnya login ke sistem, membuat sebuah daftar belanja, dan sebagainya. Seorang / sebuah aktor adalah sebuah entitas manusia atau mesin yang berinteraksi dengan sistem untuk melakukan pekerjaan tertentu. Sebuah use case dapat men-include fungsionalitas use case sebagai bagian dari proses dirinya. Sebuah use case juga dapat mengextend use case lain dengan behaviour-nya sendiri. Sementara hubugan generalisasi antar use case menunjukan bahwa use case yang satu merupakan spesialisasi dari yang lain. (Dharwiyanti dan Wahono, 4). Gambar 2.1 menampilkan contoh sebuah diagram use case.
use case actor
Gambar 2.1 Contoh diagram Use Case (Dharwiyanti dan Wahono, 5).
9
2.3.2
Activity Diagram Activity Diagram menggambarkan berbagai alir aktivitas dalam sistem
yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi dan bagaimana mereka berakhir. Activity diagram juga dapat menggambarkan proses pararel yang mungkin terjadi pada beberapa eksekusi (Dharwiyanti dan Wahono, 7). Gambar 2.2 menampilkan contoh activity diagram.
node awal Menerima Pesanan
fork
action
Mengisi Pesanan
Mengirim Invoice
keputusan [priority oe=rder]
Mengisi Pesanan
flow / edge
[else]
Menerima Pembayaran
Mengisi Pesanan
percabangan
join Menutup Pesanan
akhir kegiatan
Gambar 2.2 Contoh Activity Diagram sederhana (Fowler, 2004:168).
2.3.3
Class Diagram Class adalah sebuah spesifikasi yang jika diinstansiasi akan menghasilkan
sebuah objek dan merupakan inti dari pengembangan dan desain berorientasi objek. Class menggambarkan keadaan (atribut/properti) suatu sistem, sekaligus menawarkan layanan untuk memanipulasi keadaan tersebut (metode/fungsi).
10
Class diagram menggambarkan struktur dan deskripsi class, package, dan objek beserta hubungan satu sama lain seperti containment, pewarisan, asosiasi, dan lain-lain (Dharwiyanti dan Wahono, 5).
Gambar 2.3 Contoh class diagram (Dharwiyanti dan Wahono, 5)
2.4 Konsep Klien Server Sesuai dengan namanya, Klien Server berarti adanya pembagian tugas antara klien dan server. Dalam sebuah jaringan server betugas untuk melayani permintaan yang datang dari klien. Komputer klien akan menerima instruksi dari pengguna melalui antarmuka pengguna, merubah format instruksi ke bentuk yang dapat dimengerti oleh database server, kemudian mengirimkan permintaan tersebut ke server melalui jaringan. Server kemudian mengolah permintaan tersebut, dan mengirimkan kembali hasilnya ke klien. Pada sisi klien data yang diterima dilolah kembali untuk ditampikan sebagai informasi yang berguna pada antarmuka pengguna.
2.5 Polling Dengan polling, browser mengirimkan permintaan HTTP secara berkala dan menerima respon. Teknik ini adalah upaya pertama browser untuk memberikan informasi secara waktu nyata. Teknik ini merupakan solusi yang baik jika interval yang tepat pengiriman pesan diketahui, dengan begitu dapat disinkronkan permintaan klien hanya ketika informasi tersedia di server. Namun,
11
data real-time sering tidak dapat diprediksi, menyebabkan adanya permintaan yang tidak diperlukan dan sebagai hasilnya, banyak koneksi dibuka dan ditutup sia-sia (http://websocket.org/quantum.html).
2.6 WebSocket Menurut Wiki, WebSocket adalah teknologi yang menyediakan kanal komunikasi bi-directional, full duplex melalui socket Transmission Control Protocol (TCP), dan dirancang untuk mengimplementasikan di web browser serta aplikasi native client-server. Membuat aplikasi web yang membutuhkan komunikasi bi-directional antara klien dan server (misalnya Instant Messaging dan aplikasi permainan) membutuhkan sumber (resource) yang besar bagi protokol HTTP. Hal tersebut menimbulkan permasalahan sebagai berikut:
Server dipaksa untuk menggunakan sejumlah koneksi TCP ke setiap klien, satu untuk mengirim informasi ke klien dan satunya lagi untuk pesan yang datang.
Protokol dengan media kabel memiliki potensi overhead yang tinggi, karena masing-masing pesan klien-server memiliki HTTP-Header.
Script di sisi klien dipaksa untuk mempertahankan proses mapping dari koneksi yang dikeluarkan ke koneksi yang datang untuk melacak balasan. Dengan permasalahan di atas, solusi terbaik adalah dengan menggunakan
koneksi single-TCP untuk melayani lalu-lintas dua arah. HTML5 Web Socket dapat mengurangi secara signifikan gangguan pada lalu lintas jaringan. HTML5 Web Socket juga dapat diimplementasikan dengan proxy dan firewall, memungkinkan streaming untuk berjalan di koneksi apapun., dan dengan kemampuan untuk melayanani komunikasi upstream dan downstream dengan satu koneksi, aplikasi yang menggunakan HTML5 Web Socket dapat mengurangi beban pada server yang berimplikasi dengan kemampuan server untuk melayani lebih banyak lagi koneksi konkuren. Gambar 2.4 di bawah ini menunjukan arsitektur WebSocket dimana Browser menggunakan sebuah koneksi WebSocket untuk full-duplex, terhubung langsung dengan remote hosts (http://virtuemagz.com/html5-web-socket.html).
12
Gambar 2.4 Arsitektur WebSocket 2.7 HTML HTML adalah singkatan dari HyperText Markup Language, yaitu bahasa (aturan) standar yang digunakan untuk menampilkan teks, gambar, video atau audio ke dalam halaman web. HTML merupakan file teks yang tersusun atas elemen-elemen yang disebut dengan tag. Tag HTML diapit dengan tanda lebih kecil (<) dan tanda lebih besar (>), misalnya , , ,
, dan lain-lain. Tag HTML ada yang memiliki pasangan, ada juga yang tidak. Jika suatu tag memliki pasangan, maka tag penutup akan disertai dengan tanda slash (/), misalnya: , , ,
, dan lain-lain (Budi Raharjo, 2011:4). Dokumen atau file HTML dapat dibuat menggunakan aplikasi Text Editor apa saja, dan disimpan dengan ekstensi .html atau .htm (Budi Raharjo, 2011:5).
2.8 HTML5 HTML5 merupakan generasi baru dari HTML, yang dirancang untuk memperbaiki teknologi HTML versi sebelumnya agar dapat mendukung teknologi multimedia terbaru dan tipe isi halaman web lainnya (content) lainnya. HTML5
13
menyediakan elemen-elemen atau tag baru yang sebelumnya tidak tersedia dalam HTML versi sebelumnya (Budi Raharjo, 2011:6)
2.9 PHP PHP yang merupakan singkatan dari Hypertext Prosesor adalah suatu bahasa pemrograman berbentuk skrip yang bersifat server-side artinya sintakssintaks dan perintah yang kita berikan akan sepenuhnya dijalankan oleh server yang jugadapat disertakan pada halaman HTML. Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal).PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995.Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dariweb. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI.Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP. Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modulmodul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan. Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan
rilis
tersebut
sebagai PHP
3.0 dan
singkatan
PHP
diubah
menjadi akronim berulang PHP: Hypertext Preprocessing. Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0.PHP 4.0 adalah versi PHP yang paling banyak dipakai
pada
awal
abad
ke-21.Versi
ini
banyak
dipakai
disebabkan
kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi. Pada Juni 2004, Zend merilis PHP 5.0.Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar.Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa
14
pemrograman
ke
arah
paradigma
berorientasi
objek
(http://id.wikipedia.org/wiki/Php).
2.10
CSS Cascading Style Sheet dikembangkan untuk menata gaya pengaturan
halaman web. Pada awalnya CSS dikembangkan pada SGML pada tahun 1970, dan terus dikembangkan hingga saat ini telah mendukung banyak bahasa Markup seperti: HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language). Mengacu dari arti bahasa, Cascading Style Sheet memiliki arti Gaya Memiliki Halaman Bertingkat yang berarti setiap satu elemen yang telah diformat dan memiliki anak dan telah diformat, maka anak dari elemen tersebut secara otomatis mengikuti format elemen berikutnya (Alexander, 2011:112).
2.11
Javascript Javascript adalah bahasa skrip (Scripting Language) yaitu kumpulan
instruksi perintah yang digunakan untuk mengendalikan beberapa bagian dari sistem operasi. Bentuk bahasa skrip dari javascript mengambil model penulisan pada pemrograman C dan JAVA, yang terdiri dari variabel, fungsi dan lainnya. Sebagai bahasa skrip yang berjalan pada web browser atau sisi klien (Client Side), Javascript tidak memiliki fungsi untuk menjalankan suatu perintah pada server Sisi Server (Server Side). Dengan keterbatasan itu para pengembang Javascript kemudian menambahkan suatu mekanisme agar Javascript dapat berinteraksi dengan server. Mekanisme tersebut adalah AJAX (Asynchronous Javascript and XML) yaitu mekanisme komunikasi antara javascript yang berada di sisi klien dengan bahasa di sisi server seperti PHP dan lainnya. Prinsip kerja AJAX adalah menjalankan suatu alamat perintah pada server dan menerima data yang dikembalikan oleh server (Alexander, 2011:150).
2.12
Apache Apache adalah server web yang bersifat open source yang berguna
untukmelayani dan memfungsikan situs web, protokol yang digunakan untuk
15
melayani fasilitas web ini menggunakan HTTP. Apache merupakan server web yang dapat dijalankan di banyak sistem operasi (Unix, BSD, Linux, MicrosoftWindows dan Novell Netware serta platform lainnya).
2.13
PHP MyAdmin PHP MyAdmin merupakan suatu program yang dibuat menggunakan
aplikasiPHP berbasis web. Program ini digunakan untuk mengakses database MySQL dan mendukung berbagai operasi MySQL seperti mengelolah basis data, tabel-tabel, relasi, user, dan lain-lain.
2.14
Socket.IO Socket.IO adalah API WebSocket yang dibuat oleh Guillermo Rauch,
CTO untuk LearnBoost dan kepala ilmuan dari LearnBoost Labs. Socke.IO akan menggunakan fitur deteksi untuk memutuskan bagaimana sebuah koneksi terjadi antara Websocket, AJAX polling, Flash, dan lain-lain, sehingga menciptakan aplikasi waktu nyata bekerja secara instan dimana saja. Socket.IO juga memberikan API untuk nodeJS sehingga terlihat sangat mirip dengan API di sisi klien (http://davidwalsh.name/websocket).
2.15
NodeJS NodeJS adalah framework Javascript yang mengimplementasikan multiple
WebSocket Server, dengan menggunakan server-side Javascript dengan model asynchronous
event-driven.
Hal
tersebut
memungkinkan
Node.js
memiliki performance terbaik untuk mendukung arsitektur di semua aplikasi internet (http://virtuemagz.com/html5-web-socket.html).
2.16
Prototype Methodology (Metodologi Prototipe) Bila dibandingkan dengan metodologi waterfall, pada metodologi ini
terdapat pembuatan prototipe dari sebuah aplikasi,sebelum aplikasi tersebut memasuki tahap desain. Dalam tahap ini prototipe yang telah dirancang akan diberikan kepada user agar dapat dievaluasi. Tahap ini akan terus menerus diulang sampai kedua belah pihak benar-benar mengerti tentang requirement dari aplikasi
16
yang akan dikembangkan.Apabila prototipe telah selesai, maka tahapan aplikasi akan kembali berlanjut ke tahap desain dan kembali mengikuti langkah-langkah pada metodologi waterfall.
Gambar 2.5 Prototype Methodology
Fakta mengenai metodologi prototipe:
User proaktif
Adaptif terhadap perkembangan kebutuhan
Kebutuhan dapat ditangkap secara langsung
Analisa kebutuhan tidak dilakukan secara mendalam (single point of view)
