BAB IV
HASIL DAN PEMBAHASAN
4.1
Implementasi
Pada tahap ini akan dibahas tentang pembuatan Aplikasi Crowdsourcing
Estimasi Waktu Kedatangan Bus TransJogja Berbasis Android. Pada tahap ini juga
aplikasi sudah siap dioperasikan. Dengan adanya tahap ini akan diketahui aplikasi
yang dibuat sesuai dengan rancagan sebelumnya.
4.1.1 Kebutuhan Sistem
Kebutuhan sistem merupakan tahapan dimana tools yang digunakan sebagai
penunjang untuk membangun suatu aplikasi dikumpulkan sehingga dapat
digunakan. Aplikasi Crowdsourcing Estimasi Waktu Kedatangan Bus TransJogja
berbasis android ini menggunakan Android Studio sebagai perangkat lunak untuk
desain interface dan code editor. Android SDK (Software Development Kit) untuk
proses debugging dari code editor. Perangkat penyuting halaman website
menggunakan Notepad++ sedangkan perangkat lunak untuk sistem basisdata
menggunakan phpMyAdmin.
4.2
Hasil Implementasi
Pada tahap ini akan menjelaskan hasil implementasi dari aplikasi. Hasil
implementasi merupakan tampilan program saat aplikasi berjalan pada sisi user dan
pada sisi admin. Pada sub bab berikutnya akan ditampilkan screenshot dari aplikasi
yang telah dibangun dan dijelaskan dengan source code.
Implementasi user merupakan implementasi yang dijalankan oleh user pada
smartphone Android dari interface yang telah dibuat sebelumnya. Pada sub bab ini
akan ditampilkan screenshot dari aplikasi yang telah dibangun dan dijelaskan
dengan source code yang menghasilkan Aplikasi Crowdsourcing Estimasi Waktu
Kedatangan Bus TransJogja Berbasis Android.
4.2.1.1 Implementasi Halaman Awal Menu
Tampilan awal menu dapat dilihat pada gambar berikut.
Gambar 4.1 Awal Menu
Untuk source code Tampilan Awal Menu dapat dilihat pada gambar
berikut.
package id.android.jalur.activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity; import android.widget.Button;
import id.android.jalur.R;
import id.android.jalur.listener.LoginClickListener;
public class LoginActivity extends AppCompatActivity {
private Context mContext;
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
mContext = this; tampilkanLogin(); }
@SuppressWarnings("ConstantConditions") private void tampilkanLogin() {
setContentView(R.layout.activity_login);
Button btn1 = (Button) findViewById(R.id.btnLogin1);
btn1.setOnClickListener(new LoginClickListener(mContext)); }
}
4.2.1.2 Implementasi Halaman Pilih Rute
Tampilan halaman Pilih Rute sebagai berikut.
Gambar 4.3 Pilih Rute
Source code halaman pilih rute dapat dilihat pada gambar berikut.
package id.android.jalur.activity;
import android.Manifest; import android.app.AlertDialog; import android.content.Context; import android.content.DialogInterface; import android.content.Intent; import android.content.SharedPreferences; import android.content.pm.PackageManager; import android.location.Location; import android.location.LocationListener; import android.location.LocationManager; import android.os.Bundle; import android.preference.PreferenceManager; import android.support.v4.app.ActivityCompat; import android.support.v7.app.AppCompatActivity; import android.widget.Button; import android.widget.GridView; import java.util.ArrayList; import java.util.concurrent.ExecutionException; import id.android.jalur.R; import id.android.jalur.grid.GridMenu; import id.android.jalur.grid.GridMenuAdapter; import id.android.jalur.helper.JalurHelper; import id.android.jalur.listener.GridMenuItemClickListener; import id.android.jalur.listener.LogoutClickListener;
public class MainActivity extends AppCompatActivity implements LocationListener {
private Context mContext;
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
mContext = this; }
@Override
protected void onResume() { super.onResume(); final SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(mContext); if (sp.getInt(getString(R.string.pref_user_id), 0) == 0) { startActivity(new Intent(mContext, LoginActivity.class)); } else { tampilkanMenu(); } }
Gambar 4.4 Source Code Pilih Rute
4.2.1.3 Implementasi Halaman Data Rute
Gambar 4.5 Data Rute
Source code halaman Data Rute dapat dilihat pada gambar berikut.
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
mJalur = getIntent().getStringExtra(TAG_JALUR); mPair = new PairHalte();
mContext = this; tampilkanShelter(); }
private void tampilkanShelter() {
TextView tvh = (TextView) findViewById(R.id.tvHeader1); SupportMapFragment smf = (SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.map); tvh.setText(getString(R.string.shelter_tv_header, mJalur)); smf.getMapAsync(this); } @Override
public void onMapReady(GoogleMap map) { map.setOnInfoWindowClickListener(this); try { mKumpulanHalte = new HalteHelper(mJalur).execute().get(); if (! mKumpulanHalte.isEmpty()) { mKumpulanHalte.toMap(map); }
} catch (InterruptedException | ExecutionException ignored) {}
SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(mContext);
LatLng current = new LatLng( Double.valueOf(sp.getString(getString(R.string.pref_latitude), "0")), Double.valueOf(sp.getString(getString(R.string.pref_longitude), "0"))); map.animateCamera(CameraUpdateFactory.newLatLngZoom(current, 16));
}
@Override
public void onInfoWindowClick(Marker marker) { Halte h = mKumpulanHalte.getHalte(marker); if (null != h) { TextView tv1 = (TextView) findViewById(R.id.tvShelter1); tv1.setVisibility(View.VISIBLE); if (null == mPair.getAsal()) { mPair.setAsal(h); mPair.setNext(mKumpulanHalte.getHalte(h.getIdNext())); tv1.setText(getString(R.string.shelter_tv_1, mPair.getAsal().getNama(), '?')); } else { mPair.setTujuan(h); tv1.setText(getString(R.string.shelter_tv_1, mPair.getAsal().getNama(), mPair.getTujuan().getNama())); Button btn1 = (Button) findViewById(R.id.btnShelter1); btn1.setVisibility(View.VISIBLE); btn1.setOnClickListener(new
ProsesClickListener(mContext, mJalur, mPair)); }
} }}
Gambar 4.6 Source Code Data Rute
4.2.1.4 Implemantasi Halaman Estimasi Perhitungan Jalur
Tampilan Halaman Estimasi Perhitungan Jalur dapat dilihat pada gambar
berikut.
Gambar 4.7 Estimasi Perhitungan Jalur
Source code Halaman Data Rute Jalur dapat dilihat pada gambar berikut.
public class EstimasiActivity extends AppCompatActivity {
public static final String TAG_PAIR_HALTE = "sepasang halte"; public static final String TAG_JALUR = "jalur";
private Context mContext;
private String mJalur; private PairHalte mPair;
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); mContext = this;
mJalur = getIntent().getStringExtra(TAG_JALUR);
mPair = (PairHalte)
getIntent().getSerializableExtra(TAG_PAIR_HALTE);
tampilkanEstimasi(); }
private void tampilkanEstimasi() {
setContentView(R.layout.activity_estimasi);
SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(mContext);
TextView tvh = (TextView) findViewById(R.id.tvHeader1); tvh.setText(getString(R.string.estimasi_header, mJalur));
LatLng current = new LatLng( Double.valueOf(sp.getString(getString(R.string.pref_latitude), "0")), Double.valueOf(sp.getString(getString(R.string.pref_longitude), "0"))); try {
Estimasi es = new EstimasiHelper(mContext, mJalur, mPair, current).execute().get(); Log.i(AplikasiHelper.TAG, es.getKeterangan().toString()); if (es.getKeterangan().equalsIgnoreCase(EstimasiHelper.TAG_RESULT_TRU E)) { TextView tv1 = (TextView) findViewById(R.id.tvEstimasi1); TextView tv2 = (TextView) findViewById(R.id.tvEstimasi2);
TextView tv3 = (TextView) findViewById(R.id.tvEstimasi3); TextView tv4 = (TextView) findViewById(R.id.tvEstimasi4); tv1.setText(es.getAwal()); tv2.setText(es.getDatang()); tv3.setText(es.getTujuan()); tv4.setText(es.getSampai()); } else { setContentView(R.layout.belum_ada_participant); }
} catch (InterruptedException | ExecutionException ignored) {}
}
}
Gambar 4.8 Source Code Estimasi Perhitungan Jalur
4.2.2 Implementasi Admin
Implementasi admin merupakan implementasi yang dijalankan oleh admin
(Server) pada web server dari interface yang telah dibuat sebelumnya. Pada sub bab
ini akan ditampilkan screenshot dari aplikasi web server yang telah dibangun dan
dijelaskan dengan source code yang menghasilkan web untuk mengelola aplikasi
yang digunakan user.
4.2.2.1 Implemendasi Halaman Admin Login
Halaman login adalah halaman admin masuk ke webservice. Halaman ini
menampilkan username dan password. Tampilan halaman login dapat dilihat pada
gambar berikut ini.
Gambar 4.9 Admin Login
Source code halaman login dapat dilihat pada gambar berikut.
<html lang="en"> <head>
<meta charset="UTF-8"> <title>Login</title>
<!-- Bootstrap Core CSS --> <link href="<?php echo base_url()
?>assets/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body{ padding-top: 70px; } .error{ color: #D9534F; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4">
<div class="panel panel-default"> <div class="panel-heading">
<h3 class="panel-title">Login</h3>
</div>
<div class="panel-body"> <form action=”” method=”post” id=”login”>
<div class=”form-group”> <label
<input class=”form-control” type=”text” name=”f_username” id=”f_username”> </div> <div class=”form-group”> <label for=”f_password”>Password</label> <input class=”form-control” type=”password” name=”f_passwd” id=”f_passwd”>
</div>
<input class=”btn btn-primary” type=”submit” name=”b_login” value=”Login”>
</form> </div>
</div><?php if (isset($error)){ ?>
<div class=”alert alert-warning” role=”alert”><?php echo $error;?></div>
<?php } ?>
<p class=”copyright”>Copyright © <?php echo date(‘Y’);?></p> </div>
<div class=”col-md-4”></div> </div>
</div>
<!—jQuery Version 1.11.0 <script src=”assets/js/jquery-1.11.1.js”></script>
<!—Bootstrap Core JavaScript
<script src=”assets/js/bootstrap.min.js”></script> <script src=”assets/js/validate.min.js”></script> <script> $(function() { $(‘#login’).validate({ rules: { f_username: { required: true }, f_passwd: { required: true } } }); }); </script> </body> </html>
Gambar 4.10 Source Code Admin Login
4.2.2.2 Implementasi Halaman Admin Index
Halaman index merupakan halaman utama web yang akan muncul setelah
admin melakukan proses login. Tampilan index dapat dilihat pada gambar berikut.
Gambar 4.11 Admin Index
Source code halaman index dapat dilihat pada gambar berikut ini.
<!DOCTYPE html> <html> <head> <title>403 Forbidden</title> </head> <body>
<p>Directory access is forbidden.</p>
</body> </html>
Gambar 4.12 Source Code Admin Index
4.2.2.3 Implementasi Halaman Data Halte
Gambar 4.13 Data Halte
Source code halaman Data Halte dapat dilihat pada gambar berikut.
Public function data($halaman=0){
$data = array();
/*
* paging halaman data
* ambil jumlah data keseluruhan
*/
$data[‘no’] = $halaman;
$datatiaphalaman = 30;
$this->db->where(‘halte_status’,1);
$config[‘base_url’]
=
base_url().’halte/data/’;
$config[‘total_rows’]
=
$this->db->count_all_results(‘halte’);
$config[‘per_page’] = $datatiaphalaman;
$this->pagination->initialize($config);
/* ambil data yang ingin ditampilkan sebanyak
$datatiaphalaman */
$this->db->where(‘halte_status’,1);
$query_halte = $this->db->get(‘halte’);
$data[‘halte’] = $query_halte;
/* tampilkan view */
$this->load->view(‘halte_data’,$data);
}
Gambar 4.14 Source Code Data Halte
4.2.2.4 Implementasi Halaman Rute
Tampilan Halaman Rute dapat dilihat pada gambar berikut.
Gambar 4.15 Rute
Source code Halaman Rute dapat dilihat pada gambar berikut
public function index($aksi=’tambahdata’, $id=’’){ $data = array();
$data[‘aksi’] = $aksi;
$data[‘halteArray’] = $this->p->halteArray(); /*
* validasi data
* gunakan kombinasi yang sesuai dengan kebutuhan selain REQUIRED
*/
$this->form_validation->set_error_delimiters(‘<br /><span class=”help-block error”>’, ‘</span>’);
$this->form_validation->set_rules(‘f_jalur’, ‘jalur’, ‘required’);
$this->form_validation->set_rules(‘f_halte_awal’, ‘halte awal’, ‘required’);
$this->form_validation->set_rules(‘f_halte_akhir’, ‘halte akhir’, ‘required’);
$this->form_validation->set_rules(‘f_jarak’, ‘jarak’, ‘required’);
/* jika $action = ubahdata dan $id tidak kosong */ if ($id != ‘’ ){ $this->db->where(‘id_rute’,$id); $query_rute = $this->db->get(‘rute’); $record_rute = $query_rute->row(); $data[‘record_rute’] = $record_rute; } /*
* jika tombol simpan di tekan
* bisa digunakan untuk proses INPUT dan UPDATE */
$b_simpan = $this->input->post(‘b_simpan’); if ( $b_simpan ){
if ($this->form_validation->run() !== FALSE) {
/* siapkan data dari form untuk dimasukan dalam table */
$data_rute[‘jalur’] = $this->input->post(‘f_jalur’);
$data_rute[‘halte_awal’] = $this->input->post(‘f_halte_awal’);
$data_rute[‘halte_akhir’] = $this->input->post(‘f_halte_akhir’);
$data_rute[‘jarak’] = $this->input->post(‘f_jarak’);
/*
* proses memasukan data (simpan)
* jika ada $_POST[‘f_id_rute’] maka yang dilakukan adalah update
*/ $id_rute = $this->input->post(‘f_id_rute’); if ( $id_rute ){ $this->db->where(‘id_rute’, $this->input->post(‘f_id_rute’)); $this->db->update(‘rute’, $data_rute);
$this->session->set_flashdata(‘pesan’, ‘Data berhasil di-Perbarui’); }else{
$this->db->insert(‘rute’,$data_rute);
$this->session->set_flashdata(‘pesan’, ‘Data berhasil di-Simpan’); }
$url = base_url().’rute/data’;
} }
Gambar 4.16 Source Code Rute
4.2.2.5 Implementasi Halaman Data Trafik
Gambar 4.17 Data Trafik
Source code halaman admin Data Trafik dapat dilihat pada gambar berikut.
public function index($aksi='tambahdata', $id=''){ $data = array();
$data['aksi'] = $aksi;
/*
* validasi data
* gunakan kombinasi yang sesuai dengan kebutuhan selain REQUIRED
*/
$this->form_validation->set_error_delimiters('<br /><span class="help-block error">', '</span>');
$this->form_validation->set_rules('f_trafik_label', 'trafik label', 'required');
$this->form_validation->set_rules('f_trafik_jam_awal', 'trafik jam awal', 'required');
$this->form_validation->set_rules('f_trafik_jam_akhir', 'trafik jam akhir', 'required');
if ($id != '' ){ $this->db->where('id_trafik',$id); $query_trafik = $this->db->get('trafik'); $record_trafik = $query_trafik->row(); $data['record_trafik'] = $record_trafik; } /*
* jika tombol simpan di tekan
* bisa digunakan untuk proses INPUT dan UPDATE */
$b_simpan = $this->input->post('b_simpan'); if ( $b_simpan ){
if ($this->form_validation->run() !== FALSE) {
/* siapkan data dari form untuk dimasukan dalam table */ $data_trafik['trafik_label'] = $this->input->post('f_trafik_label'); $data_trafik['trafik_jam_awal'] = $this->input->post('f_trafik_jam_awal'); $data_trafik['trafik_jam_akhir'] = $this->input->post('f_trafik_jam_akhir'); /*
* proses memasukan data (simpan)
* jika ada $_POST['f_id_trafik'] maka yang dilakukan adalah update
*/ $id_trafik = $this->input->post('f_id_trafik'); if ( $id_trafik ){ >db->where('id_trafik', $this->input->post('f_id_trafik')); $this->db->update('trafik', $data_trafik);
$this->session->set_flashdata('pesan', 'Data berhasil di-Perbarui'); }else{
$this->db->insert('trafik',$data_trafik);
$this->session->set_flashdata('pesan', 'Data berhasil di-Simpan'); }
$url = base_url().'trafik/data';
} }
/* jika terdapat data URL, maka arahkan halaman ke lokasi yang bersangkutan */
if( isset($url) ){ redirect($url); }
$this->load->view('trafik_index',$data); }
4.2.2.6 Implementasi Halaman Data ETA
Tampilan halaman admin Data ETA dapat dilihat pada gambar berikut.
Gambar 4.19 Data ETA
Source code halaman admin Data ETA dapat dilihat pada gambar berikut.
public function index($aksi='tambahdata', $id=''){ $data = array();
$data['aksi'] = $aksi;
/*
* load all reference data dari [publicmodel] * ./application/models/publicmodel.php */ $rs_trafik = $this->p->trafikArray(); $data['trafikArray'] = $rs_trafik; $rs_rute = $this->p->ruteArray(); $data['ruteArray'] = $rs_rute; /* * validasi data
* gunakan kombinasi yang sesuai dengan kebutuhan selain REQUIRED
$this->form_validation->set_error_delimiters('<br /><span class="help-block error">', '</span>');
$this->form_validation->set_rules('f_id_trafik', 'id trafik', 'required'); $this->form_validation->set_rules('f_id_rute', 'id rute', 'required'); $this->form_validation->set_rules('f_eta_menit', 'eta menit', 'required');
$this->form_validation->set_rules('f_eta_kecepatan_rata_rata', 'eta kecepatan rata rata', 'required');
/* jika $action = ubahdata dan $id tidak kosong */ if ($id != '' ){ $this->db->where('id_eta',$id); $query_eta = $this->db->get('eta'); $record_eta = $query_eta->row(); $data['record_eta'] = $record_eta; } /*
* jika tombol simpan di tekan
* bisa digunakan untuk proses INPUT dan UPDATE */
$b_simpan = $this->input->post('b_simpan'); if ( $b_simpan ){
/* siapkan data dari form untuk dimasukan dalam table */ $data_eta['id_trafik'] = $this->input->post('f_id_trafik'); $data_eta['id_rute'] = $this->input->post('f_id_rute'); $data_eta['eta_menit'] = $this->input->post('f_eta_menit'); $data_eta['eta_kecepatan_rata_rata'] = $this->input->post('f_eta_kecepatan_rata_rata'); /*
* proses memasukan data (simpan)
* jika ada $_POST['f_id_eta'] maka yang dilakukan adalah update
*/ $id_eta = $this->input->post('f_id_eta'); if ( $id_eta ){ $this->db->where('id_eta', $this->input->post('f_id_eta')); $this->db->update('eta', $data_eta);
$this->session->set_flashdata('pesan', 'Data berhasil di-Perbarui'); }else{
$this->db->insert('eta',$data_eta);
$this->session->set_flashdata('pesan', 'Data berhasil di-Simpan'); }
$url = base_url().'eta/data'; }
/* jika terdapat data URL, maka arahkan halaman ke lokasi yang bersangkutan */
if( isset($url) ){ redirect($url); }
$this->load->view('eta_index',$data); }
