IMPLEMNTASI SISTEM - Tes Kemampuan - APLIKASI PEMBELAJARAN RAMBU

Tes Kemampuan

4.2 IMPLEMNTASI SISTEM

Aplikasi Lantasdroid merupakan aplikasi mobile yang mempunyai beberapa tampilan. Pada setiap tampilan dirancang sesuai dengan kebutuhan user. Sehingga dapat memudahkan user dalam menjalankan aplikasi ini. Berikut adalah tampilan dan penjelasan kode – kode program pada apliaksi LantasDroid.

4.2.1 Menu Utama

Pada menu utama user akan melihat tampilan pilihan beberapa menu, diantaranya yaitu menu Rambu Peringatan, Rambu Perintah, Rambu Larangan, Rambu Petunjuk, Tes Kemampuan, Tentang Program, Setting Program, Keluar Program. Berikut adalah tampilan dari menu utama :

Ga mbar 4.1 Menu Utama

Menu pada halaman utama dirancang sederhana, user tinggal mengarahkan jari ke menu tombol. Pada halaman ini juga di lengkapi scrolbar yang berfungsi untuk menggulung layar dari bawah ke atas atau sebaliknya. Berikut sebagian kode program untuk menu utama adalah sebagai berikut :

1. Potongan kode Program lantasdroid.java (proses pada menu utama)

packag

e com.said.oke;

public class lantasdroid extends Activity implements OnClickListener {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.main);

peringatanButton.setOnClickListener(this);

View perintahButton=findViewById(R.id.perintah_button); perintahButton.setOnClickListener(this);

View laranganButton=findViewById(R.id.larangan_button); laranganButton.setOnClickListener(this);

View }

//dijalankan pada saat tombol di klik

public void onClick(View v) {

switch (v.getId()) {

case R.id. tentang_button:

Intent m1 = new Intent(this, tentang.class); startActivity(m1);

break;

// More buttons go here (if any) ...

case R.id. perintah_button:

Intent p1 = new Intent(this, perintah.class); startActivity(p1);

break;

case R.id. peringatan_button:

Intent p2 = new Intent(this, peringatan.class); startActivity(p2);

break;

case R.id. larangan_button:

Intent p3 = new Intent(this, larangan.class); startActivity(p3);

break;

case R.id. exit_button: finish();

music.stop(this); break;

} }

//memu

tar musik back sound jika kondisi setting = true

@Overri de

protect

ed void onResume() {

supernResume(); .o

music.play(this, R.raw.back_sound); }

}

Pada kode program diatas berfungsi untuk penanganan proses pada menu utama aplikasi lantasDroid. Tombol – tombol pada menu utama di deklarasikan kemudian akan di jalankan pada saat tombol tersebut di tekan (onClick). Setelah di klik maka akan mengeksekusi class sesuai dengan menu yang dipilih.

2. Potongan Kode Program main.xml (tampilan pada menu utama) <?xml version ="1.0" encoding="UTF-8"?>

<ScrollView xmlns:a

ndroid ="http://schemas.android.com/apk/res/android"

android

:layout_width ="fill_parent"

android:layout_height ="fill_parent"

android:orientation ="vertical"

android:background ="@color/background">

<LinearLayout android

:paddingLeft ="20dip"

android

:paddingRight ="20dip"

android:orientation ="horizontal"

android:layout_width ="fill_parent"

android:layout_height ="fill_parent">

Pada Kode Program main.xml diatas berfungsi untuk merancang tampilan pada menu utama, menggunakan Linear Layout untuk mengatur tampilan dan Scroll View agar user bisa menggeser layar ke atas atau ke bawah. Ada beberapa atribut dalam menu utama, yaitu menampilkan gambar, tombol dan text.

4.2.2 Menu Rambu Per ingatan

70 jenis rambu peringatan yang akan di tampilkan berupa image button. Tampilan rambu peringatan ini juga di lengkapi dengan scroll bar yang berfungsi untuk menggulung layar ke bawah atau ke atas. Berikut tampilan halaman rambu peringatan :

Gambar 4.2 Rambu Peringatan

Untuk melihat keterangan dari rambu – rambu peringatan user cukup menyentuh dengan jari pada salah satu gambar rambu yang diinginkan, maka aplikasi LantasDroid akan menampilkan keterangan dan maksud dari rambu – rambu tersebut. userBerikut tampilan keterangan rambu Tikungan Tajam Ke Kiri :

Gambar 4.3 Tikungan Tajam Ke Kiri

