BAB 3 IMPLEMENTASI VISUALISASI INFORMASI PASUT BERBASIS WEB
Pada bab ini akan diuraikan tahapan yang dilakukan dalam implementasi visualisasi informasi pasut berbasis web, yang terdiri dari: a. Identifikasi kebutuhan (dibahas pada sub bab 3.1). b. Perancangan basis data (dibahas pada sub bab 3.2). c. Pembangunan basis data (dibahas pada sub bab 3.3). d. Implementasi antarmuka berbasis web (dibahas pada sub bab 3.4). e. Uji coba aplikasi web (dibahas pada sub bab 3.5).
3.1
Identifikasi Kebutuhan Identifikasi kebutuhan merupakan dasar dari keberhasilan implementasi SIG
(Prahasta, 2002), dimana identifikasi ini bertujuan untuk mengakomodir permintaan akan kebutuhan dari pihak pengguna. Pengguna disini yaitu orang yang memerlukan informasi pasut untuk keperluan navigasi (keselamatan pelayaran) dan kerekayasaan laut. Analisis kebutuhan dalam tugas akhir ini diperoleh dengan cara studi literatur baik buku, artikel maupun internet..
3.1.1
Kebutuhan Informasi Untuk mendapatkan gambaran mengenai informasi data pasut bisa didapatkan
dari berbagai sumber yang ada. Selama ini, untuk kebutuhan navigasi (keselamatan pelayaran) digunakan buku daftar pasut yang dikeluarkan oleh JANHIDROS AL dan BAKOSURTANAL. Secara umum kebutuhan informasi data pasut untuk keperluan navigasi (keselamatan pelayaran) digunakan untuk mengetahui tinggi pasut saat tertentu di atas Chart Datum dan untuk keperluan kerekayasaan digunakan dalam pendefinisian koreksi pasut untuk pembuatan peta batimetrik atau peta laut. Informasi pasut yang dibutuhkan biasanya adalah muka air tertinggi, muka air terendah dan tinggi pasut dalam sehari (lihat sub bab 2.1.4).
22
3.1.2
Kebutuhan Pengguna Kebutuhan pengguna yang diperoleh melalui identifikasi kebutuhan adalah
sebagai berikut: a. Menampilkan informasi mengenai pasut seperti definisi, jenis atau karakteristik serta manfaat dari informasi pasut. b. Menampilkan informasi stasiun pasut seperti lokasi geografis stasiun pasut, denah atau sketsa stasiun pasut, peta rupa bumi stasiun pasut, foto stasiun pasut, dan jenis alat yang digunakan. c. Menampilkan informasi komponen harmonik pasut. d. Menampilkan tinggi prediksi pasut harian beserta grafiknya yang dapat digunakan untuk berbagai kegiatan kelautan.
3.2
Perancangan Basis Data Prahasta (2002) menjelaskan bahwa basis data merupakan komponen terpenting
sistem informasi geografis (SIG) dan perancangan basis data yang baik akan menyebabkan basis data dapat melayani kebutuhan-kebutuhan aplikasi-aplikasinya dengan baik. Pada tugas akhir ini desain basis data dibagi dalam 3 tahapan sebagai berikut [Syafi’i, 2000]: a. Desain konseptual : Membangun representasi konseptual dari basis data, dimana terdiri atas identifikasi entitas. b. Desain logis
: Menterjemahkan representasi konseptual ke dalam struktur logis
dari basis data, dimana terdiri atas desain antar hubungan. c. Desain fisik
: Menampilkan bagaimana struktur logis menjadi implementasi
secara fisik dalam bentuk tabel di sistem manajemen basis data.
3.2.1
Desain Konseptual Tujuan dari desain konseptual adalah mendapatkan pandangan dari sisi pengguna
mengenai sistem basis data yang akan dibangun. Tahap ini sangat penting pada proses desain basis data karena pada tahap ini harus dipahami dengan benar aplikasi yang akan dibangun.
23
Pada tahap ini dilakukan identifikasi terhadap semua kemungkinan entitas-entitas yang terkait dengan permasalahan, entitas-entitas yang terkait dengan permasalahan ini adalah sebagai berikut: 1. Stasiun pasut 2. Alat pengamatan pasut 3. Data pengamatan 4. Komponen harmonik pasut 5. Prediksi pasut 3.2.2
Desain Logis Tujuan dari desain logis adalah menyediakan fokus bagi perancang basis data.
Desain logis membahas kebutuhan-kebutuhan yang diberikan oleh desain konseptual. Model penyimpanan basis data yang digunakan dalam pembangunan web ini adalah model relasional, dimana basis data dipilih kedalam beberapa tabel yang saling berhubungan (relationship). Hal ini penting untuk diketahui pengguna sebab ketika pengguna sedang melakukan transaksi atau updating data maka hal ini akan berpengaruh pada tabel-tabel yang berelasi dengan tabel aktif yang sedang di-update. Pada tahap ini akan dihasilkan diagram ER (Entity-Relationship) dari basis data yang akan dibangun. Secara ringkas, terdapat lima entitas di dalam pembangunan basis data, dengan penjabaran sebagai berikut: 1. Hubungan entitas stasiun pasut dengan entitas alat •
Diagram ER
Enterprise Rules Setiap stasiun pasut pasti memiliki alat dan setiap alat pasti dimiliki oleh setiap stasiun pasut, sehingga hubungan kedua entitas ini adalah obligatory dengan obligatory. Setiap stasiun pasut dapat memiliki lebih dari satu alat dan setiap alat hanya terletak pada satu stasiun pasut.
24
2. Hubungan entitas alat dengan entitas data pengamatan •
Diagram ER
•
Enterprise Rules Setiap alat pasti menghasilkan data pengamatan, dan setiap data pengamatan pasti dihasilkan oleh setiap alat, sehingga hubungan kedua entitas ini adalah obligatory dengan obligatory. Setiap alat dapat menghasilkan lebih dari satu data pengamatan dan setiap data pengamatan hanya dihasilkan oleh satu alat.
3. Hubungan entitas data pengamatan dengan komponen harmonik •
Diagram ER
•
Enterprise Rules Setiap data pengamatan pasti menghasilkan komponen harmonik, dan setiap komponen harmonik pasti dihasilkan dari data pengamatan, sehingga hubungan kedua entitas ini adalah obligatory dengan obligatory. Setiap data pengamatan dapat menghasilkan lebih dari satu komponen harmonik dan setiap komponen harmonik dapat dihasilkan dari beberapa data pengamatan.
4. Hubungan entitas komponen harmonik dengan entitas prediksi pasut •
Diagram ER
•
Enterprise Rules Setiap komponen harmonik pasti menghasilkan prediksi pasut, dan setiap prediksi pasut pasti dihasilkan oleh komponen harmonik, sehingga hubungan kedua entitas ini adalah obligatory dengan obligatory.
25
Setiap komponen harmonik dapat menghasilkan lebih dari satu prediksi pasut, dan setiap prediksi pasut hanya dihasilkan oleh satu komponen harmonik.
Keterangan :
Setelah masing-masing hubungan antar tabel entitas terdefinisi, maka akan diperoleh diagram ER yang lengkap dengan derajat hubungannya. Visualisasi diagram ER dapat dilihat pada gambar 3.1 berikut :
Gambar 3.1 Diagram ER
3.2.3
Desain Fisik Desain fisik menentukan implementasi dari desain logis. Tahap ini merupakan
spesifikasi yang membantu pembuatan kode program. Pada tahap ini perancang menentukan komponen atau atribut yang diperlukan untuk memenuhi kebutuhan pengguna yang didapatkan dari menganalisa masalah. Desain fisik telah spesifik terhadap DBMS yang digunakan mencakup penamaan file, penentuan tipe data atribut dan
26
penentuan lebar atau ukuran data atribut tersebut. Desain fisik dapat berubah jika selama pengembangan terdapat informasi baru yang masuk. Tahap fisik memperlihatkan tabel sekeleton dengan atribut yang sesuai. Dari tahapan hubungan antar entitas yang telah ditentukan, maka dihasilkan tabel skeleton sebagai berikut: 1. Stasiun_Pasut
(Id_SP, Nama_SP, Lintang, Bujur, Propinsi, Ibu_Kota,
Zona_Waktu, Akuisisi_Data, Titik_Ikat_Pasut, Denah, Peta_Rupa_Bumi, Foto) 2. Alat
(Id_Alat,
Nama_Alat,
Tipe_Alat,
Selang_Waktu_Rekam,
Transfer_Via_Satelit, Data_ke_Komputer, Id_SP) 3. Data_Pengamatan (Id_Data_Pengamatan, Tahun, Bulan, Tanggal, Jam , Tinggi_Pasut, Id_Alat) 4. Data_Peng_Komp_Har (Id_Data_Pengamatan, Id_Komponen_Harmonik) 5. Komponen_Harmonik (Id_Komponen_Harmonik, Tahun, A_K1, A_O1, A_P1, A_M2, A_S2, Ampl_N2, A_K2, A_M4, A_MS4, G_K1, G_O1, G_P1, G_M2, G_S2, G_N2, G_K2, G_M4, G_MS4) 6. Prediksi_Pasut (Id_Prediksi_Pasut, Tahun, Bulan, Tangal, Jam, Prediksi_Pasut, Id_Komponen_Harmonik)
27
Bentuk implementasi ke dalam tabel-tabel basis data adalah sebagai berikut: Tabel 3.1 Struktur data tabel hasil konversi : (a) tabel stasiun pasut, (b) tabel alat, (c) tabel data pengamatan, (d) tabel periode pengamatan, (e) tabel komponen harmonik, (f) prediksi pasut No.
Nama Field
Tipe Data
1
Id_SP
Varchar (30)
2
Nama_SP
3
Nama Field
Tipe Data
1
Id_Alat
Varchar (20)
Varchar (50)
2
Nama_Alat
Varchar (20)
Lintang
Double
3
Tipe_Alat
Varchar (10)
4
Bujur
Double
4
Selang_Wkt_Rekam
Varchar (10)
5
Propinsi
Varchar (25)
5
Transfer_Via_Satelit
Varchar (5)
6
Ibu_Kota
Varchar (20)
6
Data_Ke_Komp.
Varchar (5)
7
Zona_Waktu
Varchar (20)
7
Id_SP
Varchar (30)
8
Akuisisi_Data
Varchar (5)
9
Titik_Ikat_Pasut
Varchar (15)
10
Denah
Varchar (50)
11
Peta Rupa Bumi
Varchar (50)
12
Foto
Varchar (50)
(b)
No. 1 2
(a) No.
No.
Nama Field Id_Komponen_Harmonik Tahun
Tipe Data Varchar (20) Int
Nama Field
Tipe Data
3
A_K1
Float
1
Id_Data_Pengamatan
Varchar (15)
4
A_O1
Float
2
Waktu
Date Time
5
A_P1
Float
3
Tinggi_Pasut
Float
6
A_M2
Float
4
Id_Alat
Varchar (20)
7
A_S2
Float
8
A_N2
Float
9
A_K2
Float
10
A_M4
Float
(c) No.
Nama Field
Tipe Data
11
A_MS4
Float
1
Id_Data_Pengamatan
Varchar (20)
12
G_K1
Float
2
Id_Komponen_Harmonik
Varchar (20)
13
G_O1
Float
14
G_P1
Float
15
G_M2
Float
16
G_S2
Float
(d) No.
Nama Field
Tipe Data
17
G_N2
Float
1
Id_Prediksi_Pasut
Varchar (20)
18
G_K2
Float
2
Waktu
Date Time
19
G_M4
Float
3
Prediksi_Pasut
Float
20
G_MS4
Float
4
Id_Komponen_Harmonik
Varchar (30) (e)
(f)
28
3.3
Pembangunan Basis Data Hasil perancangan basis data yang telah disusun, kemudian dibuat dalam sebuah
sistem manajemen basis data dengan menggunakan perangkat lunak MySQL versi 5.0.21. Proses pembangunan basis data bertujuan untuk menghasilkan basis data informasi pasut, secara garis besar proses pembuatan basis data tersebut digambarkan pada gambar 3.2.
Gambar 3.2 Tahap Pembangunan Basis Data
3.3.1 Pengumpulan Data Data yang digunakan untuk tugas akhir ini terdiri dari: a. Data grafik yang terdiri dari: 1. Peta Indonesia dalam bentuk peta raster diperoleh dari BAKOSURTANAL. 2. Posisi stasiun pasut dalam sistem koordinat geodetik diperoleh dari buku daftar pasut JANHIDROS-AL. 3. Denah stasiun pasut dalam bentuk peta raster diperoleh dari BAKOSURTANAL. 4. Peta rupa bumi stasiun pasut dalam bentuk peta raster diperoleh dari BAKOSURTANAL. 5. Foto stasiun pasut dalam bentuk peta raster diperoleh dari BAKOSURTANAL. 29
b. Data atribut yang terdiri dari: 1. Data informasi dasar mengenai pasut diperoleh dengan cara studi literatur. 2. Data komponen harmonik pasut dan prediksi pasut diperoleh dari buku daftar pasut JANHIDROS AL.
3.3.2
Pemasukan Data Setelah data dikumpulkan, kemudian data yang diperlukan seperti informasi
lokasi geografis stasiun pasut, komponen harmonik pasut dan prediksi pasut yang diperoleh dari Buku Daftar Pasut JANHIDROS AL disimpan dalam bentuk digital menggunakan Microsoft Office Excel berekstensi.CSV.
3.3.3
Implementasi Basis Data Fisik Implementasi basis data fisik menggunakan MySQL ini meliputi pembuatan basis
data (create database), pembuatan tabel (create table), dan pemasukan data (insert data). Basis data yang dibuat bernama ta_mila dan terdiri dari 6 tabel yaitu tabel stasiun_ pasut, alat, data_pengamatan, data_peng_komp_har, komponen_harmonik, dan prediksi_pasut. MySQL merupakan perangkat lunak berbasis teks, maka semua perintah pada MySQL seperti pembuatan tabel dapat dilakukan dengan cara menuliskan langsung pada command prompt dengan menggunakan bahasa SQL Data Definition Language (DDL). Perintah-perintah ini pada dasarnya merupakan structured query language (sql) yang telah disesuaikan dengan MySQL. Daftar DDL dapat dilihat pada lampiran. Untuk pemasukan data yang telah dibuat di Microsoft Office Excel berekstensi.CSV yaitu dengan cara menuliskan alamat http://localhost/pasut/import.php/ maka secara otomatis data terbentuk pada DBMS MySQL.
3.4
Implementasi Antarmuka Berbasis Web Proses ini terdiri dari beberapa tahapan dimulai dari lingkungan implementasi,
pembuatan desain tampilan sampai dengan tahap akhir implementasi tampilan sistem informasi.
30
3.4.1
Lingkungan Implementasi
Dalam tugas akhir ini, perangkat lunak yang digunakan untuk membangun aplikasi ini adalah sebagai berikut: a. Paket XAMPP (Linux, Apache, MySQL, PHP, PEAR) for windows versi 1.5.3a yang terdiri dari: 1. Apache 2.2.2 2. MySQL 5.0.21 3. XAMPP Control Version 2.3 4. PHP 5.1.4 + PHP 4.4.2-pl1 5. phpMyAdmin 2.8.1 b. Dreamweaver MX c. Mozilla Firefox sebagai web browser . d. Adobe.Photoshop.CS3 untuk membuat desain tampilan web. e. CorelDRAW Graphics Suite X3 untuk membuat lokasi stasiun pasut pada peta indonesia. Sedangkan perangkat keras yang digunakan untuk membangun aplikasi ini adalah sebagai berikut: a. Processor : Intel Pentium Dual-Core 1.7 GHz b. Hardisk
: 100 Gb
c. Monitor
: BenQ 13.3"
d. RAM
: 1 Gb
e. VGA Card : 256 Mb
3.4.2
Pembuatan Desain Tampilan Penyusunan desain tampilan disesuaikan dengan apa yang dibutuhkan pada tahap
identifikasi kebutuhan. Desain tampilan untuk purwarupa sistem informasi ini terbagi atas 5 halaman mayor dan 5 halaman minor, yaitu : 1. Desain Halaman Utama Halaman ini merupakan halaman awal yang merupakan tampilan awal (cover) dari Sistem Informasi Pasut Indonesia.
31
Gambar 3.3 Desain Halaman Utama Layer 1 : Judul halaman Layer 2 : Link tiap halaman Layer 3 : Isi halaman utama Layer 4 : Logo institusi dan nama pembuat situs Layer 5 : Nama institusi ruang lingkup penelitian 2. Desain Halaman Informasi Dasar Mengenai Pasut Halaman ini merupakan halaman yang berisi tentang informasi dasar mengenai pasut seperti definisi, tipe/jenis serta manfaat dari informasi pasut tersebut. Layer 1 Layer 2
Layer 43 Layer
Layer 3
Layer 5
Gambar 3.4 Desain Halaman Informasi Dasar Mengenai Pasut Layer 1 : Judul halaman Layer 2 : Link tiap halaman Layer 3 : Deskripsi mengenai pasut Layer 4 : Logo institusi dan nama pembuat situs Layer 5 : Nama institusi ruang lingkup penelitian
32
3. Desain Halaman Peta Stasiun Pasut Halaman ini merupakan halaman yang berisi tentang Peta Stasiun Pasut Indonesia serta link lokasi stasiun pasut wilayah tertentu. Layer 1 Layer 2
Layer 3
Layer 4
Layer 5
Gambar 3.5 Desain Halaman Peta Stasiun Pusat Layer 1 : Judul halaman Layer 2 : Link tiap halaman Layer 3 : Peta stasiun pasut beserta link stasiun pasut wilayah tertentu Layer 4 : Fungsi keterdekatan lokasi stasiun pasut Layer 5 : Nama institusi ruang lingkup penelitian a. Desain Halaman Informasi Stasiun Pasut Halaman ini merupakan halaman yang berisi deskripsi stasiun pasut wilayah tertentu. Layer 1 Layer 2
Layer 3
Layer 3
Layer 4 Layer 5
Gambar 3.6 Desain Halaman Informasi Stasiun Pusat Layer 1 : Judul halaman Layer 2 : Link tiap halaman Layer 3 : Deskripsi stasiun pasut wilayah tertentu 33
Layer 4 : Link denah stasiun pasut Layer 5 : Nama institusi ruang lingkup penelitian b. Desain Halaman Denah atau Sketsa Stasiun Pasut Halaman ini merupakan halaman yang berisi sketsa lokasi stasiun pasut wilayah tertentu. Layer 1 Layer 2
Layer 3
Layer 3
Layer 4
Layer 5 Layer 6
Gambar 3.7 Desain Halaman Denah atau Sketsa Stasiun Pusat Layer 1 : Judul halaman Layer 2 : Link tiap halaman Layer 3 : Sketsa stasiun pasut wilayah tertentu Layer 4 : Link informasi stasiun pasut Layer 5 : Link peta rupa bumi stasiun pasut Layer 6 : Nama institusi ruang lingkup penelitian c. Desain Halaman Peta Rupa Bumi Stasiun Pasut Halaman ini merupakan halaman yang berisi peta rupa bumi stasiun pasut wilayah tertentu. Layer 1 Layer 2
Layer 3
Layer 3
Layer 4
Layer 5 Layer 6
Gambar 3.8 Desain Halaman Peta Rupa Bumi Stasiun Pasut 34
Layer 1 : Judul halaman Layer 2 : Link tiap halaman Layer 3 : Peta rupa bumi stasiun pasut wilayah tertentu Layer 4 : Link denah atau sketsa stasiun pasut Layer 5 : Link foto stasiun pasut Layer 6 : Nama institusi ruang lingkup penelitian d. Desain Halaman Foto Stasiun Pasut Halaman ini merupakan halaman yang berisi foto stasiun pasut wilayah tertentu.
Layer 1 Layer 2
Layer 3
Layer 3
Layer 4 Layer 5
Gambar 3.9 Desain Halaman Foto Stasiun Pusat Layer 1 : Judul halaman Layer 2 : Link tiap halaman Layer 3 : Foto stasiun pasut wilayah tertentu Layer 4 : Link peta rupa bumi stasiun pasut Layer 5 : Nama institusi ruang lingkup penelitian 4. Desain Halaman Komponen Harmonik Pasut Halaman ini merupakan halaman yang berisi komponen harmonik pasut wilayah tertentu.
35
Layer 1 Layer 2
Layer 3
Layer 4 Layer 5 Layer 6 Layer 7
Gambar 3.10 Desain Halaman Komponen Harmonik Pasut Layer 1 : Judul halaman Layer 2 : Link tiap halaman Layer 3 : Deskripsi tentang komponen harmonik pasut Layer 4 : Link stasiun pasut wilayah tertentu dan tahun terpilih Layer 5 : Link OK Layer 6 : Komponen harmonik pasut wilayah terpilih dan jenis pasut Layer 7 : Nama institusi ruang lingkup penelitian 5. Desain Halaman Prediksi Pasut Halaman ini merupakan halaman yang berisi deskripsi prediksi pasut dan pencarian prediksi pasut harian wilayah tertentu. Layer 1 Layer 2
Layer 3
Layer 4 Layer 5 Layer 6
Gambar 3.11 Desain Halaman Prediksi Pasut Layer 1 : Judul halaman Layer 2 : Link tiap halaman Layer 3 : Deskripsi tentang prediksi pasut Layer 4 : Link stasiun pasut wilayah tertentu, tahun, bulan, dan tanggal prediksi pasut 36
Layer 5 : Link OK Layer 6 : Nama institusi ruang lingkup penelitian a. Desain Halaman Pencarian Prediksi Pasut Harian Halaman ini merupakan halaman yang berisi tinggi prediksi pasut harian wilayah tertentu beserta grafiknya. Layer 1 Layer 2
Layer 3 Layer 5 Layer 4
Layer 6
Gambar 3.12 Desain Halaman Pencarian Prediksi Pasut Harian Layer 1 : Judul halaman Layer 2 : Link tiap halaman Layer 3 : Stasiun pasut wilayah tertentu, tanggal prediksi pasut, periode data pengamatan, air tertinggi, air terendah dan tinggi air rata-rata Layer 4 : Grafik prediksi pasut harian Layer 5 : Tinggi prediksi pasut harian perjam Layer 6 : Nama institusi ruang lingkup penelitian
37
3.4.3
Hasil Implementasi Tampilan Sub bab hasil implementasi tampilan akan memperlihatkan contoh-contoh hasil
implementasi tampilan. 1. Halaman Utama
Gambar 3.13 Halaman Utama 2. Halaman Informasi Dasar Mengenai Pasut
Gambar 3.14 Halaman Informasi Dasar Mengenai Pasut
38
3. Halaman Peta Stasiun Pasut
Gambar 3.15 Halaman Peta Stasiun Pasut a. Halaman Informasi Stasiun Pasut
Gambar 3.16 Halaman Informasi Stasiun Pasut
39
b. Halaman Denah atau Sketsa Stasiun Pasut
Gambar 3.17 Halaman Denah atau Sketsa Stasiun Pasut c. Halaman Peta Rupa Bumi Stasiun Pasut
Gambar 3.18 Halaman Peta Rupa Bumi Stasiun Pasut 40
d. Halaman Foto Stasiun Pasut
Gambar 3.19 Halaman Foto Stasiun Pasut 4. Halaman Komponen Harmonik Pasut
Gambar 3.20 Halaman Komponen Harmonik Pasut
41
5. Halaman Prediksi Pasut
Gambar 3.21 Halaman Prediksi Pasut a. Halaman Pencarian Prediksi Pasut Harian
Gambar 3.22 Halaman Pencarian Prediksi Pasut Harian
42
3.5
Uji Coba Aplikasi Web Proses uji coba purwarupa aplikasi web sistem informasi pasut dilakukan untuk
dapat mengetahui kekurangan ataupun kesalahan dari purwarupa yang telah dibuat. Untuk pengujian aplikasi web dilakukan dengan dua macam cara, yaitu: a.
Cara pertama dengan melakukan pengujian secara lokal yakni pengaksesan purwarupa aplikasi pada komputer server dari komputer server itu sendiri, dengan alamat http://localhost/pasut/.
b.
Sedangkan cara kedua dengan melakukan pengujian secara non-lokal yakni pengaksesan purwarupa aplikasi pada komputer server dengan menggunakan komputer pengguna yang terpisah dari komputer server dengan alamat http://167.205.98.150/pasut/. Proses uji coba jalannya program berkaitan dengan stabilitas dari server yang telah
digunakan dalam aplikasi sistem ini dan berjalannya perangkat lunak yang digunakan. Parameter berhasilnya pembangunan purwarupa aplikasi web ini dapat dilihat dari berjalannya seluruh purwarupa sistem informasi dan juga stabilitas dari purwarupa sistem informasi.
43
