APLIKASI PENYEWAAN LAPANGAN FUTSAL DENGAN LAYANAN WEB BOOKING STUDI KASUS LEKSONO FUTSAL BERBASIS RUBY ON RAILS.

(1)

YAYASAN KEJUANGAN PANGLIMA BESAR SUDIRMAN

UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN” JAWA TIMUR FAKULTAS TEKNOLOGI INDUSTRI

Jl. Raya Rungkut Madya Gunung Anyar Telp. (031) 8706369 (Hunting). Fax. (031) 8706372 Surabaya 60294

KETERANGAN REVISI

Kami yang bertanda tangan di bawah ini menyatakan bahwa mahasiswa berikut :

Nama : Teguh Tri Mardianto

NPM : 0634010197

Jurusan : Teknik Informatika

Telah mengerjakan revisi/ tidak ada revisi*) pra rencana (design)/ skripsi ujian lisan

gelombang VII, TA 2010/2011 dengan judul :

”APLIKASI PENYEWAAN LAPANGAN FUTSAL DENGAN LAYANAN WEB

BOOKING STUDI KASUS LEKSONO FUTSAL BERBASIS RUBY ON RAILS”

Surabaya, 10 Juni 2011

Dosen Penguji yang memerintahkan revisi :

(2)

SKRIPSI

APLIKASI PENYEWAAN LAPANGAN FUTSAL DENGAN

LAYANAN WEB BOOKING STUDI KASUS LEKSONO FUTSAL

BERBASIS RUBY ON RAILS

Oleh :

TEGUH TRI MARDIANTO NPM : 0634010197

Telah dipertahankan di hadapan dan diterima oleh Tim Penguji Skripsi Jurusan Teknik Informatika Fakultas Teknologi Industri

Universitas Pembangunan Nasional ”Veteran” Jawa Timur Pada Tanggal 10 Juni 2011

2. 2.

3.

Mengetahui

Dekan Fakultas Teknologi Industri

Universitas Pembangunan Nasional ”Veteran” Jawa Timur

Ir. Sutiyono, MT NIP. 19600713 198703 1 001 Pembimbing :

1.

Basuki Rahmat, S.Si, MT NPT. 369 070 602 091

Penguji :

1.

Agustinus Bimo Gumelar, ST, MT

2

Achmad Junaidi, S.Kom NPT. 378 110 401 991

Dian Puspita Hapsari, S.Kom, M.Kom NIDN. 072 905 780 1

(3)

LEMBAR PENGESAHAN

APLIKASI PENYEWAAN LAPANGAN FUTSAL DENGAN

LAYANAN WEB BOOKING STUDI KASUS LEKSONO

FUTSAL BERBASIS RUBY ON RAILS

Oleh

TEGUH TRI MARDIANTO NPM : 0634010197

Telah disetujui untuk mengikuti Ujian Negara Lisan Gelombang VII Tahun Akademik 2010/2011

Menyetujui,

Pembimbing Utama Pembimbing Pendamping

Basuki Rahmat, S.Si, MT Achmad Junaidi, S.Kom NPT. 369 070 602 091 NPT. 378 110 401 991

Mengetahui

Ketua Jurusan Teknik Informatika Fakultas Teknologi Industri

Universitas Pembangunan Nasional ”Veteran” Jawa Timur

(4)

APLIKASI PENYEWAAN LAPANGAN FUTSAL DENGAN

LAYANAN WEB BOOKING STUDI KASUS LEKSONO

FUTSAL BERBASIS RUBY ON RAILS

SKRIPSI

Diajukan untuk Memenuhi Sebagai Persyaratan

Dalam Memperoleh Gelar Sarjana Komputer

Jurusan Teknik Informatika

Disusun oleh :

TEGUH TRI MARDIANTO

NPM. 0634010197

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI

UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”

JAWA TIMUR

(5)

(6)

Judul : Aplikasi Penyewaan Lapangan Futsal Dengan Layanan Web Booking Studi Kasus Leksono Futsal Berbasis Ruby On Rails

Pembimbing I : Basuki Rahmat, S.Si, M.T Pembimbing II : Achmad Junaidi, S.Kom Penyusun : Teguh Tri Mardianto

ABSTRAK

Website booking merupakan suatu aplikasi komputer berbasis web yang digunakan untuk mengolah dan menyimpan data, juga memberikan layanan

booking lapangan futsal secara online. Aplikasi ini diharapkan dapat memberikan

kemudahan administrator dalam mengolah data-data penyewaan dan

mempermudah pelanggan (dalam hal ini adalah member) dengan aturan-aturan dari owner lapangan futsal (Leksono Futsal).

Aplikasi website ini dibuat dengan menggunakan bahasa pemrograman

Ruby beserta Ruby On Rails (ROR) sebagai framework. ROR dipakai, karena pada implementasinya banyak mempunyai beberapa plugin yang dapat digunakan

untuk mewujudkan sebuah website. Disamping itu framework ini telah

menggunakan MVC (Model View Controller) untuk perancangan website aplikasi ini. Selain itu untuk mewujudkan sebuah website yang berbasis ROR, maka penulis menggunakan aplikasi Neatben versi 0.7. Cara kerja aplikasi adalah user admin cukup memasukkan password untuk login dan memilih menu-menu yang telah disediakan dalam menu utama, agar dapat melakukan proses pengolahan data, demikian pula dengan user member yaitu hanya perlu melakukan login dan dapat langsung melakukan booking lapangan melalui website.

Sehingga, dapat ditarik kesimpulan bahwa aplikasi website ini dapat memudahkan admin dalam mengelola dan menyimpan data-data yang berhubungan dengan booking lapangan pada Leksono Futsal oleh member. Dan admin atau owner dapat melihat data yang tersimpan setelah proses booking

terjadi.

Kata kunci : booking, MVC, Ruby on rails (ROR).

(7)

KATA PENGANTAR

Puji syukur penulis panjatkan atas kehadirat ALLAH SWT yang telah

melimpahkan rahmat dan hidayahnya kepada penulis sehingga penulis dapat

menyelesaikan Laporan tugas akhir ini dengan baik dan benar.

Penyusunan Laporan tugas akhir ini merupakan prasyarat dalam

mengambil Tugas Akhir. Adapun judul Laporan Praktek Kerja Lapangan ini

adalah ”APLIKASI PENYEWAAN LAPANGAN FUTSAL DENGAN

LAYANAN WEB BOOKING STUDI KASUS LEKSONO FUTSAL BERBASIS

RUBY ON RAILS”.

Tak lupa pada kesempatan ini penulis menyampaikan ucapan terima

kasih yang sebesar – besarnya kepada semua pihak yang telah membantu dalam

penyelesaian Laporan Tugas Akhir ini. Ucapan terima kasih penulis sampaikan

kepada yang terhormat:

1. Kedua Orang Tua tercinta beserta kedua kakak kandung sekeluarga atas

semua dukungan yang tak terhitung dengan apapun baik selama masa

perkuliahan maupun sebelum-sebelumnya.

2. Bapak Ir. Sutiyono, MT selaku Dekan Fakultas Teknologi Industri UPN

“Veteran” Jawa Timur.

3. Bapak Basuki Rahmat, SSi, MT selaku Ketua Jurusan Teknik Informatika

UPN “Veteran” Jawa Timur yang sekaligus sebagai Dosen Pembimbing I

(8)

4. Bapak Achmad Junaidi, S.Kom selaku Dosen Pembimbing II Laporan Dan

ProgramSkripsiyang telah meluangkan begitu banyak waktu, tenaga dan

pikiran serta dengan sabar membimbing penulis dari awal hingga

terselesainya Laporan Skripsi / Tugas Akhir (TA) ini.

5. Dosen – Dosen Jurusan Teknik Informatika UPN “VETERAN” JATIM,

yang telah membuat kami membuka pikiran dan merubah pola pikir kami.

Dan tak lupa bapak/ibu penguji atas waktu dan kritik serta saran yang

telah diberikan atas project tugas akhir ini.

6. Semua fihak tanpa terkecuali yang secara sengaja ataupun tidak sengaja

yang telah memberikan semangat dan telah menjadi inspirasi dari penulis

untuk menyelesaikan tugas akhir ini. Dan khususnya kawan-kawan satu

jurusan Teknik Informatika UPN ”Veteran” Jatim baik seangkatan

penulis (TF 2006) ataupun kakak kelas penulis, keluarga besar Rumah WA