Penjelasan rambu peringatan tikungan tajam ke kiri akan di tampilkan dalam halaman splash screen yang transparan,. seperti tampak pada gambar diatas. Sehingga user bisa membaca penjelasan dengan mudah Untuk kode program nya sebagai berikut :

1. Pototongan Kode program peringatan.java (proses menu rambu peringatan)

packa ge com.said.oke; impor t android.app.Activity; impor t android.content.Intent; impor t android.os.Bundle; impor t android.view.View; impor t android.view.View.OnClickListener; publi

c class peringatan extends Activity implements

OnCli

ckListener {

//deklarasi untuk semua gambar tombol rambu peringatan

View a1Button=findViewById(R.id.a1_button);

a1Button.setOnClickListener(this);

View b1Button=findViewById(R.id.b1_button);

b1Button.setOnClickListener(this);

//tom

bol selajutnya

}

//dij

alankan pada saat gambar tombol rambu di tekan

publi

c void onClick(View y) {

switc

h (y.getId()) {

case R.id.a1_button:

//set

ContentView(R.layout.toas);

Intent p1 = new Intent (this, a1.class); startActivity(p1);

break;

case R.id.b1_button:

Intent p2 = new Intent(this, b1.class); startActivity(p2);

break;

case R.id.c1_button:

Intent p3 = new Intent(this, c1.class); startActivity(p3);

break; } } }

Pada potongan kode program peringatan.java tombol gambar rambu peringatan a1_button, b1_button, c1_button akan di ekskusi pada saat di tekan dan akan menjalankan perintah menampilkan splash screen untuk menjelaskan arti rambu – rambu tersebut.

2. Potongan kode program peringatan.xml (tampilan pada menu rambu peringatan)

<?xml onversi ="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@color/background"> <LinearLayout android:orientation="horizontal"> <TableLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchColumns="20px"> <TableRow android:gravity="center"> <ImageButton

android:id="@+id/a1_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/a1"/> <ImageButton android:id="@+id/b1_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/b1"/>

</TableRow>

</TableLayout>

</youtLinearLa >

</ewScrollVi >

Pada potongan program peringatan.xml diatas untuk mengatur tampilan menggunakan scroll view, linier layout dan table layout. Table layout

berfungsi untuk mengatur tata letak gambar tombol rambu peringatan. 4.2.3 Menu Rambu Per intah

Jika user memilih menu Rambu perintah maka aplikasi LantasDroid akan menampilkan gambar berupa rambu – rambu perintah yang berlaku. Berikut tampilan halaman rambu perintah :

Ada 22 jenis rambu perintah yang akan di tampilkan berupa image button. Untuk melihat keterangan dari rambu – rambu perintah user cukup menyentuh dengan jari pada salah satu gambar rambu yang diinginkan, maka aplikasi LantasDroid akan menampilkan keterangan dan maksud dari rambu –rambu tersebut. Berikut tampilan keterangan perintah bundaran :

Gambar 4.5 Perintah Bundaran

Penjelasan rambu – rambu akan di tampilkan dalam halaman splash screen

yang transparan, seperti tampak pada gambar diatas. Untuk kode program nya sebagai berikut :

1. Potongan kode program perintah.java (proses menu perintah)

package com.said.oke; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener;

public class perintah extends Activity implements OnClickListener {

@Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.perintah);

View aaa1Button=findViewById(R.id.aaa1_button); aaa1Button.setOnClickListener(this);

View bbb1Button=findViewById(R.id.bbb1_button); bbb1Button.setOnClickListener(this);

View ccc1Button=findViewById(R.id.ccc1_button); }

public void onClick(View y) { switch (y.getId()) { case R.id.aaa1_button:

//setContentView(R.layout.toas);

Intent p1 = new Intent (this, aaa1.class); startActivity(p1);

break;

case R.id.bbb1_button:

Intent p2 = new Intent(this, bbb1.class); startActivity(p2);

break;

case R.id.ccc1_button:

Intent p3 = new Intent(this, ccc1.class); startActivity(p3);

break; }

}

Pada potongan kode program perintah.java tombol gambar rambu perintah

a1_button, b1_button, c1_button akan di ekskusi pada saat di tekan dan akan menjalankan perintah menampilkan splash screen untuk menjelaskan arti rambu – rambu tersebut.

2. Potongan kode Program perintah.xml (tampilan pada menu rambu perintah) <?xml version ="1.0" encoding="utf-8"?>

