PERANCANGAN SISTEM INFORMASI PREDIKSI PASANG SURUT BERBASIS ANDROID DI PUSAT RISET KELAUTAN

Pasang surut air lautmerupakan parameter yang sangat penting bagi navigasi di pelabuhan, PusatRiset Kelautan, Marine & Coastal Data Laboratory (MCDL) membuat prediksi pasang surut di 39 pelabuhan seluruh indonesia. Penelitian ini bertujuan menghasilkan sistem informasi prediksi pasang surut berbasis android dengan menggunakan bahasa pemograman Java, Google Maps Api sebagai basemapnya dan data prediksi pasang surut yang dihasilkan oleh MCDL. Informasi yang ditampilkan dalam bentuk grafik dan data tabel untuk 14 hari kedepan (2 minggu), dengan resolusi temporal per jam dengan pemuktahiran (update) informasi per 14 hari. Dalam aplikasi android prediksi pasang surut (pasut) terdiri dari 4 menu yaitu Pelabuhan, Glosarium, About, Disclaimer. Menu Pelabuhan menampilan informasi nama pelabuhan perikanan. Menu Glosarium berisikan informasi daftar istilah pasang surut.MenuAbout berisikan informasi pemilik aplikasi yang bertujuan untuk pengguna dapat berinteraksi dengan pemilih aplikasi. Menu Disclaimer (penyanggahan) berisikan informasi bahwa informasi perkiraan pasut ini digunakan sebagai rujukan (referensi) ketinggian muka/paras air laut di lokasi Pelabuhan Perikanan untuk kepentingan operasi keluar danmasuknya kapal. Informasi tentang kedalaman batimetri dan kondisi dasar perairan lokasi tersebut tersebut tidak disediakan pada aplikasi ini. Info prakiraan pasut ini adalah hasil peramalan menggunakan 11 Komponen Harmonik, yakni 4 KomponenSemidiurnal (M2,S2,N2,K2), 4Komponen Diurnal (K1, O1, P1, Q1), dan 3 Komponen turunan dari Semidiurnal (MF, MM, M4). Seluruh komponen tersebut adalah turunan dari data satelit altimetry Topex/Poseidon (Egbert & Erofeeva, 2002). Peramalan dilakukan terhadap koordinat-koordinat Pelabuhan Perikanan yang dikelola oleh Direktorat Jenderal Perikanan Tangkap, Kementerian Kelautan dan Perikanan Republik Indonesia (DGCF, 2009). Sedangkan verifikasi hasil peramalan terhadap data pengukuran/observasi telah dilakukan dengan hasil cukup memuaskan (Ramdhan, 2011; Pranowo & Wirasantosa, 2011).

Gambar 1. Tahapan langkah dalam penelitian ini