yang menjadi seperti saudara sendiri, kawan-kawan mantan ION Outbond,

kawan-kawan mantan Panloop FC dan juga kawan-kawan seperjuangan

untuk ujian tugas akhir periode Juni 2011 TF-FTI UPN ”Veteran” Jatim

ataupun semua yang belum tertulis tersebut.

Penulis sebagai manusia biasa pasti mempunyai keterbatasan dan banyak

sekali kekurangan, terutama dalam pembuatan laporan ini. Untuk itu penulis

sangat membutuhkan kritik dan saran yang membangun dalam memperbaiki

penulisan laporan ini.

Surabaya, Juni 2011

(9)

(10)

2.3 UML ... 20

2.3.1 Use Case ... 21

2.3.2 Aktor ... 22

2.3.3 Identifikasi Use Case... 23

2.3.4 Pendokumentasian Model Use Case ... 24

2.4 OOP (Objeck Oriented Programing) ... 26

2.5 CSS ... 28

2.6 World Wide Web (WWW) ... . 30

2.7 MySQL ... . 32

BAB III ANALISIS DAN PERANCANGAN SISTEM ... 33

3.1 Analisis Sistem ... 33

3.2 Analisis Kebutuhan ... 34

3.2.1 Identifikasi User ... 34

3.2.2 Variabel Kebutuhan Input dan Output User ... 34

3.3 Perancangan Sistem ... 36

3.3.1 Use Case Diagram ... 36

3.3.2 Activity Diagram Website Booking Online ... 38

3.3.3 Conceptual Data Model (CDM) ... 49

3.3.4 Pysical Data Model (PDM) ... 51

3.3.5 Desain Database ... 52

3.3.5.1 Database Migration Booking ... 53

3.3.5.2 Relasi Tabel Database ... 55

(11)

3.4.1 Perancangan Antarmuka Pengunjung ... 57

BAB IV IMPLEMENTASI SISTEM ... 59

4.1 Lingkungan Implementasi Sistem ... 59

4.2 Implementasi Proses... 60

4.3 Implementasi Model View Controller (MVC) ... 62

4.3.1 Implementasi Model... 63

4.3.2 Implementasi View ... 64

4.3.3 Implementasi Controller... 65

4.4 Implementasi Desain Aintar Muka ... 66

4.4.1 Form Tampilan Halaman Utama ... 66

4.4.2 Form Tampilan Booking ... 67

BAB V UJICOBA ... 70

5.1 Lingkungan Ujicoba ... 70

5.2 Proses Ujicoba ... 71

5.2.1 Halaman Utama ... 71

5.2.2 Proses Akses Member ... 72

BAB VI KESIMPULAN DAN SARAN ... 80

6.1 Kesimpulan ... 80

5.2 Saran ... 81

(12)

D

DAAFFTTAARRGGAAMMBBAARR

Gambar 2.1 Arsitektur MVC (Model-View-Controller) ... 15

Gambar 2.2 Komponen Umum Rails ... 16

Gambar 2.3 Instalasi Ruby Pada Windows ... 18

Gambar 2.4 Cek Instalasi Melalui Command Prompt ... 18

Gambar 2.5 Contoh Penggunaan Aktor dan Use Case ... 22

Gambar 2.6 Aktor dan Use Case Dalam Sistem Bank ... 24

Gambar 2.7 Penulisan CSS Dengan Inline Style Sheet ... 29

Gambar 2.8 Penulisan CSS Dengan Embedded Style Sheet... 29

Gambar 2.9 Penulisan CSS Dengan Lingked Style Sheet ... 30

Gambar 2.10 Konsep Dasar Browser dan Server... 31

Gambar 3.1 Use Case Diagram Booking Online Admin ... 37

Gambar 3.2 Use Case Diagram Booking Online Admin ... 37

Gambar 3.3 Activity Diagram Website Admin ”Login Admin” ... 38

Gambar 3.4 Activity Diagram Website Admin ”Add Admin” ... 39

Gambar 3.5 Activity Diagram Website Admin ”Add Member”... 40

Gambar 3.6 Activity Diagram Website Admin ”Add News” ... 41

Gambar 3.7 Activity Diagram Website Admin ”Edit Admin” ... 41

Gambar 3.8 Activity Diagram Website Admin ”Edit Member” ... 42

Gambar 3.9 Activity Diagram Website Admin ”Edit News” ... 43

Gambar 3.10 Activity Diagram Website Admin ”Delete Admin” ... 44

Gambar 3.11 Activity Diagram Website Admin ”Delete Member” ... 45

Gambar 3.12 Activity Diagram Website Admin ”Delete News” ... 45

(13)

Gambar 3.14 Activity Diagram Website Pengunjung ”Login member” ... 46

Gambar 3.15 Activity Diagram Website Pengunjung ”booking” ... 47

Gambar 3.16 Activity Diagram Website Pengunjung ”registrasi” ... 48

Gambar 3.17 Activity Diagram Website Pengunjung ”View News” ... 49

Gambar 3.18 Conceptual Data Model Website Booking ... 50

Gambar 3.19 Physical Data Model Website Booking ... 51

Gambar 3.13 Login Member Leksono Futsal ... 57

Gambar 3.13 Halaman Website Leksono Futsal Pengunjung ... 57

Gambar 4.1 Halaman Utama Website ... 67

Gambar 4.2 Tampilan Halaman Booking ... 68

Gambar 5.1 Halaman Utama Website Leksono Futsal ... 71

Gambar 5.2 Pendaftaran Member Leksono Futsal ... 72

Gambar 5.3 Setelah Mendaftar Website Leksono Futsal ... 73

Gambar 5.4 Member Lupa Password Pada Website Leksono Futsal ... 74

Gambar 5.5 Halaman Booking Leksono Futsal ... 75

Gambar 5.6 Event Booking Leksono Futsal ... 76

Gambar 5.7 Create Booking Leksono Futsal ... 77

Gambar 5.8 tampilan Kalender Menurut Bulan (Month)... 78

Gambar 5.9 Tampilan Kalender Menurut Minggu (Week) ... 78

(14)

BAB I

PENDAHULUAN

Dalam bab ini akan dijelaskan beberapa hal dasar yang meliputi latar

belakang, permasalahan, batasan permasalahan, tujuan dan manfaat, metodologi

pelaksanaan serta sistematika penulisan buku tugas akhir ini. Dari uraian tersebut

diharapkan dapat menjadi gambaran umum permasalahan dan pemecahan yang

diambil, dapat dipahami dengan baik.

1.1 Latar Belakang

Menjamurnya lapangan futsal di setiap daerah di Indonesia terutama pada

kota-kota besar menjelaskan betapa tingginya animo masyarakat terhadap

olahraga futsal. Pemakaian masyarakat terhadap penyewaan yang tergolong

banyak menuntut pemilik lapangan futsal agar meningkatkan pelayanan terhadap

pengunjung, dan salah satunya dengan memberikan pelayanan yang cepat dan

efisien.

Dengan berkembangnya teknologi dan kebutuhan akan informasi,

menyebabkan semakin kompleksnya informasi yang harus bisa diolah, sehingga

kebutuhan pengguna akan jaringan komputer secara menyeluruh semakin

diperlukan. Penggunaan jaringan secara menyeluruh ini bertumbuh dan

membentuk jaringan komputer yang sangat besar dan tersebar diseluruh belahan

dunia, dan itu dikenal dengan nama internet, yang bisa diakses dan dimanfaatkan

untuk berbagai keperluan oleh setiap kalangan, dimana saja dan kapan saja.

(15)

2

data, terlebih dalam pengelolaan data pada proses booking pada “Lapangan

Futsal” ini. Hal tersebut menjadi suatu sebab mengapa komputer dijadikan sebagai

alat pengolah data. Pada dasarnya sistem komputerisasi bertujuan untuk

mempercepat proses yang terjadi dalam suatu sistem, dan sangatlah relevan bila

pada “Leksono Futsal” menggunakan fasilitas tersebut.

Oleh karena itu penulis akan menjelaskan mengenai bagaimana membuat

suatu sistem yang di dalamnya terdapat proses dimana petugas dapat melayani

pelanggan melalui sistem informasi dan bagaimana pengunjung yang telah

menjadi member dapat melakukan proses booking secara online dengan

menggunakan bahasa pemrograman utama yaitu Ruby dengan Framework Rails