<ScrollView

:androidxmlns ="http://schemas.android.com/apk/res/android"

id:layout_widthandro ="fill_parent"

id:layout_heightandro ="fill_parent"

id:backgroundandro ="@color/background">

<LinearLayout

id:layout_widthandro ="fill_parent"

id:layout_heightandro ="fill_parent"

id:orientationandro ="horizontal">

<TableLayout

id:layout_widthandro ="fill_parent"

id:layout_heightandro ="fill_parent">

android:layout_height="wrap_content" android:src="@drawable/aaa1"/> <ImageButton android:id="@+id/bbb1_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/bbb1"/> <ImageButton </LayoutTable > </LinearLayout > </ScrollView >

Pada potongan program perintah.xml diatas untuk mengatur tampilan menggunakan scroll view, linier layout dan table layout. Table layout

berfungsi untuk mengatur tata letak gambar tombol rambu peringatan. 4.2.4 Menu Rambu Lar angan

Pada halaman menu rambu Larangan terdapat gambar berupa rambu – rambu Larangan yang berlaku. Berikut tampilan halaman rambu larangan :

Ada 50 jenis rambu Larangan yang akan di tampilkan berupa image button. Tampilan rambu larangan ini juga di lengkapi dengan scrol bar yang berfungsi untuk menggulung layar ke bawah atau ke atas. Untuk melihat keterangan dari rambu – rambu larangan user cukup menyentuh dengan jari pada salah satu gambar rambu yang diinginkan, maka aplikasi LantasDroid akan menampilkan keterangan dan maksud dari rambu –rambu tersebut. Misalnya kita akan memilih salah satu rambu perintah, yaitu rambu dilarang masuk, berikut tampilan rambu dilarang masuk :

Gambar 4.7 Rambu Larangan Dilarang masuk

Penjelasan rambu – rambu akan di tampilkan dalam halaman splash screen

1. Potongan Kode program larangan.java (proses menu rambu larangan) package com.said.oke; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener;

public class larangan extends Activity implements OnClickListener {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.larangan);

View aa1Button=findViewById(R.id.aa1_button); aa1Button.setOnClickListener(this);

View bb1Button=findViewById(R.id.bb1_button); bb1Button.setOnClickListener(this);

View cc1Button=findViewById(R.id.cc1_button); cc1Button.setOnClickListener(this); View dd1Button=findViewById(R.id.dd1_button); dd1Button.setOnClickListener(this); }

public void onClick(View y) { switch (y.getId()) { case R.id.aa1_button:

//setContentView(R.layout.toas);

Intent p1 = new Intent (this, aa1.class); startActivity(p1);

break;

case R.id.bb1_button:

Intent p2 = new Intent(this, bb1.class); startActivity(p2);

break;

case R.id.cc1_button:

Intent p3 = new Intent(this, cc1.class); startActivity(p3);

break;

case R.id.dd1_button:

Intent p4 = new Intent(this, dd1.class); startActivity(p4);

break; }

}

Pada potongan kode program larangan.java tombol gambar rambu larangan aa1_button, bb1_button, cc1_button akan di ekskusi pada saat di tekan dan akan menjalankan perintah menampilkan splash screen untuk menjelaskan arti rambu – rambu tersebut.

2. Potongan kode Program larangan.xml (tampilan pada menu rambu larangan) <?xml version ="1.0" encoding="utf-8"?>

<ScrollView

:androidxmlns ="http://schemas.android.com/apk/res/android"

id:layout_widthandro ="fill_parent"

id:layout_heightandro ="fill_parent"

id:backgroundandro ="@color/background">

<LinearLayout

id:layout_widthandro ="fill_parent"

id:layout_heightandro ="fill_parent"

id:orientationandro ="horizontal">

<TableLayout

id:layout_widthandro ="fill_parent"

id:layout_heightandro ="fill_parent">

<TableRow

id:gravityandro ="center">

Pada potongan program larangan.xml diatas untuk mengatur tampilan menggunakan scroll view, linier layout dan table layout. Table layout

4.2.5 Menu Rambu Petunjuk

Rambu petunjuk berfungsi sebagai penunjuk pemakai jalan. Pada halaman menu rambu Petunjuk terdapat gambar berupa rambu – rambu Petunjuk yang berlaku. Ada 36 jenis rambu petunjuk yang akan di tampilkan berupa image button. Tampilan rambu petunjuk ini juga di lengkapi dengan scrol bar yang berfungsi untuk menggulung layar ke bawah atau ke atas. Berikut tampilan halaman rambu petunjuk :