A. Langkah Pembangunan Sistem Gambaran Umum Sistem Sistem informasi prediksi pasang surut dibangun dengan berbasiskanAndroid denganmenggunakan bahasa pemrograman Java dan dipadukan dengan database MySQL. Jenis pemrograman Java yang digunakan pada aplikasi ini adalah pemrograman berorientasi objek. PetamenggunakanGoogleMaps Api untuk mengetahui lokasi pelabuhan berada. Halaman padaMenuUtamameliputi beberapa bagian antara lain header,menu, content serta beberapamenu variasi tambahan gunamempercantik aplikasi.Header berisikan logo dan keterangan tentang nama aplikasi, menu berisikan 4 pilihan menu yaitu Pelabuhan, Glosarium,About, Disclaimer. B. Implementasi Perangkat Keras dan Perangkat Lunak 1. Perangkat Keras (Hardware) Perangkat keras yang digunakan untuk pembangunan aplikasi ini adalah sebuah komputer dengan spesifikasi: a. Processor Intel(R) Xeon(R) CPUE5620@2.4GHz 2.4 GHz b. Hardisk 1 TB 5400-rpm c. RAM 12 GB d. VGAIntel Graphics MediaAccelerator (GMA) HD 2. Perangkat Lunak (Software) Piranti lunak yang digunakan pada pembangunan aplikasi ini: a. Microsoft Windows 7 Professional Service Pack 1, 32 bit sebagai platform sistem operasi dalam pengembangan aplikasi b. XAMPP Web Server Version 1.7.3 sebagai webserver c. MySQL Database Version 5.1.41 sebagai DBMS d. phpMyAdmin Version 3.2.4 sebagai Database Manager. e. Android Studio coding (menuliskan source code Java forAndroid) f. Aplikasi Adobe Potoshop CS6 untuk mendesain tampilan aplikasi C. Hasil Implementasi Antarmuka 1. Splash Screen (Halaman Pembuka) Halaman yang akan ditampilkan pertama kali ketika user membuka aplikasi sistem informasi prediksi pasang surut. Halaman Splash Screen ini berisi elemen kontrol grafis yang terdiri dari jendela yang berisi gambar, logo, dan versi perangkat lunak saat ini. Layar splash biasanyamuncul saat program sedang diluncurkan. Kode Pada Halaman Splash Screen splashscreen.java Kode program ini berfungsi untuk manarik (load) informasi dari server dan akan otomatis masuk kehalamanmenu utama (home). Gambar 2. Halaman Splash Screen package com.p3sdlp.pasut; import java.util.ArrayList; import java.util.HashMap; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; import com.p3sdlp.pasut.pustaka.DBHelper; import com.p3sdlp.pasut.pustaka.ServiceHandler; import android.support.v7.app.ActionBarActivity; import android.util.Log; import android.view.View; import android.widget.LinearLayout; import android.app.ActivityManager; import android.app.ActivityManager. RunningService Info; import android.app.AlertDialog; import android.app.NotificationManager; import android.content.Context; import android.content.DialogInterface; import android.content.Intent; import android.os.AsyncTask; import android.os.Bundle; public class Splash extends ActionBarActivity { JSONArray pelabuhan = null; ArrayList<HashMap<String,String>> daftarpelabuhan; HashMap<String, Integer> nNotip = new HashMap<String, Integer>(); Intent notip = new Intent(Notification.class.getName()); Boolean anydata = false; LinearLayout loading; private static final String TAG_PELABUHAN = “pelabuhan”; private static final String TAG_ID = “id”; private static final String TAG_TITLE = “title”; private static final String TAG_LAT = “metakey”; private static final String TAG_LNG = “metadesc”; private static final String TAG_DB = “station”; private static final String TAG_UNREAD_NOTIF = “unreadnotification”; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_splash); loading = (LinearLayout)findViewById(R.id.LinearLayout3); loading.setVisibility(View.INVISIBLE); daftarpelabuhan = new ArrayList<HashMap<String, String>>(); newGetData().execute(); } private boolean isNotifServiceRunning(Class<?> serviceClass) { ActivityManager manager = ( A c t i v i t y M a n a g e r ) getSystemService(Context.ACTIVITY_SERVICE); for (RunningServiceInfo service : manager.getRunningServices(Integer.MAX_VALUE)) { if (serviceClass.getName().equals(service.service.getClassName())) { return true; } } return false; } public void prepareDB(Context c){ DBHelper db = new DBHelper(c); if(db.cekAda(TAG_DB)==0){ db.addNotif(TAG_DB, 0, 0); } if(!isNotifServiceRunning(Notification.class)){ startService(notip); } if(db.cekAda(TAG_UNREAD_NOTIF)==0){ db.addNotif(TAG_UNREAD_NOTIF, 0, 0); }else{ db.updateNotif(TAG_UNREAD_NOTIF, 0); } for(int i = 0; i < daftarpelabuhan.size(); i++){ if(db.cekAdaByID(Integer.valueOf(daftarpelabuhan.get(i).get(TAG_ID))) ==0){ db.addNotif(daftarpelabuhan.get(i).get(TAG_TITLE), 0, Integer.valueOf(daftarpelabuhan.get(i).get(TAG_ID))); }else{ db.updateNotifValue(daftarpelabuhan.get(i).get(TAG_TITLE), Integer.valueOf(daftarpelabuhan.get(i).get(TAG_ID))); } } NotificationManager notif = (NotificationManager)c.getSystemService(Context.NOTIFICATION_ SERVICE); notif.cancel(100); } private class GetData extends AsyncTask<Void, Void, Void> { @Override protected void onPreExecute() { super.onPreExecute(); loading.setVisibility(View.VISIBLE); } @Override protected Void doInBackground(Void... arg0) { ServiceHandler sh = new ServiceHandler(); String url = “http:// p 3 s d l p . l i t b a n g . k k p . g o . i d / i n c l u d e s / a p p daftarPelabuhan.php?f=list”; String jsonStr = sh.makeServiceCall(url, ServiceHandler.GET); if (jsonStr != null) { try { JSONObject jsonObj = new JSONObject(jsonStr); pelabuhan = jsonObj.getJSONArray(TAG_PELABUHAN); for (int i = 0; i < pelabuhan.length(); i++) { JSONObject c = pelabuhan.getJSONObject(i); String id = c.getString(TAG_ID); String title = c.getString(TAG_TITLE); String lat = c.getString(TAG_LAT); String lng = c.getString(TAG_LNG); HashMap<String, String> data = new HashMap<String, String>(); data.put(TAG_ID, id); data.put(TAG_TITLE, title); data.put(TAG_LAT, lat); data.put(TAG_LNG, lng); daftarpelabuhan.add(data); } anydata = true; } catch (JSONException e) { e.printStackTrace(); } } else { Log.e(“ServiceHandler”, “Couldn’t get any data from the url”); } return null; } @Override protected void onPostExecute(Void result) { super.onPostExecute(result); loading.setVisibility(View.INVISIBLE); if(anydata){ prepareDB(getApplicationContext()); Intent main = new Intent(Splash.this, MainActivity.class); main.putExtra(“station”, daftarpelabuhan); finish(); startActivity(main); }else{ n e w AlertDialog.Builder(Splash.this) .setMessage(“Sambungan data bermasalah.”) .setPositiveButton(“Coba lagi”, newDialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { dialog.cancel(); newGetData().execute(); } }) .setNegativeButton(“Keluar”, newDialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { dialog.cancel(); finish(); } }). setCancelable(false).show(); } } } } 2. HalamanMenu Utama Setelah menu Splash Screen yang akan ditampilkan menu utama (home), yang memberikan informasi lokasi pelabuhan yang ditampilkanmelalui peta interaktif dan terdapat 4menu dibawahnya yaitu Pelabuhan, Glosarium, About, Disclaimer. Menu utama dapat dilihat pada gambar 3 Gambar 3. Halaman Menu Utama (home) MainActivity.java kode file ini berfungsi menampilkan sebaran pelabuhan dalam peta package com.p3sdlp.pasut; import java.util.ArrayList; import java.util.HashMap; import com.google.android.gms.maps. CameraUpdateFactory; import com.google.android.gms.maps.GoogleMap; i m p o r t com.google.android.gms.maps.GoogleMap.OnInfo WindowClickListener; import com.google.android.gms.maps.GoogleMap.On MarkerClickListener; import com.google.android.gms.maps.OnMap ReadyCallback; import com.google.android.gms.maps.SupportMap Fragment; import com.google.android.gms.maps.model.Bitmap Descriptor Factory; import com.google.android.gms.maps.model.Camera Position; import com.google.android.gms.maps.model.LatLng; import com.google.android.gms.maps.model.Marker; i m p o r t com.google.android.gms.maps.model.MarkerOptions; import com.p3sdlp.pasut.pustaka.DBHelper; import android.annotation.SuppressLint; import android.content.Intent; import android.os.Bundle; import android.os.Handler; import android.support.v7.app.ActionBarActivity; import android.support.v7.widget.Toolbar; import android.view.View; import android.widget.ImageButton; @SuppressLint(“NewApi”) public class MainActivity extends ActionBarActivity implements O n M a p R e a d y C a l l b a c k , OnMarkerClickListener { private ToolbarmToolbar; private SupportMapFragmentmapFragment; privateMarkerOptions option; private static final String TAG_ID = “id”; private static final String TAG_TITLE = “title”; private static final String TAG_LAT = “metakey”; private static final String TAG_LNG = “metadesc”; private static final String TAG_DB = “station”; private static final String TAG_PPS = “PPS”; private static final String TAG_PPN = “PPN”; private static final String TAG_PPI = “PPI”; private static final String TAG_CPP = “CPP”; private static final String TAG_PPP = “PPP”; final Handler handler = new Handler(); Runnable refresh; privateArrayList<HashMap<String, String>> station; ImageButton lnkPelabuhan; Boolean adaYangBaru; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Intent intent = getIntent(); station = (ArrayList<HashMap<String, String>>) intent .getSerializableExtra(“station”); refresh = new Runnable() { @Override public void run() { cekPembaruan(); handler.postDelayed(this, 2000); handler.postDelayed(refresh, 2000); Integer iconnya = R.drawable.ic_launcher; lnkPelabuhan = (ImageButton) findViewById(R.id.btnPelabuhan); mToolbar = (Toolbar) findViewById(R.id.toolbar_actionbar); setSupportActionBar(mToolbar); getSupportActionBar().setDisplayShowHomeEnabled(true); getSupportActionBar().setIcon(iconnya); getSupportActionBar().setTitle(“ Prakiraan Pasut WPP RI”); mapFragment = ( S u p p o r t M a p F r a g m e n t ) getSupportFragmentManager() .findFragmentById(R.id.map); mapFragment.getMapAsync(this); } private void clearUpdate(String target){ DBHelper db = new DBHelper(this); if(db.cekNotif(target)==1){ db.updateNotif(target, 0); } } public void cekPembaruan() { DBHelper db = new DBHelper(this); adaYangBaru = false; for(int x=0; x<station.size(); x++){ i f (db.cekNotifByID(Integer.valueOf(station.get(x).get(TAG_ID))) == 1) { adaYangBaru = true; } } if (db.cekNotif(TAG_DB) == 1) { adaYangBaru = true; } if(adaYangBaru){ lnkPelabuhan.setImageResource(R.drawable.ic_place main_new); }else if(!adaYangBaru){ lnkPelabuhan.setImageResource(R.drawable.ic_place main); } } public void kePelabuhan(View v) { DBHelper db = new DBHelper(this); if(db.cekNotif(TAG_DB)==1){ db.updateNotif(TAG_DB, 0); }I ntent listpelabuhan = new Intent(getApplicationContext(), DaftarPelabuhan.class); listpelabuhan.putExtra(“station”, station); startActivity(listpelabuhan); } public void keGlosarium(View v) { Intent glosari = new Intent(getApplicationContext(), Glosarium.class); startActivity(glosari); } public void keAbout(View v) { Intent about = new Intent(getApplicationContext(), SinglePage.class); about.putExtra(“page”, “about”); startActivity(about); } public void keDisclaimer(View v) { Intent disclaimer = new Intent(getApplicationContext(), SinglePage.class); di s c la imer.p utEx t ra ( “ pa ge ” , “disclaimer”); startActivity(disclaimer); } public double fix2digit(String value) { double valDouble = Double.parseDouble(value) * 100; int valInt = (int) valDouble; valDouble = valInt / 100.0; return valDouble; } public boolean onMarkerClick(Markermarker) { Intent listtahun = new Intent(getApplicationContext(), DaftarTahun.class); listtahun.putExtra(“pelabuhan”, marker.getTitle().trim().replaceAll(“\\s+”, “”)); startActivity(listtahun); return true; } @Override public void onBackPressed() { handler.removeCallbacks(refresh); super.onBackPressed(); } @Override public void onMapReady(GoogleMapmap) { for (int obj = 0; obj < station.size(); obj++) { option = new MarkerOptions(); o p t i o n . p o s i t i o n ( n ew LatLng(fix2digit(station.get(obj).get(TAG_LAT)),fix2digit(station. get(obj).get(TAG_LNG)))) .title(station.get(obj).get(TAG_TITLE)) .snippet(“Tap here.”); if(station.get(obj).get(TAG_TITLE).substring(0, 3).equalsIgnoreCase(TAG_PPS)){ option.icon(BitmapDescriptorFactory.defaultMarker(Bitmap DescriptorFactory.HUE_BLUE)); } e l s e if(station.get(obj).get(TAG_TITLE).substring(0, 3).equalsIgnoreCase(TAG_PPN)){ option.icon(BitmapDescriptorFactory.defaultMarker(Bitmap DescriptorFactory.HUE_RED)); } e l s e if(station.get(obj).get(TAG_TITLE).substring(0, 3).equalsIgnoreCase(TAG_PPI)){ option.icon(BitmapDescriptorFactory.defaultMarker(Bitmap DescriptorFactory.HUE_GREEN)); } e l s e if(station.get(obj).get(TAG_TITLE).substring(0, 3).equalsIgnoreCase(TAG_CPP)){ option.icon(BitmapDescriptorFactory.defaultMarker(Bitmap DescriptorFactory.HUE_YELLOW)); } e l s e if(station.get(obj).get(TAG_TITLE).substring(0, 3).equalsIgnoreCase(TAG_PPP)){ option.icon(BitmapDescriptorFactory.defaultMarker(Bitmap DescriptorFactory.HUE_VIOLET)); }else{ option.icon(BitmapDescriptorFactory.defaultMarker(Bitmap DescriptorFactory.HUE_MAGENTA)); } map.addMarker(option); .title(station.get(obj).get(TAG_TITLE)).snippet(“Tap here.”)); } map. setOnIn f oWindowCl i c k L i s tener (new OnInfoWindowClickListener() { @Override public void onInfoWindowClick(Markermarker) { // TODO Autogeneratedmethod stub clearUpdate(marker.getTitle()); Intent listtahun = new Intent(getApplicationContext(), DaftarTahun.class); l i s t t a h u n . p u t E x t r a ( “ p e l a b u h a n ” , marker.getTitle().trim().replaceAll(“\\s+”, “”)); listtahun.putExtra(“from”, “main”); startActivity(listtahun); } }); CameraPosition cameraPosition = new CameraPosition.Builder() . t a r g e t ( n e w LatLng(-2.5, 118)).zoom(3).build(); map.moveCamera(CameraUpdateFactory.newCamera Position(cameraPosition)); } } 3. Halaman Pelabuhan Menampilkan menu Pelabuhan yang berisi informasi nama pelabuhan perikanan. Tampilan bisa di lihat pada gambar 3 di bawah ini. Gambar 3. Halaman Pelabuhan pelabuhan.java file ini berfungsi untuk meload data pelabuhan. package com.p3sdlp.pasut; public class Pelabuhan { public String title; public Boolean baru; public Pelabuhan(String title, Boolean baru) { this.title = title; this.baru = baru; } } 4. Halaman Prediksi Pasang Surut Halaman ini menampilkan informasi yang ditampilkan dalam bentuk grafik dan data tabel untuk 14 hari kedepan (2minggu), dengan resolusi temporal per jam dengan pemuktahiran (update) informasi per 14 hari pridiksi pasang surut bisa dilihat pada gambar 4. 5. HalamanGlosarium MenampilkanmenuGlosariumberisikan informasi daftar istilah pasang surut. Tampilan bisa di lihat pada gambar 5 di bawah ini: Gambar 4. Halaman Prediksi Pasang Surut. Gambar 5. Halaman Glosarium 6. HalamanAbout Menampilkan menu About berisikan informasi pemilik aplikasi yang bertujuan untuk pengguna dapat berinteraksi dengan pemilik aplikasi.Tampilan bisa di lihat pada gambar 6 di bawah ini. 7. Halaman Disclaimer Menampilkanmenu disclaimer berisikan informasi bahwa informasi pasut dihasilkan olehMCDL, segala penyalahgunaan penggunaan informasi yang ada dalam aplikasi ditanggung sendiri. Tampilan bisa di lihat pada gambar 7 di bawah ini: Gambar 7. Halaman Disclaimer D. Pengujian Sistem Setelah tahap implementasi hasil rancangan sistem dilakukan, maka tahap selanjutnya adalah melakukan pengujian terhadap sistem. Pengujian terhadap sistem dilakukaan dengan uji fungsionalitas menggunakanmetode Black-Box Test. Black-Box Test Black-Box Test yaitu pengujian yang berfokus pada persyaratan fungsional suatu piranti lunak dengan membuat himpunan kondisi input yang akanmelatih seluruh syarat-syarat fungsional system (Pressman, 2010). Tabel di bawah ini merupakan hasil uji coba yang telah dilakukan terhadap sistem, berupa deskripsi fungsi-fungsi darimenu pada aplikasi serta menunjukkan kesesuaian fungsi yang dihasilkan ketika dilakukan pengetesan. Dari hasil uji coba tersebut dapat dilihat bahwa semua fungsi yang diharapkan telah dapat tercapai, ditandai dengan keterangan ‘Berhasil’ pada kolom ‘Hasil Aktual’. E. Evaluasi Sistem Dalam pembangunan sebuah sistem, terkadang tidak semua hal yang telah direncanakan, dianalisis dan dirancang dapat diimplementasikan dengan baik. Berikut akan dijelaskan beberapa hal baik yang berhasil di implementasikan pada sistem (kelebihan sistem) maupun yang kurang berhasil diimplementasikan pada sistem (kekurangan sistem). 1. Kelebihan Sistem a. Semua masyarakat dapat menggunakan Sistem Informasi Prediksi Pasang Surut BerbasisAndroid, secara gratis. b. Tampilan aplikasi yang dibuat semudahmungkin. 2. Kekurangan Sistem a. Sistem aplikasi ini belum adanya menu admin (backend) data ditampilkan langsung dari website http://pusriskel.litbang.kkp.go.id/ b. Belumkompatibel untuk Oparating SystemApplae (IOS). Tabel 4.1 Black-Box Test No Nama Fungsi Deskripsi Hasil yang Diharapkan Hasil Aktual 1. Splash Screen Halaman yang akan ditampilkan pertama kali ketika user membuka aplikasi sistem informasi prediksi pasang surut Menampilkan halaman Splash Screen Berhasil 2. Menu Utama Menampilkan menu utama (home), yang memberikan informasi lokasi pelabuhan yang ditampilkan melalui peta interaktif dan terdapat 4 menu dibawahnya yaitu Pelabuhan, Glosarium, About, Disclaimer. Menampilkan menu utama, Informasi lokasi pelabuhan Berhasil 3. Pelabuhan Menampilkan menu Pelabuhan yang berisi informasi nama pelabuhan perikanan Menampilkan data Pelabuhan Berhasil 4 Prediksi Pasang Surut Menampilkan informasi yang ditampilkan dalam bentuk grafik dan data tabel untuk 14 hari kedepan (2 minggu), dengan resolusi temporal per jam dengan pemuktahiran (update) informasi per 14 hari pridiksi pasang surut Menamfilkan informasi Prediksi Pasang Surut dalam bentuk grafik Berhasil

Berdasarkan hasil dari analisa, perancangan, dan implementasi, maka didapatkan beberapa kesimpulan sebagai berikut : 1. Hasil penelitian telah membangun Sistem Informasi Prediksi Pasang Surut BerbasisAndroid. 2. Informasi prediksi pasang surut di tampilkan dalam bentuk grafik. 3. Informasi prediksi pasang surut untuk 14 hari kedepan (2minggu), dengan resolusi temporal per jam dengan pemuktahiran (update) informasi per 14 hari.