atau yang disebut dengan Ruby On Rails.

1.2 Rumusan Masalah

Berdasarkan latar belakang yang telah dijelaskan diatas, maka dapat

dirumuskan masalah sebagai berikut :

a. Bagaimana cara membangun fasilitas booking dan pengelolaanya secara

online pada lapangan futsal dengan menggunakan bahasa perograman

Ruby?

b. Bagaimana cara membuat aplikasi booking yang didalamnya terdapat

jadwal langsung dari hasil proses booking dengan menggunakan

Framework dari Ruby yaitu Ruby On Rails dan Neatben 7.0 sebagai

(16)

3

c. Bagaimana membuat suatu aplikasi yang dapat membantu pemilik atau

operator pada lapangan futsal untuk meningkatkan kinerjanya dalam

mengelola persewaan lapangan.

1.3. Batasan Masalah

Dari permasalahan-permasalahan yang telah dipaparkan sebelumnya,

maka dibutuhkan batasan masalah yang dimaksudkan agar pembahasan tidak

terlalu melebar, hal tersebut antara lain:

a. Permasalahan yang akan dibahas disini, yaitu hanya menunjukkan

bagaimana langkah-langkah untuk membuat booking website dengan

memanfaatkan framework ruby on rails.

b. Website dibuat dengan maksud untuk mengenalkan dan sekaligus

memberikan pelayanan online booking kepada member dan petugas

mampu melihat hasil booking yang dilakukan.

c. Aplikasi yang dibuat tersebut tidak mengatur tentang perhitungan harga

pada proses booking.

1.4. Tujuan

Tujuan dari membuat aplikasi mengenai booking lapangan Futsal

berbasis website dengan menggunakan framework Ruby on Rails adalah:

a. Membuat sistem yang bisa di gunakan untuk mengelola beberapa data

(17)

4

b. Admin atau Owner dapat menyimpan dan melihat data-data penyewaan

dan hasil booking pada pelanggan yang telah menjadi member di dalam

database dengan waktu singkat sehingga dapat diketahui jadwal

pemakaian lapangan.

c. Membuat aplikasi yang dapat dipakai sebagai media informasi.

Informasi yang dimaksud adalah mengenai data-data penyewaan pada

setiap pelanggan sehingga dapat mengurangi kesalahpahaman antara

pengelola dan pelanggan, misalnya member dapat mengetahui kapan

lapangan masih kosong (belum ada booking) sehingga pelanggan dapat

memilih lapangan mana yang akan dipakai.

1.5. Manfaat

Dengan Aplikasi Booking Lapangan secara Online tersebut mempunyai

manfaat sebagai berikut:

a. Efisiensi waktu, tenaga, dan biaya dalam pengelolaan lapangan futsal yang

menyangkut booking lapangan pada Leksono Futsal yang telah dilakukan

oleh member.

b. Memudahkan pelayanan kepada pelanggan saat melakukan booking

lapangan.

c. Aplikasi ini diharapkan agar pelanggan merasa nyaman bila menjadi

(18)

5

1.6. Metodologi Penulisan

Pada pengerjaanya diterapkan beberapa metode demi tercapainya hasil akhir

yang telah diharapkan sebelumya. Metode yang dilaksanakan dalam penelitian ini

adalah :

a. Study Literatur

Pada tahap ini dilakukan penelusuran terhadap berbagai macam literatur

seperti buku, referensi-referensi baik melalui perpustakaan maupun

internet dan lain sebagainya yang terkait dengan judul penelitian ini.

b. Analisis Aplikasi

Dari hasil study literatur akan dibuat deskripsi umum mengenai aplikasi

menentukan bahasa pemrograman dan framework yang hendak digunakan,

disini penulis menggunakan bahasa pemrograman Ruby dan dibantu

dengan framework Ruby On Rails.

c. Rancang-Bangun Aplikasi

Pada tahap ini dilakukan perancangan sistem yang nantinya akan

memudahkan dan mengurangi tingkat kesalahan dalam membuat aplikasi

booking pada Leksono Futsal.

d. Uji Coba dan Evaluasi Aplikasi

Pada tahap ini dilakukan uji coba terhadap sistem yang telah dibangun,

apakah sudah sesuai dengan yang diharapkan ataukah masih memerlukan

perbaikan lagi sebelum dikenalkan kepada khalayak ramai.

e. Dokumentasi

Pada tahap ini dilakukan pembuatan laporan mulai dari study literature,

(19)

6

akhirnya dapat dilakukan penarikan kesimpulan dan saran untuk kemajuan

dan perbaikan pada aplikasi yang telah dibuat.

1.7. Sistematika Penulisan

Agar proses pendokumentasian aplikasi tertata dengan rapi maka diperlukan

suatu sistematika dalam penulisan laporan. Sistematika penulisan yang digunakan

dalam Tugas Akhir ini adalah sebagai berikut :

BAB I PENDAHULUAN

Dalam bab ini dijelaskan beberapa hal dasar yaitu tentang gambaran

umum latar belakang penulisan Tugas Akhir, rumusan masalah, batasan masalah, tujuan dan sistematika penulisan, sehingga gambaran umum

permasalahan dan pemecahan yang diambil dapat dipahami dengan

baik.

BAB II TINJAUAN PUSTAKA

Membahas tentang teori penunjang dari pembahasan masalah

antara lain tentang komponen-komponen yang digunakan dalam

pembangunan sistem yang dibangun.

BAB III ANALISIS DAN PERANCANGAN SISTEM

Bab ini menjelaskan mengenai teknik analisis program yang

digunakan dan perancangan untuk proses pembuatan aplikasi agar

(20)

7

BAB IV IMPLEMENTASI SISTEM

Bab ini berisi hasil implementasi dari analisis dan perancangan

aplikasi yang telah dibuat sebelumnya beserta pembahasan dari

membangun server serta pengujian yang dilakukan terhadap sistem

yang telah dibuat.

BAB V UJICOBA DAN EVALUASI

Pada bab ini akan dibahas mengenai uji coba terhadap aplikasi yang telah dibuat dan selanjutnya akan dibuat beberapa evaluasi dari hasil uji coba tersebut.

BAB VI PENUTUP

Bab ini akan menjelaskan tentang kesimpulan dari keseluruhan isi

dari laporan dan Tugas Akhir serta saran-saran untuk

pengembangan lebih lanjut.

DAFTAR PUSTAKA

Berisi tentang literatur sebagai teori pendukung dalam

(21)

BAB II

TINJAUAN PUSTAKA

Dalam hal ini akan dijelaskan beberapa teori yang kemudian akan menjadi

acuan dalam pembuatan web aplikasi sehingga aplikasi dapat dijalankan dengan

baik. Disini penulis akan mencoba menggunakan beberapa teori diantara beberapa

teori yang ada, adalah ruby yaitu bahasa pemrograman yang dipakai dalam

pembuatan web aplikasi pada “Leksono Futsal” dan yang lain diantaranya adalah

diagram-diagram analisis basis data yang dipakai pada tahap analisis sistem yang

akan dibuat, rails yang tak lain adalah framework yang dibangun dalam bahasa

pemrograman ruby atau yang disebut dengan framework ruby on rails, serta

beberapa pendukung lain yang saling berkaitan antara satu dengan yang lain.

2.1 Bahasa Pemrograman Ruby

Ruby merupakan bahasa yang seimbang. Pencipta Ruby, Yukihiro “Matz”

Matsumoto, menggabungkan bagian-bagian dari bahasa-bahasa favorit beliau

(Perl, Smalltalk, Eiffel, Ada dan Lisp) untuk membentuk bahasa baru yang

seimbang antara pemrograman fungsional dengan pemrograman imperatif. Matz

sering menyebutkan bahwa beliau sedang “mencoba membuat Ruby natural,

bukan sederhana,” dengan cara membuatnya mirip dengan kehidupan nyata.Sejak

Ruby pertama kali dirilis ke publik pada tahun 1995, banyak programmer

profesional dari seluruh dunia serius ikut mengembangkan Ruby. Pada tahun

2006, Ruby diterima oleh banyak orang. Dengan komunitas pengguna Ruby yang

(22)

pertemuan Ruby terkait, terdapat beberapa fungsi yang yang dapet dijalankan pada

bahasa pemrograman ini.

2.1.1. Variable

Layaknya bahasa pemrograman yang lain di dalam ruby juga terdapat