Ga mbar 4.8 Rambu Petunjuk

Untuk melihat keterangan dari rambu – rambu petunjuk user cukup menyentuh dengan jari pada salah satu gambar rambu yang diinginkan, maka aplikasi LantasDroid akan menampilkan keterangan dan maksud dari rambu – rambu tersebut. Rambu petunjuk ini Berikut tampilan rambu dilarang masuk :

Gambar 4.9 Rambu petunjuk putar balik

Penjelasan rambu – rambu akan di tampilkan dalam halaman splash screen

yang transparan, seperti tampak pada gambar diatas. Untuk kode program nya sebagai berikut :

1. Potongan Kode program larangan.java (proses menu rambu petunjuk)

package com.said.oke; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener;

public class petunjuk extends Activity implements OnClickListener {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.petunjuk);

View dddd6Button=findViewById(R.id.dddd6_button); dddd6Button.setOnClickListener(this);

View eeee6Button=findViewById(R.id.eeee6_button); eeee6Button.setOnClickListener(this);

}

public void onClick(View y) { switch (y.getId()) { case R.id.zzzz5_button:

//setContentView(R.layout.toas);

Intent p1 = new Intent (this, zzzz5.class); startActivity(p1);

break;

case R.id.cccc6_button:

Intent p2 = new Intent(this, cccc6.class); startActivity(p2);

break;

case R.id.dddd6_button:

Intent p3 = new Intent(this, dddd6.class); startActivity(p3);

break;

case R.id.eeee6_button:

Intent p4 = new Intent(this, eeee6.class); startActivity(p4);

break; }

} }

Pada potongan kode program petunjuk.java tombol gambar rambu petunjuk zzzz1_button, cccc1_button, dddd1_button akan di ekskusi pada saat di tekan dan akan menjalankan petunjuk menampilkan splash screen untuk menjelaskan arti rambu – rambu tersebut.

2. Potongan kode Program petunjuk.xml (tampilan pada menu rambu petunjuk)

<?xml version ="1.0" encoding="utf-8"?> <ScrollView

:androidxmlns ="http://schemas.android.com/apk/res/android"

id:layout_widthandro ="fill_parent"

id:layout_heightandro ="fill_parent"

android:background ="@color/background">

<LinearLayout

id:layout_widthandro ="fill_parent"

id:layout_heightandro ="fill_parent"

id:orientationandro ="horizontal">

<TableLayout

id:layout_widthandro ="fill_parent"

id:layout_heightandro ="fill_parent">

<TableRow

Pada potongan program petunjuk.xml diatas untuk mengatur tampilan menggunakan scroll view, linier layout dan table layout. Table layout

berfungsi untuk mengatur tata letak gambar tombol rambu petunjuk. 4.2.6 Menu Tes Kemampuan

Menu Tes Kemampuan berfungsi untuk mengukur kemampuan user dalam memahami arti rambu – rambu lalu lintas. pada menu ini user akan diberi 10 pertanyaan seputar rambu – rambu lalu lintas. Jawaban user akan di akumulasi dan ditampilkan berupa score, semakin user bisa menjawab pertanyaan maka

score nya semakin tinggi. Score ini nantinya akan sersimpan dalam database beserta nama user, dan akan ditampilkan . Berikut tampilan halaman tes kemampuan :

Gambar 4.10 Tes Kemampuan

Pada halaman Tes kemampuan anda diharuskan menginput nama, selanjutnya akan ada 10 pertanyaan tentang rambu – rambu lalu lintas. 10 pertanyaan akan disajihkan dalam pilihan ganda A sampai D yang bisa di pilih dengan RadioButton. Setelah mengisikan nama dan menjawab pertanyaan, maka tekan tombol simpan pada akhir halaman. Berikut gambarnya :

Setelah ditekan tombol simpan maka sistrem akan menyimpan data nama dan skor anda, kemudian nama dan nilai skor anda akan ditampilkan pada halaman data nilai. Tampilannya sebagai berikut :

Gambar 4.12 Data Skor

Daftar nilai diatas merupakan data nama user dan skor yang telah melakukan tes kemampuan. User dapat menghapus semua data dengan menekan tombol hapus All Data. Untuk potongan kode program nya sebagai berikut :

1. Potongan kode program pertanyaan.java (perhitungan skor)

