76
BAB IV
IMPLEMENTASI dan PEMBAHASAN
4.1 Implementasi
Implementasi merupakan tahapan setelah melakukan analisis dan perancangan sistem pada siklus rekayasa perangkat lunak dimana aplikasi siap dioperasikan pada keadaan
yang sebenarnya sehingga dari sini akan diketahui apakah program atau aplikasi atau sistem yang telah dibuat benar-benar dapat menghasilkan keluaran yang sesuai
dengan tujuan yang diinginkan.
4.1.1 Implementasi Basis Data
Basis data dibuat dengan menggunakan program PhpMyAdmin. Pada implementasinya dibuat satu buah file database untuk menampung data-data yang
dibutuhkan untuk menjalankan aplikasi. Database ini akan dipindahkan pada database lokal saat pemasangan aplikasi . berikut adalah struktur tabel database pada
PhpMyAdmin :
Gambar 4.1 Implementasi Basis Data
4.2 Pembahasan
4.2.1 Web Server
Saat aplikasi terinstall maka aplikasi akan meminta data pada server di www.legendstory.hol.esstory.db
. Web server akan memberikan data berupa array seperti berikut :
Gambar 4.2 Web Server
Listing Program
?php conn = new mysqlimysql.idhostinger.com, u785993769_amel,
coding,u785993769_story; conn = mysql_connect mysql.idhostinger.com, u785993769_amel,
coding or die connection failure ; mysql_select_db u785993769_story ;
table_name = legenda; txtcari=_GET[txtcari];
ifissettxtcari { txtcari=_GET[txtcari];
query = select id,title,images,address,body_ind,body_eng,latitude,longitude from legenda
where id=._GET[txtcari]. or title LIKE ._GET[txtcari].;
} else {
query = select id,title,images,address,body_ind,body_eng,latitude,longitude from
`legenda`; }
result = conn-preparequery; result-execute;
response = array; array = array;
if result instanceof mysqli_stmt { result-store_result;
variables = array; data = array;
meta = result-result_metadata; while field = meta-fetch_field {
variables[] = data[field-name]; pass by reference }
call_user_func_arrayarrayresult, bind_result, variables; i = 0;
while result-fetch { array[i] = array;
foreach data as k = v { array[i][k] = utf8_encodev;
} i++;
} } elseif result instanceof mysqli_result {
while row = result-fetch_assoc { array[] = utf8_encoderow;
} }
ifarray == NULL{ response[error] = true;
} else { response[error] = false;
} response[data] = array;
echo json_encode response ;
4.2.2 Splash Screen
Saat pertama membuka aplikasi , maka akan muncul splashscreen . bersamaan dengan muncul splashscreen sistem akan mengambil data pada phpMyAdmin dan
dipindahkan pada database lokal
Gambar 4.3 Splash Screen
Listing Program :
protected void
onCreateBundle savedInstanceState {
super
.onCreatesavedInstanceState; requestWindowFeatureWindow.
FEATURE_NO_TITLE ;
Settings.load
this
; Displays.load
this ;
setContentViewR.layout. activity_main
;
if
savedInstanceState ==
null
{ getSupportFragmentManager.beginTransaction
.addR.id. container
,
new
SplashFragment.commit; stack
= Stack. SPLASH
; }
}
public void
startAppListStoryBean data {
if
data ==
null
|| data.isEmpty
return
;
this
. data
= data;
if
stack = Stack.
MAIN startMain;
}
protected void
onPostExecuteResponse result {
TODO
Auto-generated method stub
super
.onPostExecuteresult;
if
result =
null
result. data
=
null
result. data
.isEmpty {
if
DatabaseAdapter.anyDbExist context
{ DatabaseAdapter.addWisatas
context ,
result. data
; }
else
{ ListStoryBean data = DatabaseAdapter
.getAllWisata context
; ListStoryBean update =
new
ArrayListStoryBean;
for int
w = 0; w result.
data .size; w++ {
if
result. data
==
null
|| result.
data .isEmpty
break
;
if
w 0 w = 0;
for int
e = 0; e data.size;
e++ {
if
result. data
.getw.compareTodata.gete == 2 { update.addresult.
data .getw;
result. data
.removew; w -= 1;
data.removee;
break
; }
if
result. data
.getw.compareTodata.gete == 1 { result.
data .removew;
w -= 1; data.removee;
break
; }
} }
if
update.isEmpty DatabaseAdapter.updateWisatas
context , update;
if
data.isEmpty DatabaseAdapter.deleteWisatas
context , data;
if
result. data
.isEmpty DatabaseAdapter.addWisatas
context , result.
data ;
} MainActivity
context .startAppDatabaseAdapter
.getAllWisata context
; }
else if
DatabaseAdapter.anyDbExist context
{ prepare;
} }
}
4.2.3 MenuUtama
Pada menu utama berisi fitur-fitur utama aplikasi. Beberapa fitur utama tersebut yaitu: Story , Nearby , Favorite , Help dan About Menu Utama memuat tombol menu
yang dapat digunakan dalam aplikasi. Setiap menu memiliki aksi yang berbeda sesuai nama menu dan fungsinya.
Gambar 4.4 Menu Utama
Listing Program :
public void
startMain { getSupportFragmentManager.beginTransaction
.replaceR.id. container
,
new
MainFragment.commit; stack
= Stack. MAIN
;}
public void
onClickView v {
TODO
Auto-generated method stub
final int
id = v.getId;
if id == R.id.
btn_setting {
new
SettingDialog
this
.showgetActivity .getSupportFragmentManager,
null
; }
else if
id == R.id. btn_story
{ MainActivity getActivity.showList
false
; }
else if
id == R.id. btn_fav
{ MainActivity getActivity.showList
true
; }
else if
id == R.id. btn_nearby
{
MainActivitygetActivity.showMap
null
; }
else if
id == R.id. btn_help
{ MainActivity getActivity.ShowHelpv;
}
else if
id == R.id. btn_about
{ MainActivity getActivity.ShowAboutv;}}
4.2.4 Daftar Story
Merupakan menu yang menampilkan list halaman daftar Story, pengguna dapat memilih story mana yang ingin dilihat.
Gambar 4.5 Daftar Story
Listing program :
public void
showList
boolean
showOnlyFav { ListFragment fragment =
new
ListFragment;
if
showOnlyFav { fragment.setData
data ,
Settings. LANG
== Settings. BAHASA_INDONESIA
? Cerita
: Story
; stackTwo
= Stack. LIST
; }
else
{
ListStoryBean nData =
new
ArrayListStoryBean;
for
StoryBean s : data
if
s.isFavorite nData.adds;
for int
w = 0; w nData.size; w++
for int
e = w + 1; e nData.size; e++ {
if
nData.getw.getTime nData.gete.getTime {
StoryBean s = nData.getw; nData.setw, nData.gete;
nData.sete, s; }
} fragment.setDatanData,
Settings. LANG
== Settings. BAHASA_INDONESIA
? Cerita
: Story
; stackTwo
= Stack. LIST_FAV
; } getSupportFragmentManager.beginTransaction
.replaceR.id. container
, fragment.commit; stack
= Stack. LIST
; }
listview.setOnItemClickListener
new
OnItemClickListener { Override
public void
onItemClickAdapterView? parent, View view,
int
position,
long
id {
TODO
Auto-generated method stub MainActivitygetActivity.showContentStoryBean
listview.getAdapter.getItemposition; }};
4.2.5 Detail Story
Menu ini berisi semua informasi mengenai story yang dipilih pada daftar cerita
Gambar 4.6 Detail Story
Listing program :
public void
showContentStoryBean data { ContentFragment fragment =
new ContentFragment;
fragment.setDatadata; getSupportFragmentManager.beginTransaction
.replaceR.id. container
, fragment.commit; stack
= Stack. CONTENT
; }
public
View onCreateViewLayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState {
TODO Auto-generated method stub
View root = inflater.inflateR.layout. fragment_content
, container,
false
; img
= ImageView root.findViewByIdR.id. img_wisata
; PicassoTarget target =
new
PicassoTargetgetActivity, Api.
SERVER_URI + Api.
IMAGES_URI +
data .getImages,
img ,
Displays. width
,
Displays. height
3, ImageType. LARGE
; root.setTagtarget;
Picasso.withgetActivity .loadApi.
SERVER_URI + Api.
IMAGES_URI +
data .getImages
.intotarget; TextView root.findViewByIdR.id.
text_judul .setText
data .getTitle;
TextView root.findViewByIdR.id.
text_alamat .setText
data .getAddress;
TextView root.findViewByIdR.id. text_body
.setTextSettings. LANG
== Settings.
BAHASA_INDONESIA ? Html
.fromHtml data
.getBody_ind : Html.fromHtml
data .getBody_eng;
root.findViewByIdR.id. btn_home
.setOnClickListener
this
; root.findViewByIdR.id.
btn_fav .setOnClickListener
this
; root.findViewByIdR.id.
btn_map .setOnClickListener
this ;
root.findViewByIdR.id. btn_share
.setOnClickListener
this
; fav
= ImageButton root.findViewByIdR.id. btn_fav
; fav
.setImageResource data
.isFavorite ? R.drawable.
ic_star_grey600_24dp : R.drawable.
ic_star_outline_grey600_24dp ;
return root;
}
4.2.6 Lokasi Wisata
Menu ini berada pada detail story , menu ini akan berjalan saat user menekan tombol maps yang berada pada bagian bawah tengah menu detail story . saat dijalankan akan
menampilkan lokasi wisata .
Gambar 4.7 Lokasi Wisata
Listing program
else if
id == R.id. btn_map
{ MainActivity getActivity.showMap
data ;
4.2.7 Share Cerita
Menu ini berada pada detail story , menu ini akan berjalan saat user menekan tombol share yang berada pada kanan bawah menu detail story. Menu ini digunakan untuk
Gambar 4.8 Share Cerita
Listing program :
else if
id == R.id. btn_share
{
if
bmp ==
null
bmp = drawableToBitmap
img .getDrawable;
if file
== null
{ file
=
new
FileEnvironment.getExternalStoragePublicDirectory Environment.
DIRECTORY_DCIM .toString
+ +
data .getImages;
if
file .exists
try {
file .delete;
}
catch
Exception e {
TODO
: handle exception }
FileOutputStream out =
null
;
try
{ out =
new FileOutputStream
file ;
bmp .compressBitmap.CompressFormat.
JPEG , 100, out;
}
catch
Exception e { e.printStackTrace;
}
finally
{
try
{
if
out =
null
{
out.close; }
}
catch
IOException e { e.printStackTrace;
} }
} Intent sharingIntent =
new
IntentIntent. ACTION_SEND
; sharingIntent.setType
textplain ;
Uri screenshotUri = Uri.parse
file .getAbsolutePath;
sharingIntent.setType image
; sharingIntent.putExtraIntent.
EXTRA_STREAM ,
screenshotUri; sharingIntent
.putExtra Intent.
EXTRA_TEXT ,
data .getTitle
+ Settings.
LANG == Settings.
BAHASA_INDONESIA ?
, Dibagikan oleh :
, Shared by +
getActivity .getStringR.string.
app_name +
+ SHARE_LINK
; startActivityIntent
.createChooser sharingIntent,
Settings. LANG
== Settings.
BAHASA_INDONESIA ?
Membagikan dengan :
Share with
; }
}
4.2.8 Favorite Wisata
Menu ini digunakan untuk memfavoritkan cerita yang diinginkan . cara untuk memfavoritkan cerita adalah dengan menekan tombol bintang jika ditekan akan
berubah warna yang artinya cerita sudah berada pada halaman favorite .
Gambar 4.9 Favorite Cerita
Listing Program :
public void
setFavStoryBean story {
for int
w = 0; w data
.size; w++
if
data .getw.getId == story.getId {
data .setw, story;
DatabaseAdapter.updateWisatagetApplicationContext, story;
break ;
} }
4.2.9 Search Story
Meni ini ada pada halaman daftar story di bagian kanan atas bar , menu search story digunakan untuk mencari cerita yang diinginkan berdasarkan judul dan isi cerita .
Gambar 4.10 Search Cerita
Listing program :
final
EditText search = EditText root .findViewByIdR.id.
editText_search ;
search.setHint title
; search.addTextChangedListener
new
TextWatcher { Override
public void
onTextChangedCharSequence s, int
start,
int
before,
int
count {
TODO
Auto-generated method stub adapter.getFilter.filters.toString;
}
4.2.10 Nearby
Menu ini adalah untuk menampilkan semua lokasi yang ada pada database dan lokasi terdekat dari tempat user berada.
Gambar 4.11 Nearby
Listing program :
public void
showMapStoryBean data {
if
mapsFragment ==
null
mapsFragment =
new
MapsFragment;
if
data =
null
{ mapsFragment
.setDatadata; }
else
{ mapsFragment
.setDatas this
. data
; stackTwo
= Stack. NEARBY
; }
getSupportFragmentManager.beginTransaction .replaceR.id.
container ,
mapsFragment .commit;
stack = Stack.
MAP ;
}
public void
onLocationChangedLocation location {
TODO
Auto-generated method stub
if this
. location
==
null
{
this
. location
= location; goToPositonlocation,
null
;
if
directionManager ==
null
|| data
==
null return
; directionManager
.clear; directionManager
.build
new
LatLnglocation.getLatitude, location .getLongitude,
new
LatLng data
.getLatitude, data
.getLongitude, mode
;
return
; }
lastLocation =
this
. location
;
this
. location
= location;
double
distance = DirectionManager.getDistance
lastLocation , location;
Log.i ,
onSingleView +
onSingleView ;
if
circle ==
null
onSingleView {
Log.w ,
circle ;
int
strokeColor = 0xffff0000; red outline
int
shadeColor = 0x44ff0000; opaque red fill
CircleOptions circleOptions =
new
CircleOptions .center
new
LatLnglocation.getLatitude, location .getLongitude.radius
RADIUS .fillColorshadeColor.strokeColorstrokeColor
.strokeWidth8; circle
= googleMap
.addCirclecircleOptions; }
if
distance 0.005d {
if
circle =
null
{ circle
.remove; circle
=
null
; }
if onSingleView
{
int
strokeColor = 0xffff0000; red outline
int
shadeColor = 0x44ff0000; opaque red
fill CircleOptions circleOptions =
new
CircleOptions .center
new
LatLnglocation.getLatitude, location .getLongitude.radius
RADIUS
.fillColorshadeColor.strokeColorstrokeColor .strokeWidth8;
circle =
googleMap .addCirclecircleOptions;
} }
if
directionManager ==
null return
;
if
directionManager .isRunning {
goToPositonlocation, DirectionManager.getBearing
new
LatLng location.getLatitude,
location.getLongitude, directionManager
.getSectionPoint; }
if
distance 0.005d directionManager
.isRunning { directionManager
.setPointToSectionlocation; }
if
directionManager .isRunning
goToPositonlocation, null
; }
4.2.11 Mode Maps
Mode maps digunakan untuk memberikan pilihan tampilan untuk menampilkan lokasi wisata
Gambar 4.12 Mode Maps
Listing program :
public void
setDirectionMode
int
mode {
TODO Auto-generated method stub
menu .onDetachedFromWindow;
if
directionManager ==
null
|| data
==
null return
; directionManager
.clear;
if
location =
null
directionManager .build
new LatLng
location .getLatitude,
location .getLongitude,
new
LatLng data
.getLatitude, data
.getLongitude, mode;
this
. mode
= mode;
switch
mode {
case GoogleDirection.
MODE_DRIVING :
text_mode .setText
Driving ;
break
;
case
GoogleDirection. MODE_BICYCLING
: text_mode
.setText Bicycling
;
break
;
case
GoogleDirection. MODE_WALKING
:
text_mode .setText
Walking ;
break
;
default
:
break
; }
}
4.2.12 Help
Menu ini berisi tentang keterangan tombol-tombol yang digunakan dalam aplikasi .
Gambar 4.13 Help
Listing program :
public void
ShowHelpView v { startActivity
new
IntentgetApplicationContext, Help.
class
; }
4.2.13 About
Menu ini berisi tentang informasi aplikasi .
Gambar 4.14 About
Listing program :
public void
ShowAboutView v { startActivity
new
IntentgetApplicationContext, About.
class ;
}
4.2.14 Pilih Bahasa
Menu ini untuk digunakan untuk memilih bahasa yang akan digunakan
Gambar 4.15 Pilih Bahasa
Listing program :
public void
onClickView v {
TODO
Auto-generated method stub
if
v.getId == R.id. btn_ok
{
if
rb1 .isChecked
Settings. LANG
= Settings. BAHASA_INDONESIA
;
else
Settings. LANG
= Settings. ENGLISH
; Settings.savegetActivity;
callback .refreshState;
dismiss; }
else
{ rb1
.setChecked
false
; rb2
.setChecked
false
;
if
v == rb1
rb1 .setChecked
true
;
else if
v == rb2
rb2 .setChecked
true
; }
public class
Settings {
public static
final int
BAHASA_INDONESIA = 11;
public static
final int
ENGLISH = 22;
public static
int LANG
= BAHASA_INDONESIA
;
private static
final
String KEY
= Settings.
class
.getSimpleName + KEYS
;
public static
void
loadContext context { SharedPreferences sp = context.getSharedPreferences
KEY ,
Context. MODE_PRIVATE
; LANG
= sp.getInt KEY
, BAHASA_INDONESIA
; }
public static
void
saveContext context { SharedPreferences sp = context.getSharedPreferences
KEY ,
Context. MODE_PRIVATE
; sp.edit.putInt
KEY ,
LANG .apply;
} }
99
BAB V
ANALISA HASIL
Dalam bab ini dibahas mengenai pengujian program dengan menggunakan metode black box. Untuk menguji fungsional program dan kuesioner yang bertujuan
untuk mengetahui respon user terhadap sistem yang dibuat.
5.1 Pengujian Black Box
Kategori