beberapa variabel perbedaannya bahasa pemrograman lain seperti C dan Java, di

dalam Ruby kita dapat langsung mendefinisikan sebuah variable tanpa

menentukan tipenya. Anda dapat mencobanya langsung melalui irb2.

$irb> a = 2 $irb> b = 2 $irb> a + b $=> 4

Selain pada contoh diatas, bisa juga membuat tipe data string secara langsung

seperti contoh script dibawah ini.

$irb> a = “hehe”

Di dalam Ruby kita mengenal istilah symbol. Symbol ini akan sering sekali

ditemukan di dalam Ruby On Rails. Sering digunakan sebagai semacam konstanta

pengganti string.

$irb> a = :test $irb> a != :test $=> false

(23)

Symbol ini bisa dibilang lebih hemat memori dibandingkan dengan String.

Di dalam Ruby kita akan sering menemukan symbol dalam sebuah pemanggilan

method. Selain itu kita juga akan sering menggunakan symbol sebagai sebuah key

dalam hash. Kedua hal ini sering membuat bingung orang-orang yang pertama

kali mempelajari Ruby.

2.1.2. Array dan Hash

Di dalam Ruby bisa dikatakan bahwa array sangat terkait dengan simbol []

sedangkan hash dengan {}. Hal itu disebabkan karena memang itulah salah satu

cara untuk menginisialisasi array dan hash.

$irb> a = []

Pada contoh diatas terlihat bahwa bisa juga melakukan inisialisasi array

dengan memanggil method new( ). Selanjutnya dapat ditambahkan elemen pada

array dengan menggunakan operator <<.

Berbeda dengan array, pada hash memiliki pasangan key dan value.

Dalam Ruby hash ini seringkali dipakai sebagai parameter dalam pemanggilan

(24)

$irb> a = {}

$irb> a[:manthab] = “jaya” $=> “jaya”

$irb> a[:keren] $=> “abis”

$irb> a[:manthab] $=> “jaya”

Pada contoh sebelumnya terlihat bahwa kita digunakan symbol sebagai

key. Namun, bisa juga dengan melakukan hal yang sebaliknya sebagimana yang

terlihat pada contoh berikut ini.

$irb> a[“keren”] = :jaya $=> :jaya

$irb> a

$=> {:keren=>"abis", "keren"=>:jaya, :manthab=>"jaya"}

Sama seperti array methodlength( ) dapat juga dipakaiuntuk melihat jumlah data

yang ada di dalam hash.

$irb> a.length $=> 3

2.1.3. Control Structure

Sampai sini sebenarnya masih bisa menggunakan irb. Contoh penerapanya

adalah dengan membuat sebuah file Ruby bernama coba1.rb.

a = ARGV[0].to_i if a > 7

puts "#{a} lebih besar dari 7" elsif a < 7

puts "#{a} lebih kecil dari 7" else

(25)

Bisa dilihat bahwa Ruby mengenali elsif bukan else if. Pada kode diatas dapat

dilakukan substitusi nilai a di dalam tanda kutip dengan cara “#{a}”.

$ruby coba1.rb 8 $8 lebih besar dari 7

Setiap programer akan sering menggunakan looping di dalam aplikasinya.

Salah satu caranya adalah dengan menggunakan for. Dapat diterapkan dengan

cara membuat file baru coba2.rb yang di dalamnya berisi dengan code seperti

berikut:

for i in 1..10 do puts "#{i}"

end

Ketika dijalankan, program ini akan mencetak angka 1 sampai dengan 10

ke layar. Selain for ada juga yang menggunakan while untuk melakukan looping.

Berikut ini adalah contoh penggunaannya dalam file coba3.rb dengan hasil yang

kurang lebih sama dengan coba2.rb.

i = 1

Sebuah method dideklarasikan dengan menggunakan keyword def dan

diakhiri dengan end. Sebagai contoh dibuat file baru coba4.rb.

(26)

Ketika dieksekusi, program diatas akan mengahasilkan output kurang lebih

sebagai berikut:

coba Jaya! coba Dunks!

Untuk me-return sebuah nilai, kita hanya perlu menuliskan nilai (atau variable)

tersebut di dalam method.

def kali_dua(nilai_awal) kali_dua = nilai_awal * 2 kali_dua

end

kali_dua = kali_dua(4) puts "kali dua #{kali_dua}"

Hasil eksekusi dari program ini adalah:

kali dua 8

Sebenarnya bisa juga dibuat keyword return untuk me-return sebuah nilai dari

method.

2.1.5. Classes

Deklarasi sebuah kelas dimulai dengan class dan diakhiri dengan end.

Sebagai contoh adalah dengan membuat sebuah kelas Mahasiswa pada file

(27)

Instance variable dari sebuah kelas dideklarasikan dengan ‘@’ yang akan

membuatnya bisa diakses oleh semua instance method yang ada di kelas tersebut.

Namun instance variable tersebut tidak akan bisa diakses dari luar kelas. Untuk

bisa melakukan itu maka perlu membuat accessor method. Tambahkan kedua

method ini pada kelas Mahasiswa yang telah dibuat.

def nama=(nama_baru)

Dapat diuji dengan method ini dengan melakukan pemanggilan method seperti

dibawah ini.

mhs = Mahasiswa.new("Si Bocung","1203000439") mhs.cetak_info

mhs.nama = "Si Bocah"

# mengubah nama menjadi Si Bocah mhs.cetak_info

nama = mhs.nama

# method ini akan mereturn Si Bocah sebagai nama puts nama

Namun untuk mendefinisikan methodsetter dan getter bagi setiap variable

adalah pekerjaan yang melelahkan. Oleh karena itu Ruby menyediakan method

attr_accessor() untuk memudahkan kita. Selain penjelasan-penjelasan yang ada

diatas, maka terdapat banyak hal lain mengenai class ini yang tidak mungkin

dijabarkan seluruhnya pada bab yang ada di dalam laporan ini. Untuk lebih

memudahkan programer dalam menggunakan bahasa pemrograman ruby ini,

maka diperlukan suatu framework untuk pembangunan suatu aplikasi yang utuh

(28)

berkonfigurasi dengan bahasa pemrograman ruby, dalam hal ini digunakan

framework ruby on rails atau lebih disingkat rails saja

2.2 Ruby On Rails (Rails)

Ruby on rails atau yang sering disebut rails saja adalah sejenis framework

web-aplikasi yang mencakup semua yang diperlukan untuk membuat aplikasi web

database yang didukung sesuai dengan pola Model-View-Control (MVC).

Gambar 2.1 Arsitektur MVC (Model-View-Controller)

Pola ini membagi pandangan menjadi "dumb" template yang terutama berfungsi

untuk memasukkan data pre-built diantara tag HTML. Model berisi objek domain

"smart" (seperti Account, Produk, Person, Post) yang memegang semua logika

bisnis dan tahu bagaimana untuk bertahan diri ke database. Controller menangani

(29)

dengan memanipulasi model dan mengarahkan data view. Di dalam Rails, model

ini ditangani oleh apa yang disebut lapisan object-relational mapping berjudul

Active Record. Lapisan ini memungkinkan Anda untuk menampilkan data dari

baris database sebagai objek dan memperindah objek data tersebut dengan

metode logika bisnis.

Layaknya framework pada umumnya, rails memerlukan database sebagai

tempat penyimpanan data. Adalah Active Record yang mengambil dari class

model dan menghubungkan dengan tabel dalam database yang menggunakan pola

pemetaan object-relational. Database yang paling sering digunakan untuk

pengembangan Rails adalah MySQL, yang banyak tersedia di beberapa platform,

mudah untuk menginstal, dan bebas tersedia untuk development. Selain MySQL,

terdapat beberapa database adapter untuk beberapa produk lainnya, termasuk

PostreSQL, SQLite, Microsoft SQL Server, Oracle, dan berbagai vendor database

utama lainnya.

Pada aplikasi Ruby on rails terdiri dari beberapa komponen yang terkait

antara lain seperti pada Gambar 2.2.

(30)

Pada dasarnya setiap aplikasi yang dibuat, model didasarkan pada objek

nyata misalnya orang, rekening bank, alat. Setiap bagian data dinyatakan dengan

menggunakan tabel database kemudian dikelola menggunakan active-record,

yang merupakan objek yang disediakan pada rails untuk mempermudah akses

kedalam database. Active Record menghubungkan model data dan tabel database