public void onClick(View v) {

//jika tombol simpan di tekan

switch (v.getId()) { case R.id.simpan:

String getNama = ((EditText) fin

dViewById(R.id. nama)).getText().toString().trim(); if (getNama.equals(""))

new AlertDialog.Builder(this) .setTitle("Peringatan...!!!")

.setMessage("Input nama anda terlebih dah

} }) .show(); //mengecek jawaban 1-10 else { if (p1d.isChecked()) skor1=skor1+10; else skor1=0; if (p2d.isChecked()){ skor2=skor2+10;} else skor2=0; if (p3c.isChecked()) skor3=skor3+10; else skor3=0; if (p4b.isChecked()) skor4=skor4+10; else skor4=0; if (p5b.isChecked()) skor5=skor5+10; else skor5=0; if (p6c.isChecked()) skor6=skor6+10; else skor6=0; if (p7b.isChecked()) skor7=skor7+10; else skor7=0; if (p8c.isChecked()) skor8=skor8+10; else skor8=0; if (p9b.isChecked()) skor9=skor9+10; else skor9=0; if (p10c.isChecked()) skor10=skor10+10; else skor10=0;

skor=skor1 +skor2+skor3+skor4+skor5+skor6+skor7+skor8+skor9+s

kor

10 ;

String skorTxt=(Integer.toString(skor));

DataBase.insert(getNama, skorTxt);

//finish(); //if (dialog.)

//setContentView(R.layout.oke);

Intent L1 = new Intent(this, dataskor.class); startActivity(L1);

new AlertDialog.Builder(this) .setTitle("**Hasil Skor Anda**")

.setMessage("Selamat "+getNama+" Skor Anda = "+skorTxt)

.setNeutralButton("Close", new

Dia

logInterface.OnClickListener() {

public void onClick(DialogInterface dia

log, int which) {

} }) .show();

Pada potongan kode program pertanyaan.java skor 1- 10 akan dihitung dan di tampilkan pada user.

2. Potongan kode Program pertanyaan.xml

<ScrollView

xmlns:an

droid ="http://schemas.android.com/apk/res/android"

android:layout_width ="fill_parent"

android:layout_height ="fill_parent"

android:background ="@color/background">

<LinearLayout

android:paddingLeft ="5dip"

android:paddingRight ="5dip"

android:layout_width ="fill_parent"

android:layout_height ="fill_parent">

<TableLayout

android:layout_width ="fill_parent"

android:layout_height ="wrap_content"

android:stretchColumns ="*"> <TableRow android:paddingBottom="10dip" android:paddingTop="10dip"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="TES KEMAMPUAN LantasDroid"

android:textStyle="bold" android:textColor="@color/red" android:textSize="20sp"/> </TableRow > </TableLayout > </LinearLayout > </ScrollView >

Pada potongan program pertanyaan.xml diatas untuk mengatur tampilan menggunakan scroll view, linier layout dan table layout. Table layout

4.2.7 Menu Pencar ian rambu

Menu pencarian rambu berfungsi untuk melakukan pencarian rambu – rambu lalu lintas berdasarkan nama rambu. Dengan adanya menu ini diharapkan dapat membantu user dalam pencarian rambu yang dimaksud. Berikut adalah tampilan menu pencarian rambu.

Gambar 4.13 Pencarian Rambu

Pada halaman ini user memasukkan text pencarian dan menekan tombol cari maka sistem akan melakukan proses pencarian rambu sesuai dengan text yang diketik oleh user.

4.2.8 Menu Pengatur an Pr ogram

Menu Pengaturan program berfungsi untuk menyetting pemutar musik pada aplikasi LantasDroid. Sehingga user bisa memilih menghidupkan atau

mematikan music pada saat aplikasi LantasDroid dijalankan. Berikut adalah tampilan menu Pengaturan program ;

Ga mbar 4.14 Pengaturanprogram

Pada tampilan gambar di atas, user bisa mencentang pilihan musik, jika di centang maka musik akan di putar pada saat aplikasi LantasDroid di buka. Jika user ingin mematikan maka tanda centang harus dihilangkan.

4.2.9 Menu Tentang Progr am

Menu Tentang program berfungsi untuk mendiskripsikan secara singkat tentang program LantasDroid. Penjelaskan akan di tampilkan ke user dengan splash screen yang tampil. Berikut adalah tampilan menu tentang program :

Dalam dokumen APLIKASI PEMBELAJARAN RAMBU – RAMBU LALU LINTASBERBASIS SMART PHONE ANDROID. (Halaman 74-99)