50
BAB III ANALISIS DAN PERANCANGAN
3.1
Analisa Proses Bisnis
3.1.1 Gambaran Umum Sistem Yang Sedang Berjalan
Pada saat tugas akhir ini dikerjakan, pengolahan data-data Ocean Climate di server RDS masih dalam tahap pengembangan. Data Buoy dikirimkan NOAA melalui FTP dan diterima oleh RDS dalam format ASCII. Data Buoy RAMA yang dikirim bersifat tidak real time. Setiap harinya data buoy akan diterima sebanyak satu kali setiap pukul 12.00 UTC atau sekitar pukul 07.00 AM. RDS lalu melakukan pengecekan pada history
Gambar 3.1 Alur Proses Data Buoy RAMA
51
dan memastikan data terakhir sudah ter-update ke dalam file FTP. Kemudian data akan di parser ke dalam format MySQL lalu dilakukan pengecekan lagi apakah data normal atau tidak. Semua data-data tersebut kemudian akan tersimpan di dalam database. Dan seterusnya data tersebut akan diambil untuk dianalisis dan diolah oleh para ilmuwan. Keterangan Gambar : 1. Pengiriman data mentah dari buoy ke satelit setiap satu jam. 2. Data dikirim dan dikumpulkan di server NOAA 3. Transformasi data dari format binary menjadi format ascii 4. Transformasi data dari format hexa menjadi format database (mysql) 5. Data di duplikat dan dijadikan master data. 6. Data format ascii dikirim melalui ftp ke server RDS 7. Server RDS menyimpan data dan mengkonversinya menjadi format database (mysql).
3.1.2 Fungsi RDS
Read Down Station (RDS) adalah suatu tempat atau stasiun yang dijadikan sebagai pusat penerimaan dan pengawasan data ocean climate yang terdapat di Badan Pengkajian dan Penerapan Teknologi (BPPT). Selain sebagai pusat pemantauan ocean climate, RDS memiliki fungsi lain yaitu sebagai berikut : 1. Sebagai pusat penerimaan dan pemantauan data buoy tsunami. 2. Sebagai pusat penerimaan dan pemantauan data buoy INA/TRITON. 3. Memberikan laporan sebagai referensi kepada BMKG untuk informasi peringatan dini tsunami (Tsunami Early Warning System).
3.1.3 Tugas RDS
Adapun tugas dari RDS adalah sebagai berikut : 1. Sejak tahun 2007 RDS bertugas dalam pengolahan data Tsunami Early Warning System (TEWS). 2. Pada tahun 2007 tugas RDS bertambah dengan adanya buoy RAMA, yakni untuk mengelola data cuaca yang ada disekitar Samudera Hindia. 3. Tahun 2014, RDS mengelola data pada buoy INA/TRITON. Buoy ini adalah buoy pertama milik Indonesia yang berfungsi mendeteksi keadaaan iklim di Indonesia.
52
3.1.4 Ruang Lingkup
Ruang lingkup adalah suatu batasan yang memudahkan penulis dalam melaksanakan penelitian guna mendapatkan hasil yang efektif dan efisien untuk memisahkan aspek tertentu sebuah objek. Ruang lingkup dalam penelitian ini adalah : 1. Ruang lingkup penelitian hanya dibatasi pada data buoy RAMA. 2. Penulis menggunakan satu sampel data buoy Rama untuk diimplementasikan pada Tugas Akhir ini. 3. Penulis menggunakan data yang sudah tersimpan dalam database RDS dalam format .sql. 4. Penulis bertugas sebagai pengembang aplikasi yang sudah ada. 5. Dalam pengumpulan data, peneliti menggunakan metode observasi dan wawancara. 6. Penulis hanya membuat aplikasi grafik dan data row sesuai kebutuhan ilmuwan. 7. Data-data yang akan disajikan dalam bentuk grafik diantaranya adalah Data Suhu Udara, Data Tekanan Permukaan Laut, Data Heat, Data Isothermal, Data Kelembaban Relatif, Data Suhu Permukaan Laut, Data Angin, Data Dynamic Height, Data Radiasi Gelombang Panjang, Data Radiasi Gelombang Pendek, Data Persentase Waktu Curah Hujan. 8. Data yang digunakan penulis dalam tugas akhir ini tidak bersifat real time. 9. Penulis menggunakan data buoy dari tahun 2007 sampai dengan tahun 2015. Data terdahulu tetap dibutuhkan oleh ilmuwan guna melihat pola/pattern perubahan suatu keadaan dari tahun ke tahun yang selanjutnya digunakan untuk analisa. 10. Grafik hanya dapat di unduh ke dalam format PNG, JPEG, PDF, SVG, CSV dan XLS. 11. Penulis tidak membahas mengenai kemanan dan performance dari website yang penulis bangun.
53
3.2
Data Buoy Rama
Satu database yang ada pada server RDS mewakili satu stasiun buoy RAMA. Setiap database memiliki 7 tabel yang berisi informasi-informasi yang diperoleh dari sensor yang dipasang pada perangkat buoy RAMA. Informasi tersebut diantaranya adalah sebagai berikut : (Dwi, 2010), (Tomczak, 2010) 1. Suhu Udara Suhu udara adalah keadaan panas atau dinginnya udara. Alat untuk mengukur suhu udara disebut thermometer. Suhu udara bisa diartikan pula sebagai ukuran kinetik rata-rata dari pergerakan molekul-molekul. Dalam praktek unsur cuaca, suhu udara berbeda-beda untuk setiap tempat bersamaan dengan perubahan waktu. 2. Tekanan Permukaan Laut Tekanan didefinisikan sebagai gaya per satuan luas. Semakin ke dalam, tekanan permukaan laut akan semakin besar. Hal ini disebabkan oleh semakin besarnya gaya yang bekerja pada lapisan yang lebih dalam. 3. Heat Merupakan peningkatan suhu rata-rata permukaan bumi yang terjadi secara tetap (persisten) relatif terhadap kondisi rata-rata jangka panjang. Dalam pengertian lain, heat (panas) merupakan bentuk energi yang berkaitan dan sebanding dengan tingkat energi molekul. 4. Densitas Densitas merupakan faktor utama yang membangkitkan pergerakan vertikal air laut. Densitas air laut normal akan bertammbah terhadap kedalaman. Jika densitas permukaan air lebih tinggi daripada air dibawahnya maka terjadi kondisi gravitasi tidak stabil dan air permukaan akan turun/tenggelam. Densitas
dipengaruhi
oleh
temperatur/suhu
dan
salinitas.
Densitas
didefinisikan sebagai massa per satuan volume, biasanya gram per cm 3. Densitas
akan
meningkat
seiring
penurunan
temperature/suhu
dan
meningkatnya salinitas serta tekanan laut. 5. Isothermal Isothermal merupakan proses termodinamika yang prosesnya berjalan dan suhu gasnya tetap.
54
6. Kelembaban Relatif Merupakan jumlah uap air di udara dibandingkan dengan apa udara dapat “tahan” pada suhu itu. Ketika udara tidak bisa “menahan” semua kelembaban, maka akan mengembun seperti embun. Kelembaban relatif adalah rasio kelembaban mutlak saat ini untuk kelembaban absolut tertinggi. 7. Salinitas (Konsentrasi garam terlarut) (Thurman, 2011) Dalam pengertian sederhana, salinitas adalah jumlah total kadar garam (dalam gram) yang terdapat dalam satu kilogram air laut ketika semua karbonat telah dikonversi menjadi oksida, bromin dan iodin digantikan oleh semua organik. Salinitas merupakan salah satu properti air laut yang terpenting yang dapat mempengaruhi densitas. Dalam permukaan air laut, kisaran salinitas adalah 33-37. Komponen salinitas memiliki kepadatan yang lebih besar dari densitas air, sehingga densitas air akan meningkat dengan meningkatnya salinitas. 8. Suhu Permukaan Laut Suhu permukaan laut adalah salah satu parameter fisik oceanografi yang digunakan untuk menganalisis daerah penangkapan ikan dan merupakan faktor yang sangat penting bagi kehidupan organisme di laut. 9. Suhu Suhu didefinisikan sebagai ukuran langsung dari energi kinetik dari molekul yang membentuk zat. Energi kinetik adalah energi gerak, sehingga semakin tinggi suhu, semakin besar kecepatan molekul zat dari suhu yang diukur. 10. Angin adalah Angin adalah udara yang bergerak akibat adanya perbedaan tekanan udara dengan arah aliran angina dari tempat yang memiliki tekanan tinggi ke tempat yang bertekanan rendah atau
dari daerah yang memiliki
suhu/temperature rendah ke wilayah bersuhu tinggi. 11. Posisi Koordinat Merupakan titik yang berpedoman pada garis latitude dan longitude suatu daerah. Titik koordinat ini diperlukan untuk menentukan suatu lokasi daerah secara detail. 12. Dynamic Height Adalah jumlah kerja yang dibutuhkan untuk memindahan unit massa air secara vertikal dari permukaan laut ke suatu titik tertentu. Atau energi
55
potensial gravitasi per satuan massa. Dynamic height biasanya diukur sebagai selisih atau anomaly dari referensi nilai. 13. Gelombang Gelombang merupakan pergerakkan naik dan turunnya air secara tegak lurus permukaan laut yang membentuk kurva atau sinusoidal. Terjadinya gelombang laut diakibatkan oleh hembusan angin yang mentransfer energinya ke permukaan laut. Ketinggian gelombang bervariasi secara acak dalam ruang dan waktu. 14. Curah Hujan Curah Hujan adalah jumlah air yang jatuh selama periode tertentu yang diukur dengan satuan tinggi (mm) di atas permukaan horizontal bila tidak terjadi evaporasi, runoff dan infiltrasi. Curah hujan di suatu tempat dipengaruhi oleh keadaan iklim. 15. Arus Kedalaman Arus laut adalah pergerakkan massa air secara vertical dan horizontal sehingga menuju keseimbangannya. Arus kedalaman terjadi jauh di dasar perairan, arah pergerakannya tidak dipengaruhi oleh pola sebaran angin dan membawa massa air dari daerah kutub ke daerah ekuator. Biasanya untuk mengukur arus kedalaman digunakan sebuah alat yang dinamakan Current meter, yaitu dengan menempatkannya di beberapa stasiun buoy di bawah permukaan laut.
3.3
Analisa Aplikasi Berjalan
Analisa aplikasi berjalan bertujuan untuk mengetahui lebih jelas bagaimana cara kerja sistem tersebut dan masalah yang dihadapi sistem untuk dijadikan landasan usulan perancangan sistem.
Dalam tahap ini penulis menganalisa kebutuhan dasar sistem.
Analisa dilakukan terhadap data-data yang merepresentasikan masalah sehingga dapat diketahui spesifikasi kebutuhan sistem yang akan dibangun. Selama penulis melakukan observasi di lokasi penelitian, penulis melihat pengolahan data Ocean Climate sudah dapat ditampilkan dalam bentuk raw data dan penyajian datanya masih diambil secara bebas. Data juga sudah dapat disajikan dalam bentuk grafik namun masih bersifat statis. Grafik yang digunakan adalah Jpgraph. Jpgraph merupakan library grafik chart PHP yang berorientasi objek.
56
Penulis mengembangkan informasi yang berhubungan dengan masalah pengolahan data Ocean Climate. Aplikasi yang penulis kembangkan adalah aplikasi penyajian data ke dalam bentuk grafik dinamis menggunakan library Highchart dengan menambahkan menu unduh grafik baik dalam format jpeg, png, csv maupun xls, menambahkan menu filter berdasarkan range penanggalan pada grafik, menampilkan table raw data dengan penambahan menu filter. Aplikasi ini berjalan di atas Platform CodeIgniter
berbasis
web
dan
menggunakan
web
server
localhost
dalam
pengimplementasiannya.
3.4
Analisa Kebutuhan Sistem Dari hasil pengumpulan informasi dan data tersebut, dapat disimpulkan bahwa
permasalahan yang timbul adalah : 1. Dalam sesi wawancara penulis yang dilakukan kepada ilmuwan, penulis dapat mengambil kesimpulan bahwa ilmuwan memerlukan sebuah sistem yang dapat mempermudah ilmuwan dalam mengambil data Ocean Climate tanpa harus mengambilnya dari database. 2. Ilmuwan membutuhkan suatu sistem yang dapat menyaring informasi grafik sesuai range penanggalan. 3. Ilmuwan membutuhkan suatu sistem yang dapat mengunduh grafik yang disajikan baik dalam format jpeg, png, pdf, csv maupun xls. 4. Ilmuwan membutuhan sebuah sistem yang dapat menampilkan data raw suatu grafik dan melakukan filter terhadap data raw sehingga ilmuwan dapat memperoleh informasi yang lebih spesifik.
3.5
Rekomendasi Pengembangan Sistem
Dari kebutuhan sistem yang ditemukan, diusulkan suatu rekomendasi pengembangan sistem berupa suatu aplikasi yang memiliki kemampuan sebagai berikut : 1. Membantu
ilmuwan
dalam
mengelola
data
Ocean
Climate
dan
menyajikannya dalam bentuk grafik dinamis yang dapat diakses melalui website. Disini penulis merekomendasikan penyajian grafik dengan menggunakan library Highchart karena library ini bersifat dinamis. User dapat melakukan interaksi terhadap grafik tersebut seperti memperbesar grafik, menampilkan grafik sesuai range, mengunduh grafik dan sebagainya.
57
Library ini penulis pilih karena melihat keunggulannya dalam menyampaikan informasi melalui grafik interaktif. 2. Mampu melakukan filter terhadap grafik sesuai range penanggalan dengan menambahkan menu start_date dan end_date. Penulis merekomendasikan penggunaan library highstock. 3. Mampu menambahkan menu unduh grafik ke dalam format jpeg, png dan xls. 4. Mampu menampilkan informasi grafik berupa data raw. 5. Mampu menyajikan keseluruhan grafik ke dalam website yang dirancang dengan tampilan user friendly sehingga memudahkan ilmuwan dalam mengaksesnya.
3.6
Rancangan Umum Aplikasi
Dari hasil analisa di atas, penulis membuat sebuah perancangan aplikasi menggunakan PHP dan MySQL dengan Framework Codeigniter dan library Highcharts. Agar aplikasi ini mudah dipahami, penulis membuat diagram use case yang menunjukkan fungsionalitas suatu sistem. Diagram aktifitas untuk menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi. Sequence diagram untuk menggambarkan interaksi antar objek dan mengindikasikan komunikasi diantara objek serta perancangan database dan perancangan antar muka pemakai (user interface).
3.6.1 Class Diagram
Untuk mendefinisikan kelas dari suatu sistem, pertama tentukan dahulu objek apa saja yang dibutuhan di sistem. Objek dapat berupa orang, benda, kejadian, tempat dan lain-lain. Setiap objek memiliki atribut-atribut dan metode/operasi-nya.
58
Gambar 3.2 Class Diagram
Gambar diatas merupakan gambar class diagram dari database „da8‟ yang di dapat dari stasiun Buoy Rama 1.5n80.5e. Kelas di atas terdiri dari guestbook, table ti, table td, table tm, table tc dan table tp yang berisi atribut-atribut yang dapat dilihat sesuai gambar diatas.
3.6.2 Use Case Diagram
Sebuah Use Case Diagram merepresentasikan sebuah interaksi antara actor dengan sistem. Bisa dikatakan use case adalah suatu pola atau gambaran yang menunjukkan kelakukan suatu sistem atas kebutuhan user. Berikut ini penulis akan menjabarkan rancangan Use case digram sistem berjalan dan Use case diagram sistem usulan.
59
3.6.2.1 Use case Diagram Sistem Berjalan
Gambar 3.3 Use Case Diagram Sistem Berjalan
Gambar diagram use case di atas merepresentasikan sistem yang sedang berjalan saat ini pada server RDS (Read Down Station). Use case di atas menggambarkan sebuah actor yaitu User yang memiliki wewenang dalam menjalankan aplikasi.
Skenario Use Case Diagram Sistem Berjalan Skenario Use Case merupakan objek yang dimiliki oleh use case class. Skenario berperan untuk menyatakan pesan dan tindakan tunggal dari suatu aktor. Skenario digambarkan dari sudut pandang „aktor‟, seseorang atau piranti yang berinteraksi langsung dengan perangkat lunak dalam berbagai cara. Berikut penulis akan menjelaskan skenario-skenario berdasarkan use case diagram sistem berjalan di atas yaitu sebagai berikut:
Table 3.1 Skenario Use Case Memilih Menu Data Buoy
Nama Use Case
Memilih Menu Data Buoy
Aktor
User
Keterangan
User membuka situs Pusat Data Buoy Indonesia (PDBI). Memilih menu logger, kemudian memilih menu buoy Rama. Sistem akan menampilan halaman buoy Rama.
60
Table 3.2 Skenario Use Case Melihat Grafik
Nama Use Case
Melihat Grafik dan Data Row
Aktor
User
Keterangan
User sudah dalam pra-kondisi melihat menu data buoy, pada form pilih informasi, user memilih koordinat buoy, memilih tahun dan memilih bulan. Lalu menekan tombol „tampilkan‟. Sistem akan menampilkan grafik informasi serta row data sesuai pilihan user.
Table 3.3 Skenario Use Case Mengunduh Grafik
Nama Use Case
Mengunduh Grafik
Aktor
User
Keterangan
Pada pra-kondisi user „melihat grafik dana data row‟, user dapat melakukan pengunduhan pada menu unduh yang ada di pojok grafik.
3.6.2.2 Use case Diagram Sistem Usulan
Gambar 3.4 Use Case Diagram Sistem Usulan
61
Gambar diagram use case di atas merepresentasikan sistem usulan yang penulis ajukan untuk pengembangan sistem informasi kelautan. Use case di atas menggambarkan sebuah actor yaitu User yang memiliki wewenang dalam menjalankan aplikasi. Skenario Use Case Diagram Sistem Usulan
Berikut penulis akan menjelaskan skenario-skenario berdasarkan gambar use case diagram sistem usulan di atas yaitu sebagai berikut: Table 3.4 Melihat grafik dan row data
Nama Use Case
Melihat grafik dan row data
Aktor
User
Deskripsi
User dapat melihat grafik dan row data
Pra Kondisi
Menu buoy Rama
Skenario
Pada
form
pilih
informasi,
user
memilih
koordinat/database buoy yang ingin ditampilkan.
System akan menyajikan menu navigator informasi, grafik data beserta data row sesuai informasi yang dipilih user
Pasca Kondisi
User dapat melihat grafik dan data row pada halaman buoy rama
Table 3.5 Skenario Use Case Menampilkan grafik dengan range penanggalan
Nama Use Case
Menampilkan grafik dengan range penanggalan
Aktor
User
Deskripsi
User dapat menyajikan grafik sesuai range penanggalan.
Pra Kondisi
System sudah menyajikan grafik dari form informasi yang dipilih user.
Skenario
Pada grafik yang disajikan system, system menyertakan menu range penanggalan.
User memilih range penanggalan.
System akan menampilkan informasi grafik sesuai range penanggalan yang ditentukan oleh user.
Pasca Kondisi
User melihat hasil filter dari grafik yang disajikan system.
62
Table 3.6 Skenario Use Case Memperbesar Grafik
Nama Use Case
Memperbesar Grafik
Aktor
User
Deskripsi
User dapat berinteraksi dengan grafik yang disajikan system dengan cara memper besar ukuran grafik untuk memperoleh informasi yang lebih detail.
Pra Kondisi
System sudah menyajikan grafik dari form informasi yang dipilih user.
Skenario
User menyorot area yang ingin diperbesar pada grafik
System akan memperbesar grafik pada area yang disorot user
Pasca Kondisi
User memperoleh informasi lebih detail pada grafik.
Table 3.7 Skenario Use Case Mengunduh grafik
Nama Use Case
Mengunduh Grafik
Aktor
User
Deskripsi
User dapat mengunduh grafik yang disajikan oleh system dalam bentuk jpeg, png, csv dan xls.
Pra Kondisi
System sudah menyajikan grafik dari form informasi yang dipilih user.
Skenario
Saat sistem menyajikan grafik, system telah menyertakan tombol unduh dipojok kanan atas grafik.
User menekan tombol unduh
System menampilkan pilihan unduhan
User memilih pilihan unduhan yang diinginkan user.
System akan mengunduh grafik secara otomatis dan menyimpannya pada komputer user.
Pasca Kondisi
Hasil unduhan tersimpan pada komputer user.
63
Table 3.8 Skenario Use Case Mem-filter Data Row
Nama Use Case
Mem-filter Data Row
Aktor
User
Deskripsi
User dapat melakukan filter terhadap data row yang disajikan oleh sistem
Pra Kondisi
System sudah menyajikan grafik data row dari form informasi yang dimasukan user.
Skenario
Saat sistem menyajikan grafik, sistem juga menyajikan data row di bagian bawah grafik.
User melakukan filter pada data row, seperti mengambil data berdasarkan tahun tertentu
Pasca Kondisi
System akan menampilkan hasil filter yang dipilih user
User dapat melihat data row hasil filter.
Table 3.9 Skenario Use Case Mengirim Email
Nama Use Case
Mengirim Email
Aktor
User
Deskripsi
User dapat melakukan pengiriman email kepada Pusat Data Buoy Indonesia, untuk mendapatkan informasi lebih lanjut.
Pra Kondisi
Masuk ke menu Contact Us
Skenario
User masuk ke menu utama situs PDBI.
System akan menampilkan halaman utama PDBI.
Pada Menubar, user memilih menu Contact Us.
System akan menampilkan halaman Contact Us.
User mengisi data berupa nama, email dan isi pesan pada form „Hubungi Kami‟.
User menekan tombol „Send’
System akan menampilkan status pesan telah berhasil dikirim
Pasca Kondisi
User berhasil melakukan pengiriman email.
64
Table 3.10 Skenario Mengisi Buku Tamu
Nama Use Case
Mengisi Buku Tamu
Aktor
User
Deskripsi
User dapat mengisi buku tamu pada halam buoy rama
Pra Kondisi
Masuk ke halaman buoy rama
Skenario
User masuk ke menu utama situs PDBI.
System akan menampilkan halaman utama PDBI.
Pada Menubar, user memilih menu buoy Rama.
System akan menampilkan halaman buoy Rama.
User melakukan input buku tamu pada form buku tamu.
User menekan tombol „comment’
System akan menampilkan komentar yang dituliskan user di bagian bawah form.
Pasca Kondisi
User dapat melihat hasil tampilan dari komentar.
3.6.3 Activity Diagram
Diagram aktifitas menggambarkan berbagai alir aktifitas dalam sistem yang sedang dirancang dan urutan proses pada suatu sistem dari awal hingga akhir. Diagram aktifitas juga dapat menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi. Berikut ini adalah diagram aktifitas usulan dalam proses penyajian informasi kelautan :
65
1. Diagram Aktivitas Unduh Grafik, Menyajikan Grafik dan Data Row Diagram ini menggambarkan alur aktivitas user melakukan unduh grafik, menampilkan grafik dan data raw.
Gambar 3.5 Diagram Aktivitas 1 Table 3.11 Activity Diagram
Nama Activity
Unduh Grafik, Melihat Grafik dan Data Row
Aktor
User
Keterangan
User memilih menu buoy rama, sistem akan menampilkan halaman buoy rama. Sistem akan menampilkan menu
66
navigasi informasi, data berbentuk grafik dan data raw serta menu unduh grafik. User memilih menu unduh dan sistem secara otomatis akan menyimpan hasil unduhan. User melakukan filter pada data raw. Kemudian sistem akan menampilkan data raw hasil filter yang ditentukan oleh user.
2. Diagram Aktivitas Melihat Menu Grafik Diagram diatas menggambarkan alur aktivitas user melakukan melihat menu grafik, unduh grafik, menampilkan grafik dengan combo box.
Gambar 3.6 Diagram Activity 2
67
Table 3.12 Activity Diagram Skenario Menu Grafik
Nama Activity
Membuka Menu Grafik, Pilih Combo Box, Unduh Grafik
Aktor
User
Keterangan
User memilih menu grafik, sistem akan menampilkan halaman grafik. Sistem akan menampilkan menu pilih combo box User memilih menu menu combo box lalu menekan tombol „tampilkan‟. Sistem
akan menampilkan
data grafik per bulan selama satu tahun. 3. Diagram Aktivitas Mengirim Email Diagram ini menggambarkan alur aktivitas user melakukan fungsi mengirim email.
Gambar 3.7 Diagram Activitas 3
68
Table 3.13 Activity Diagram Mengirim Email
Nama Activity
Activity Diagram Mengirim Email
Aktor
User
Keterangan
User membuka menu utama kemudian memilih menu contact us, lalu sistem akan menampilkan halaman contact us. User mengisi form „hubungi kami‟ kemudian menekan tombol „send’. System akan melakukan validasi terhadap data yang di input user. Jika data tidak sesuai, sistem akan mengirimkan pesan error kepada user. Jika data sesuai, sistem akan melakukan proses pengiriman email.
4. Diagram Aktivitas Mengisi Buku Tamu Diagram ini menggambarkan alur aktivitas user mengisi form Buku Tamu.
Gambar 3.8 Diagram Aktivitas 4
69
Table 3.14 Activity diagram Mengisi Buku Tamu
Nama Activity
Activity Diagram Mengisi Buku Tamu
Aktor
User
Keterangan
User membuka menu buku tamu. Sistem akan menampilkan halaman buku tamu. User mengisi form „Isi Buku Tamu kemudian menekan tombol „comment’. System
akan
melakukan validasi terhadap data yang di input user. Jika data tidak sesuai, sistem akan mengirimkan pesan error kepada user. Jika data sesuai, sistem akan menampilkan komentar user.
3.6.4 Sequence Diagram
Sequence Diagram menggambarkan kolaborasi dinamis antara sejumlah objek dan untuk menunjukkan rangkaian pesan yang dikirim antar objek juga interaksi antar objek. 3.6.4.1 Sequence Diagram Melihat Grafik dan Row Data
Diagram ini menggambarkan skenario dimana user dapat melihat grafik dan data row dengan memilih menu buoy rama pada menubar, seperti terlihat pada gambar dibawah ini :
Gambar 3.9 Diagram Sequence Melihat Grafik dan Data Raw
70
Dalam sequence diagram diatas, dijelaskan bahwa untuk melihat grafik dan row data user harus mengakses menu buoy rama kemudian sistem akan menampilkan halaman menu buoy rama. Selanjutnya user memilih informasi grafik apa yang ingin ditampilkan pada form pilih informasi.
3.6.4.2 Sequence Diagram Tampil Grafik dengan Range Penanggalan
Diagram ini menggambarkan skenario bagaimana user dapat melihat grafik sesuai range/penanggalan yang pilih oleh user. Seperti terlihat pada gambar dibawah ini :
Gambar 3.10 Diagram Sequence Tampil Grafik dengan filter
Dalam gambar diagram sequence diatas dijelaskan bahwa untuk melakukan range/penanggalan pada suatu grafik yang akan disajikan, user harus meng-input tanggal pada kolom start_date dan kolom end_date. Kemudian sistem akan menyajikan grafik sesuai range/penanggalan yang di-input-kan oleh user.
3.6.4.3 Sequence Diagram Memperbesar Grafik Diagram ini menggambarkan skenario dimana user dapat menyorot dan memperbesar area grafik yang diinginkan guna mendapatkan informasi/data yang lebih detail. Seperti telihat pada gambar dibawah ini :
71
Gambar 3.11 Diagram Sequence Memperbesar Grafik
Dalam gambar diagram sequence diatas dijelaskan bahwa untuk memperbesar grafik, user harus menyorot area pada grafik yang ingin perbesar. Kemudian sistem akan memperbesar area grafik yang disorot user.
3.6.4.4 Sequence Diagram Mengunduh Grafik
Diagram ini menggambarkan skenario dimana user dapat mengunduh grafik pada menu unduh. Seperti yang terlihat pada gambar berikut ini :
Gambar 3.12 Diagram Sequence Mengunduh Grafik
72
Dalam gambar diagram sequence diatas dijelaskan bawah user dapat mengunduh grafik dengan menekan tombol menu unduh pada pojok kanan atas grafik. Hasil unduhan dapat berupa gambar berformat JPEG, PNG maupun berupa data mentah berfotmat CSV dan XLS.
3.6.4.5 Sequence Diagram Mem-filter Data Raw
Diagram ini menggambarkan skenario dimana user dapat menyaring informasi apa saja yang ingin ditampilkan user pada data raw.
Seperti terlihat pada gambar
dibawah ini :
Gambar 3.13 Diagram Sequence Mem-filter Data Raw
Dalam gambar diagram sequence diatas dijelaskan bahwa user dapat menyaring/filter data/informasi pada data raw sesuai pilihan yang sudah tersedia. Kemudian sistem akan menampilkan hasil filter yang dipilih user.
3.6.4.6 Sequence Diagram Mengirim Email Diagram ini menggambarkan skenario dimana user dapat mengirimkan email kepada instansi bersangkutan dengan mengisi form hubungi kami pada menu contact us. Seperti terlihat pada gambar dibawah ini :
73
Gambar 3.14 Diagram Sequence Mengirim Email
Dalam gambar diagram sequence diatas dijelaskan bahwa user melakukan pengisian data Nama, Email dan Pesan pada form hubungi kami. Kemudian sistem akan melakukan proses pengecekan/validasi. Apabila data valid, sistem akan mengirimkan pesan sukses dikirim kepada user, sedangkan apabila data invalid, sistem akan mengirimkan pesan error kepada user.
3.6.4.7 Sequence Diagram Mengisi Buku Tamu Diagram ini menggambarkan skenario bagaimana interaksi antara pengguna dan sistem untuk melakukan pengisian buku tamu. Seperti terlihat pada gambar dibawah ini :
74
Gambar 3.15 Diagram Sequence Buku Tamu
Dalam gambar diagram sequence diatas dijelaskan bahwa untuk meng-input komentar, user memilih menu buoy rama dan melakukan pengisian data Nama, Email dan Komentar
pada form buku tamu. Kemudian sistem akan melakukan proses
pengecekan/validasi data. Apabila data valid, sistem akan menampilkan hasil komentar yang di input user . sedangkan apabila data invalid, sistem akan mengirimkan pesan error kepada user.
3.7
Perancangan Basis Data
Perancangan Basis Data bertujuan untuk memperoleh data yang efisiensi dalam penyimpanan, cepat dalam pengaksesan dan mudah untuk memanipulasi data serta bebas dari redudansi data. Dalam kasus yang penulis teliti, setiap database mewakili satu perangkat buoy Rama yang di dalamnya terdiri atas beberapa table yang berisi data mentah. Berikut penjelasan table-table yang penulis gunakan dalam penelitian tugas akhir ini: Terlampir
75
3.8
Perancangan Antarmuka 1. Tampilan Halaman Utama
Gambar 3.16 Antarmuka Halaman Utama
Desain tampilan dari halaman pertama ini adalah tampilan halaman utama/home. Pada halaman ini terdapat menu utama yang terdiri dari menu home, about, buoy rama, grafik dan contact. Setiap menu mempunyai fungsinya masing-masing.
76
2. Tampilan Halaman About
Gambar 3.17 Antarmuka Halaman About
Tampilan desain mock-up diatas menggambarkan halaman menu about. Jika pengunjung mengaktifkan menu about, halaman menu about akan ditampilkan oleh system. Halaman ini berisi informasi dasar mengenai perusahaan dan data buoy.
77
3. Tampilan Halaman Buoy Rama
Gambar 3.18 Antarmuka Halaman Buoy RAMA
Tampilan desain mock-up diatas menggambarkan halaman menu buoy rama. Halaman ini berisi seluruh informasi yang dibutuhkan oleh ilmuwan dengan menyajikan data berbentuk grafik dan raw data. Terdapat fungsi tambahan yakni fungsi komentar di bagian bawah grafik.
78
4. Tampilan Halaman Grafik
Gambar 3.19 Antarmuka Halaman Grafik
Tampilan mock-up berikut ini menampilkan halaman menu grafik. Halaman ini berisi informasi mengenai info grafik data buoy yang disajikan berdasarkan tahun dan jenis informasi.
79
5. Tampilan Halaman Buku Tamu
Gambar 3.20 Antarmuka Halaman Buku Tamu
Tampilan mock-up berikut ini menampilkan halaman menu buku tamu. Halaman ini berisi form buku tamu dimana user dapat memberikan saran kritik yang membangun bagi perusahaan bppt.
80
6. Tampilan Halaman Kontak
Gambar 3.21 Antarmuka Halaman Contact
Tampilan mock-up diatas menggambarkan halaman menu contact, halaman ini berisi informasi mengenai alamat perusahaan, letak perusahaan serta fungsi hubungi kami. Fungsi form hubungi kami ini akan membantu ilmuwan dari luar BPPT yang ingin mendapatkan data keseluruhan buoy rama dengan mengirimkan pengajuan langsung melalui email.