dengan mengubah deretan dari database kedalam objek yang dapat dimanipulasi.

Hal ini memungkinkan programer untuk menggambarkan aturan bisnis melalui

penggunaan syntax yang menggambarkan hubungan antar model data yang

berbeda dalam suatu aplikasi yang dibuat. Misalnya hubungan keluarga seperti

yang diuraikan dalam syntax berikut ini.

class Person < ActiveRecord::Base has_many :brothers

has_many :sister belongs_to :mother belongs_to :father end

Untuk proses manipulasi model data, disitu terdapat controllers. Sebuah

aplikasi dapat memiliki controller, bila terdapat model yang menggambarkan alat

kita juga beberapa. Jika memiliki controller yang menggambarkan alat yang

menggambarkan. Misalnya, jika memiliki model yang menggambarkan

kendaraan, Anda juga mungkin memiliki controller yang menjelaskan bagaimana

cara menambahkan sebuah mobil baru, berubah warna, atau menghapusnya dari

persediaan. Logika controller ditangani dengan komponen rails yang disebut Aksi

Controller.

Demi kelancaran dalam pembuatan aplikasi sebelumnya kita dihadapkan

(31)

lunak yang berpengaruh dalam menjalankan framework Rubi On Rail ( disebut

juga RoR atau Rail saja).

Proses instalasi Ruby On Rails (dicontohkan disini adalah instalasi Ruby On Rails

pada windows) :

1) Installer Ruby ini dapat ditemukan diMisalnya

disini dicontohkan instalasi pada versi Ruby186-25.exe

Gambar 2.3 Instalasi Ruby Pada Windows

2) Jalankan Installer Ruby

Seperti biasa, ikuti saja petunjuk installation wizard yang disediakan.

Untuk memastikan keberhasilan dari proses instalasi ruby dapat di cek

melalui command prompt dengan mengetikkan perintah.

ruby –version

Kurang lebih akan muncul seperti ini.

(32)

Dalam contoh gambar diatas pada intinya ditemukan command balasan

dari perintah yang muncul yang isinya mengenai ruby version yang

berhasil diinstal, dan tanggal ketika install telah selesai, yang menandakan

hal tersebut pada intinnya adalah seperti ini.

Ruby 1.8.6 <2007-03-13 patchlevel 0> [i386-mswin32]

Jika tidak muncul seperti pada gambar yang ada diatas (gambar 2.4) atau

bahkan pesan kesalahan, cek kembali apakah dalam windust path

environmentnya sudah terdapat path menuju file executablenya ruby. jika

belum tambahkan di Path environment variable anda [path tempat diinstall

ruby]\bin.

3) Instalasi Rails

Jika komputer kita terhubung ke internet dari command prompt tinggal

ditambahkan baris perintah :

gem install rails –include-dependencies

Tetapi jika tidak memiliki terkoneksi internet. Dapat diunduh terlebih

dulu file-file yang dibutuhkan dari komputer lain di alamat

File - file yang dibutuhkan antara lain :

• rake-0.7.2.gem

• activesupport-1.4.2.gem

• activerecord-1.15.3.gem

• actionpack-1.13.3.gem

(33)

• rails-1.2.3.gem

Versi file-file diatas bebas sesuai selera masing2 versi berapa yang akan

di download. Disarankan untuk memakai versi yang terbaru. Instalasi rails dari

command prompt dengan perintah :

gem install rake-0.7.2.gem

Jika semua telah terinstal dengan baik maka tinggal mencoba Rails dan

kita bisa menggunakan web brick sebagai http server yang telah terinstal secara

default. Ruby on Rails juga dapat di integrasikan dengan server lain seperti

Apache, IIS dan lainnya. Namun, dalam tulisan kali ini kita tidak membahas hal

tersebut.

mkdir coba rails coba cd coba

ruby script/server

Jalankan browser untuk melihat dan ketik http://localhost:3000

2.3 UML

Obyek dalam ‘software analysis & design’ adalah sesuatu berupa konsep

(concept), benda (thing), dan sesuatu yang membedakannya dengan

(34)

lainlainnya. Tapi obyek dapat pula merupakan sesuatu yang abstrak yang hidup

didalam sistem seperti tabel, database, event, system messages. Obyek dikenali

dari keadaannya dan juga operasinya. Sebagai contoh sebuah mobil dikenali dari

warnanya, bentuknya, sedangkan manusia dari suaranya. Ciriciri ini yang akan

membedakan obyek tersebut dari obyek lainnya. Alasan mengapa saat ini

pendekatan dalam pengembangan software dengan object-oriented, pertama

adalah scalability dimana obyek lebih mudah dipakai untuk menggambarkan

sistem yang besar dan komplek. Kedua dynamic modeling, adalah dapat dipakai

untuk permodelan sistem dinamis dan real time.

Dalam dunia pemodelan, metodologi implementasi obyek walaupun terikat

kaidah-kaidah standar, namun teknik pemilihan obyek tidak terlepas pada subyektifitas

software analyst & designer. Beberapa obyek akan diabaikan dan beberapa obyek

menjadi perhatian untuk diimplementasikan di dalam sistem. Hal ini sah-sah saja karena

kenyataan bahwa suatu permasalahan sudah tentu memiliki lebih dari satu solusi. Ada 3

(tiga) teknik/konsep dasar dalam OOA/D, yaitu pemodulan (encapsulation), penurunan

(inheritance) dan polymorphism.

2.3.1 Use Case

Sebuah use case menggambarkan suatu urutan interaksi antara satu atau

lebih aktor dan sistem. Dalam fase requirements, model use case mengambarkan

sistem sebagai sebuah kotak hitam dan interaksi antara aktor dan sistem dalam

suatu bentuk naratif, yang terdiri dari input user dan respon-respon sistem. Setiap

use case menggambarkan perilaku sejumlah aspek sistem, tanpa mengurangi

struktur internalnya. Selama pembuatan model use case secara pararel juga harus

(35)

2.3.2 Aktor

Sebuah aktor mencirikan suatu bagian outside user atau susunan yang

berkaitan dengan user yang berinteraksi dengan sistem [Rumbaugh, Booch, dan

Jacobson 1999]. Dalam model use case, aktor merupakan satu-satunya kesatuan

eksternal yang berinteraksi dengan sistem. Terdapat beberapa variasi bagaimana

aktor dibentuk [Fowler dan Scott 1999]. Sebuah aktor sering kali merupakan

manusia (human user).

Pada sejumlah sistem informasi, manusia adalah satu-satunya aktor. Dan

mungkin saja dalam sistem informasi, seorang aktor bisa saja menjadi suatu

sistem eksternal. Pada aplikasi real-time dan distribusi, sebuah aktor bisa saja

menjadi satu perangkat eksternal I/O atau sebuah alat pengatur waktu. Perangkat

eksternal I/O dan pengatur waktu aktor secara khusus lazimnya berada dalam

real-time yang tersimpan dalam sistem (real-time embedded systems), sistem

berinteraksi dengan lingkungan eksternal melalui sensor dan aktuator.

Gambar 2.5 Contoh Penggunaan Aktor dan Use Case

Suatu aktor bisa juga menjadi sistem eksternal yang melakukan inisiatif

(sebagai primary aktor) atau partisipan (sebagai secondary aktor) dalam use case.

Satu contoh aktor sistem eksternal adalah pabrik robot dalam Automation System.

(36)

menggerakkan alarm conditions yang dikirim ke operator pabrik yang

berkepentingan, yang telah terdaftar untuk menerima alarms. Dalam use case ini,

robot merupakan primary aktor yang mengawali inisiatif use case, dan operator

merupakan secondary aktor yang menerima alarm.

2.3.3 Identifikasi Use case

Untuk menjabarkan use case dalam sistem, sangat baik bila dimulai

dengan memperhatikan aktor dan actions/aksi yang mereka lakukan dalam sistem.

Setiap use case menggambarkan suatu urutan interaksi antara aktor dengan sistem.

Sebuah use case harus memberikan sejumlah nilai pada satu aktor. Kemudian,

kebutuhan fungsional sistem dijelaskan dalam use case yang merupakan suatu

spesifikasi eksternal dari sebuah sistem. Bagaimanapun juga, ketika membuat use

case, sangatlah penting menghindari suatu dekomposisi fungsional yang dalam

beberapa use case kecil lebih menjelaskan fungsi-fungsi individual sistem

daripada menjelaskan urutan kejadian yang memberikan hasil yang berguna bagi

aktor.

Perhatikan lagi contoh pada perbankan. Disamping penarikan melalui

ATM, ATM Customer, aktor juga bisa menanyakan jumlah rekening atau

mentransfer dana antar dua rekening. Karena terdapat fungsi-fungsi yang berbeda

yang diajukan oleh customer dengan hasil-hasil guna yang berbeda, fungsi-fungsi

pertanyaan dan pentransferan harus dibuat sebagai use case yang terpisah,

daripada menjadi bagian dari original use case. Oleh karena itu, customer dapat

(37)

Funds (Penarikan dana), Query Account, dan Transfer Funds (Pentransferan

Dana).

Gambar 2.6 Aktor dan Use Case Dalam Sistem Bank

Urutan utama use case menjelaskan urutan interaksi yang paling umum antara

aktor dan sistem. Dan mungkin saja terdapat cabang-cabang urutan use case utama, yang

mengarah pada berkurangnya frekuensi interaksi antara aktor dengan sistem.

Deviasi-deviasi dari urutan utama hanya dilaksanakan pada beberapa situasi, contohnya jika aktor

melakukan kesalahan input pada sistem. Ketergantungan pada aplikasi kebutuhan,

alternatif ini memecahkan use case dan kadang-kadang bersatu kembali dengan urutan

utama. Cabang-cabang alternatif digambarkan juga dalam use case.

2.3.4 Pendokumentasian Model Use Case

Use case didokumentasi dalam suatu use case model, yaitu sebagai

berikut:

a) Use Case Name. Setiap use case diberi nama.

(38)

c) Dependency. Bagian ini menggambarkan apakah use case yang satu

tergantung pada use case yang lain, dalam arti apakah use case tersebut

termasuk pada use case yang lain atau malah memperluas use case lain.

d) Actors. Bagian ini memberikan nama pada actor dalam use case. Selalu

terdapat use case utama (primary use case) yang memulai use case.

Disamping itu terdapat juga secondary use case yang terlibat dalam use

case. Contohnya, dalam use case Withdraw Funds, ATM Customer

adalah actor-nya.

e) Preconditions. Satu atau lebih kondisi harus berjalan dengan baik pada

permulaan use case; contohnya mesin ATM yang tidak jalan,

menampilkan pesan Selamat Datang.

f) Deskripsi. Bagian terbesar dari use case merupakan deskripsi naratif dari

urutan utama use case yang merupakan urutan yang paling umum dari

interaksi antara aktor dan sistem. Deskripsi tersebut dalam bentuk input

dari aktor, diikuti oleh respon pada sistem. Sistem ditandai dengan sebuah

kotak hitam (black box) yang berkaitan dengan apa yang sistem lakukan

dalam merespon input aktor, bukan bagaimana internal melakukannya.

g) Alternatif-alternatif. Deskripsi naratif dari alternatif merupakan cabang

dari urutan utama. Terdapat beberapa cabang alternatif dari urutan

utama. Contohnya, jika rekening customer terdapat dana yang tidak

sesuai, akan tampil permohonan maaf dan menolak kartu.

h) Postcondition. Kondisi yang selalu terjadi di akhir use case, jika urutan

(39)

i) Outstanding questions. Pertanyaan-pertanyaan tentang use case

didokumentasikan untuk didiskusikan dengan para user.

2.4 OOP (Objeck Oriented Programing)

Objec Oriented Programming (OOP) merupakan paradigma pemrograman

yang menggunakan "objek" - struktur data yang terdiri dari data fields dan metode

bersama dengan interaksi mereka - untuk merancang aplikasi dan program

komputer. Teknik pemrograman dapat mencakup fitur seperti menyembunyikan

informasi, data abstraksi, enkapsulasi, modularitas, polimorfisme, dan pewarisan.

Itu tidak umum digunakan dalam pengembangan aplikasi perangkat lunak arus

utama sampai awal 1990-an. Banyak modern bahasa pemrograman sekarang

mendukung OOP.

Object Oriented Programming memiliki akar yang dapat ditelusuri pada

1960-an. Seperti hardware dan software menjadi semakin kompleks, kualitas

sering berkompromi. Para peneliti mempelajari cara untuk menjaga kualitas

perangkat lunak dan dikembangkan pemrograman berorientasi objek dalam

bagian untuk mengatasi masalah-masalah umum dengan sangat menekankan

diskrit, dapat digunakan kembali unit logika pemrograman. Metodologi yang

berfokus pada data daripada proses, dengan program yang terdiri dari modul

mandiri (objek) masing-masing berisi semua informasi yang dibutuhkan untuk

memanipulasi struktur data sendiri. Hal ini berbeda dengan yang ada

pemrograman modular yang telah dominan selama bertahun-tahun yang berfokus

pada fungsi dari module, bukan data spesifik, tetapi juga disediakan untuk

(40)

pemrograman logika, yang memungkinkan kolaborasi melalui penggunaan

module yang terhubung (subrutin).

Pendekatan ini lebih konvensional, yang masih tetap, cenderung untuk

mempertimbangkan data dan perilaku secara terpisah. Sebuah program

berorientasi objek dengan demikian dapat dilihat sebagai kumpulan objek yang

saling berinteraksi, berlawanan dengan model konvensional, di mana program

dipandang sebagai daftar tugas (subrutin) untuk melakukan. Dalam OOP, setiap

objek dapat menerima pesan, memproses data, dan mengirim pesan ke

objek-objek lain dan dapat dipandang sebagai independen 'mesin' dengan peran atau

tanggung jawab yang berbeda. Tindakan (atau "operator") pada objek-objek ini

sangat erat terkait dengan objek. Sebagai contoh, struktur data cenderung

'membawa operator sekitar mereka sendiri dengan mereka "(atau setidaknya"

mewarisi "mereka dari obyek atau kelas yang sama).

Pemrograman berorientasi objek dikembangkan sebagai metodologi

pemrograman yang dominan selama pertengahan 1990-an, sebagian besar

disebabkan oleh pengaruh C++. Dominasinya itu makin diperkuat oleh

meningkatnya popularitas dari antarmuka pengguna grafis, yang pemrograman

berorientasi obyek tampaknya cocok. Contoh dari GUI dinamis terkait erat dengan

perpustakaan dan bahasa OOP dapat ditemukan di kerangka kerja di Mac OS X,

yang ditulis di Objective-C, sebuah object-oriented, dinamis ekstensi pesan ke C

didasarkan pada Smalltalk. OOP toolkit juga meningkatkan popularitas

pemrograman kendali-event (walaupun konsep ini tidak terbatas pada OOP).

Sebagian merasa bahwa asosiasi dengan GUI (nyata atau tidak) adalah apa yang

(41)

Fitur berorientasi objek telah ditambahkan ke banyak bahasa yang ada

selama waktu itu, termasuk Ada, BASIC, Fortran, Pascal, Python dan Ruby.

Mungkin yang paling penting secara komersial baru bahasa berorientasi obyek

adalah Visual Basic. NET (VB.NET) dan C++, baik yang dirancang untuk

Microsoft. NET platform, dan Java, yang dikembangkan oleh Sun Microsystems.

VB.NET dan C++ baik dukungan lintas bahasa warisan, memungkinkan kelas

didefinisikan dalam satu bahasa ke bahasa kelas subclass didefinisikan dalam

bahasa lain.

Sama seperti pemrograman prosedural mengarah pada perbaikan teknik

seperti pemrograman terstruktur, modern berorientasi objek metode desain

perangkat lunak mencakup perbaikan seperti penggunaan pola desain, design by

kontrak, dan pemodelan bahasa (seperti UML). OOPS istilah yang mengacu pada

sebuah object oriented programming system, adalah terjadi di awal

pengembangan pemrograman berorientasi objek.

2.5 CSS

CSS (Cascading Style Sheet) adalah standard pembuatan dan pemakaian

style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan

tag HTML seperti font, color, text, dan table menjadi lebih ringkas sehingga tidak

terjadi pengulangan tulisan. Dengan menggunakan CSS kita dapat membuat

tampilan pada aplikasi yang telah dibuat menjadi lebih menarik.

Terdapat beberapa keuntungan menggunakan CSS (Cascading Style Sheet)

(42)

• Memisahkan presentastion sebuah dokumen dari content document itu

sendiri.

• Mempermudah dan Mempersingkat pembuatan dan pemeliharaan

dokumen web

• Mempercepat proses rendering/pembacaan HTML.

Dalam perancangannya dapat dijelaskan beberapa cara. Pada penulisan

CSS dapat dijelaskan dan dicontohkan sebagai berikut :

Inline style sheet. Yaitu penulisan didalam elemen HTML. Seperti yang terlihat

pada gambar 2.7.

Gambar 2.7 Penulisan CSS Dengan Inline Style Sheet

Embedded Style Sheet. Penulisan CSS didalam dokumen HTML dan

menggunakan tag <style></style>

(43)

Linked Style Sheet. Penulisan skrip CSS dihalaman berbeda atau terpisah dari

html.

Gambar 2.9 Penulisan CSS Dengan Linked Style Sheet

2.6 World Wide Web (WWW)

WWW (World Wide Web) yang juga dikenal dengan Web, merupakan

framework arsitektur yang menampilkan dokumen-dokumen yang saling

berhubungan dan tersebar di Internet. Dari sudut pandang pengguna, Web terdiri

dari kumpulan dokumen yang tersebar diseluruh dunia yang biasanya dikenal

dengan nama page (halaman). Setiap halaman dapat berisi link ke halaman

lainnya. Halaman yang menunjuk halaman lainnya disebut hypertext dan teks

yang mempunyai link kehalaman lainnya disebut hyperlink. Dalam hal ini,

diperlukan suatu mekanisme penamaan dan pencarian lokasi halaman yang

bersangkutan. Untuk itu, setiap halaman harus diberi sebuah URL (Uniform

Resource Locator) yang secara efektif melayani nama-nama halaman diseluruh

dunia. URL terdiri dari tiga bagian, yaitu protokol, nama DNS mesin tempat

halaman berada, dan nama lokal yang secara unik mengidentifikasi halaman

tertentu.

Untuk dapat melihat halaman Web, pengguna harus mengakses alamat

(44)

Gambar 2.10 Konsep dasar Browser dan Web Server

adalah Netscape Navigator dan Microsoft Internet Explorer. Browser mengambil

halaman yang diminta, menginterpretasikan teks dan perintah-perintah format

yang berada didalamnya, dan menampilkan halaman yang telah terformat dengan

benar dilayar.

Server dan browser web berkomunikasi satu sama lain dengan protocol

yang memang dibuat khusus untuk ini, yaitu HTTP. HTTP bertugas menangani

permintaan-permintaan (request) dari broser untuk mengambil dokumen-dokumen

web. HTTP bisa diangggap sebagai system yang bermodel client-server. Browser

web, sebagai clientnya, mengirimkan permintaan kepada server web untuk

mengirimkan dokumen-dokumen web yang dikehendaki pemgguna. Server web

lalu memenuhi permintaan ini dan mengirimkannya melaui jaringan kepada

browser. Setiap permintaan akan dilayani dan ditangani sebagai suatu koneksi

terpisah yang berbeda.

Dengan berkembangnya teknologi berbasis web ini, akan sangat berguna

apabila bisa dipadukan dengan layanan yang dapat digunakan dalam lingkup

organisasi maupun perusahaan seperti e-commers, e-librari, e-book dan

(45)

teknologi secara menyeluruh disegala lini, juga bisa dimanfaatkan untuk proses

pembookingan tempat secara online seperti pada tugas akhir ini.

2.7MySQL

MySQL adalah sebua

SQL (Database Management System) atau DBMS yang multi thread, multi user.

Berbeda dengan proyek-proyek seperti

disponsori oleh sebuah perusahaan komersial

memegang hak cipta hampir atas semua kode sumbernya. Kedua orang Swedia

dan satu orang

Allan Larsson, dan Michael "Monty" Widenius.

MySQL merupakan Relational Database Management System (RDBMS)

yang didistribusikan secara gratis di bawah lisensi GPL (General Public

License). Dimana setiap orang bebas untuk menggunakan MySQL, namun tidak

boleh dijadikan produk turunan yang bersifat closed source atau komersial.

MySQL sebenarnya merupakan turunan salah satu konsep utama dalam database

sejak lama, yaitu SQL (Structured Query Language).

SQL (Structured Query Language) adalah sebuah konsep operasi

database, terutama untuk pemilihan atau seleksi dan pemasukan data, yang

memungkinkan operasi data dikerjakan dengan mudah secara otomatis.

Kehandalan suatu sistem database (DBMS) diketahui dari cara kerja optimizer

-nya dalam melakukan proses perintah SQL (Structured Query Language), yang

(46)

B

BAABB IIIIII

A

ANNAALLIISSIISS DDAANN PPEERRAANNCCAANNGGAANN SSIISSTTEEMM

Untuk membuat aplikasi pada Proyek Tugas Akhir ini, terlebih dahulu

dilakukan analisis sistem, kemudian analisis kebutuhan, perancangan sistem dan

yang terakhir adalah perancangan antarmuka. Analisis sistem berguna untuk

mengetahui data apa saja yang dibutuhkan dalam proses implemetasi nantinya.

Analisis kebutuhan berguna untuk melakukan identifikasi user dan menentukan

variabel kebutuhan untuk input ataupun output user. Perancangan sistem berguna untuk mengintegrasikan semua proses-proses yang terjadi, kemudian dilakukan

perancangan database. Perancangan antarmuka, digunakan sebagai jembatan antara pengguna dengan sistem aplikasi yang dibuat, sehingga pengguna dapat

mengoperasikan aplikasi yang dibuat.

3.1 Analisis Sistem

Membangun website yang dimaksud dalam perancangan tugas akhir ini adalah dengan memberikan fasilitas kepada instansi terkait dan pelanggan dalam

bidang penyewaan lapangan futsal yang sebagian besar dari pelanggan adalah

orang-orang yang mulai mengenal teknologi. Dalam hal ini penulis mencoba

untuk merancang sebuah aplikasi dengan menggunakan Ruby On Rails atau disebut juga dengan Framework Rails saja, dengan tidak mengabaikan kebutuhan oleh user itu sendiri.

Aplikasi berbasis website ini dibuat sedemikian rupa agar dapat memudahkan setiap pengunjung yang telah menjadi member untuk melakukan

(47)

34

3.2 Analisis Kebutuhan

Adapun pendukung dalam perancangan dan pembangunan website interaktif ini adalah hasil analisis terhadap kebutuhan-kebutuhan user. Analisis

yang dimaksud tersebut adalah sebagai berikut :

3.2.1 Identifikasi User

Sistem sangat membutuhkan user sebagai pelaku sistem, adapun

identifikasi yang dilakukan terhadap user utama pada aplikasi, yaitu : a. Member

Berhak melakukan login terhadap sistem karena sudah terdaftar dengan aturan-aturan yang menjadikan customers biasa tersebut menjadi member, sehingga dapat melakukan booking secara online.

b. Admin

Disini adalah orang yang telah menjadi petugas untuk mengatur website dan mempunyai hak akses sepenuhnya terhadap website aplikasi.

c. Guest

Pengunjung website aplikasi yang memiliki ruang akses yang sangat terbatas, yaitu hanya dapat melihat beberapa konten saja yang tersedia

tanpa bisa melakukan booking lapangan.

3.2.2 Variabel Kebutuhan Input dan Output User

Selain sistem membutuhkan user sebagai pelaku, sistem juga

(48)

35

meresponnya berupa output yang sesuai dengan permintaan user. Adapun variabel input dan output tersebut, adalah :

a. Member

1) Input :

- User id dan password sebagai member (login).

- Add booking lapangan.

2) Output :

- Informasi jadwal lapangan

- Data hasil booking (konfirmasi hasil booking) - View berita

b. Admin

1) Input :

- Menginputkan user_id dan password (Login). - Memasukkan berita-berita.

- Manipulasi data booking. - Input Data Lapangan

2) Output :

- Informasi detail profil user (admin, member).

- Keseluruhan data termasuk jadwal.

- Data history member. - Informasi data booking. - Data berita.

(49)

36

2) Output : - View berita

3.3 Perancangan Sistem

Di dalam rancang bangun website interaktif ini, dibuat dengan beberapa perancangan yang bermaksud untuk menjelaskan dan menggambarkan sistem

secara umum dan menyeluruh, sistem perancangan tersebut diantaranya adalah

Use case, activity diagram, Conceptual Data Model (CDM), Physical Data Model

(PDM) serta designinterface.

3.3.1 Use Case Diagram

Use case diagram digunakan untuk memodelkan bisnis proses berdasarkan

perspektif pengguna sistem. Use case diagram terdiri atas diagram untuk use case dan actor.

Use case merepresentasikan operasi-operasi yang dilakukan oleh actor.

Use case digambarkan berbentuk elips dengan nama operasi dituliskan di

dalamnya. Actor yang melakukan operasi dihubungkan dengan garis lurus ke use case. Dalam system ini use case dibagi menjadi dua bagian, yaitu use case untuk admin dan use case untuk pengunjung.

a. Use Case Diagram Booking Online Admin

Use case diagram yang digunakan pada website booking untuk admin pada

(50)

37

Gambar 3.1 Use CaseDiagram Booking Online Admin

Pada Gambar 3.1 tersebut dapat dilihat bahwa dalam booking online admin pada ”Leksono Futsal”. Admin bertugas mengatur seluruh data, diantaranya

adalah menambah data admin sendiri, menambah data member, data news.

b. Use Case Diagram Booking Online Pengunjung

Use case diagram kedua yang digunakan pada website booking untuk

pengunjung (member dan guest) pada ”Leksono Futsal” dapat dilihat pada Gambar 3.2 berikut.

(51)

38

Pada Gambar 3.2 menjelaskan bagaimana website aplikasi tersebut digunakan oleh pengunjung dan bagaimana pemanfaatanya. Kegiatan yang terjadi antara

lain member login, member booking, guest registration untuk menjadi member, dan view news atau membaca berita.

3.3.2 Activity Diagram Website Booking Online

Activity diagrams 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 paralel yang mungkin terjadi pada beberapa eksekusi.

a. Activity Diagram Website Admin

1) Activity Diagram Website ”Login Admin”

Design login admin pada halaman login yang digunakan admin untuk

(52)

39

Gambar 3.3 tersebut menjelaskan bagaimana admin memasukkan data login yang dimiliki (username dan password admin) sehingga admin dapat mengkakses dan mengatur/maintenance website tersebut.

2) Activity Diagram Website Admin ”Add Admin”

Design proses add data admin seperti yang tampak pada Gambar 3.4 berikut

(53)

40

3) Activity Diagram Website Admin ”Add Member”

(54)

(55)

42

Dalam hal ini (lihat Gambar 3.7) adalah diagram aktifitas mengenai aktifitas

untuk merubah/editing data admin dari data lama yang telah ada menjadi

data baru yang telah dirubah sedemikian rupa oleh admin. Secara sederhana

dapat dijelaskan bagaimana admin membuka menu admin merubah data

yang ada kemudian menyimpan data dalam database, akan tapi sebelm

disimpan sistem akan menanyakan (Yes or No) kepada admin apakah admin yakin akan merubah data (menyimpan data perubahan) atau

membatalkannya (kembali ke menu awal) melalui pesan yang telah

terseting sedemikian rupa.

(56)

43

Seperti yang ada pada Gambar 3.8, aktifitas edit member disini hampir sama

dengan proses edit sebelumya (Gambar 3.7) hanya edit member terdapat

pada halaman data member.

7) Activity Diagram Website Admin ”Edit News”

Aktifitas-aktifitas yang terjadi disini dapat dilihat pada Gambar 3.9 berikut

(57)

(58)

(59)

46

telah dijelaskan sebelumnya maka pada Gambar 3.11 dan Gambar 3.10

mengenai action delete yang dapat dilakukan oleh admin.

11)Activity Diagram Website Admin ”View News”

Beberapa aktifitas mengenai admin viewing news, seperti yang ada pada Gambar 3.13. Bagaimana dan apasaja aktifitas admin dalam melihat untuk

(60)

47

Pada Gambar 3.14 ini merupakan beberapa aktifitas yang harus dilakukan

member untuk mengakses website agar dapat melakukan booking lapangan pada ”Leksono Futsal”

2) Activity Diagram Website Pengunjung ” Member Booking”

(61)

48

next dan member dapat mengisi data booking tetapi kalau tidak member bisa melakukan pembatalan proses.

3) Activity Diagram Website Pengunjung ”Registration”

(62)

(63)

50

Gambar 3.18 Conceptual Data Model Website Booking

Pada CDM (Lihat Gambar 3.18) disini, didalam suatu database terdapat

beberapa tabel diantaranya adalah tabel members, tabel admins, tabel events, tabel

event_series, tabel lapangans dan beritas. Semua tabel dalam perancangan

database tersebut berelasi satu sama lain sesuai dengan kebutuhan sistem didalam

database. Tabel event disini difungsikan sebagai store atau space penyimpanan

(64)

51

dapat dilakukan oleh member saja, sedangkan admin hanya dapat melihat dan

menghapus hasil booking.

3.3.4 Physical Data Model (PDM)

PDM (Phyical Data Model) merupakan hasil generate dari diagram CDM. Dari diagram ini dapat dilihat struktur tabel dari perancangan sistem yang sudah

dibuat. Yang dipakai dalam sistem ini, seperti yang tampak pada Gambar 3.19.

(65)

52

Seperti yang tampak pada Gambar 3.19 tersebut, disitu terlihat beberapa

tabel yang attributnya bertambah. Attribut tersebut berasal dari tabel lain yang berelasi dengan tabel yang atributnya bertambah, pada gambar tersebut terdapat

dua tabel dengan foregn key tetap atau tidak bertambah. Struktur tabel dan tipe data pada PDM ini disesuaikan dengan database yang digunakan, PDM ini disesuaikan dengan database MySQL versi 5.0.

Dari CDM (Conceptual Data Model) dan PDM (Physical Data Model) yang telah digambarkan tersebut maka langkah selanjutnya adalah menulis

kembali rancangan tersebut pada Model yang termasuk MVC dengan Ruby On

Rails untuk menghubungkan antar tabel terkait dan pada Database Migration

dalam framework rails untuk menjabarkan tiap-tiap attribut di dalam tabel yang ada.

3.3.5 Desain Database

Dari entitas-entitas yang telah dihasilkan dalam pembuatan CDM

(Conceptual Data Model) dan PDM (Physical Data Model) diatas maka penulis

juga akan lebih dimudahkan dan menjadikan design lebih terarah. Kini penulis dapat memulai untuk menulis kembali dalam bentuk kode-kode di dalam ruby on

rails yang terletak pada bagian models system. Setelah Models dan Database

Migrations dibuat, Kemudian dilakukan migrate database ”db:migrate” melalui

command promt.

(66)

53

3.3.5.1 Database Migration Booking

Seperti pada penjelasan sebelumnya, disini terdapat beberapa tabel yang

nantinya dipakai di dalam database, misalnya : tabel events, event_series,

members, lapangans, admins, dan tabel beritas. Berikut adalah beberapa deklarasi

pada database migrations.

a) Migrate Event ( _create_events )

(67)

54

c) Migrate Member ( _create_members )

d) Migrate Lapangan ( _create_lapangans )

(68)

55

f) Migrate Berita ( _create_beritas )

3.3.5.2 Relasi Tabel Database

Berikut adalah beberapa deklarasi pada relasi tabel dalam database yang terletak pada Ruby On Rails project file yang disebut model.

a) Model Admin

b) Model Berita

c) Model Event

(69)

56

e) Model Lapangan

f) Model Member

3.4 Perancangan Antarmuka (Interface)

Perancangan antarmuka merupakan perancangan halaman aplikasi yang

nantinya akan berinteraksi secara langsung dengan pengguna. Pada aplikasi ini

terdapat hubungan antarmuka yang digunakan pada aplikasi berbasis website ini, baik dari sisi pengguna admin maupun user umum saat mengakses sistem.

Antarmuka yang disediakan adalah halaman utama (index). Adapun perancangan yang akan dibuat adalah sebagai berikut :

3.4.1 Perancangan Antarmuka Pengunjung

Dalam perancangan halaman yang digunakan oleh para pengunjung untuk

mengakses website booking seperti pada Gambar 3.20 dan Gambar 3.21 berikut. Halaman ini digunakan ketika member hendak mengakses website agar

member dapat melakukan aktifitas booking lapangan pada “Leksono Futsal”. Disitu disediakan kotak untuk mengisi username dan mengisi password kemudian terdapat tombol login yang tak lain adalah untuk mengeksekusi username dan

(70)

57