Membuat Aplikasi Inputan

Anda mungkin juga menyukai

Anda di halaman 1dari 13

PEMROGRAMAN MOBILE (B)

Oleh:
Putu Adhika Dharmesta 1605551037

PROGRAM STUDI TEKNOLOGI INFORMASI


FAKULTAS TEKNIK
UNIVERSITAS UDAYANA
2018
Membuat Aplikasi Penerima Inputan Pengguna

Sebuah aplikasi yang baik harus dapat menerima sebuah inputan. Baik itu inputan dari peripheral
ataupun inputan dari pengguna aplikasi tersebut. Aplikasi yang saya buat adalah sebuah aplikasi
data diri yang dapat menerima inputan pengguna melalui keyboard lalu menampilkan hasil inputan
tersebut pada tampilan yang berbeda. Adapun tampilan dari aplikasi saya adalah sebagai berikut.

Gambar 1 Antarmuka Utama

Gambar 1 memperlihatkan tampilan antarmuka dari aplikasi saya. Terdapat 4 jenis inputan yang
digunakan yaitu edit text, date picker, radio button, dan spinner.
Gambar 2 Date Picker

Gambar 2 merupakan tampilan date picker yang digunakan pada aplikasi ini. Untuk menambahkan
date picker diperlukan untuk menambahkan compile 'com.android.support:design:25.0.0'
pada build gradle project kita.

Gambar 3 Spinner
Gambar 3 merupakan tampilan dari spinner yang sudah dibuat. Untuk membuat spinner kita
perlu membuat sebuah array string pada file string.xml agar dapat menampilkan semua
pilihan yang diinginkan. Semua antarmuka ini dibuat didalam file activity_main.xml.

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


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="10dp"
tools:context="com.example.adhikadharmesta.user_input.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data Diri"
android:textSize="26dp"
android:layout_marginBottom="30dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp">

<android.support.design.widget.TextInputLayout
android:id="@+id/layout_nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp">

<EditText
android:id="@+id/input_nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Nama"/>
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
android:id="@+id/layout_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp">

<EditText
android:id="@+id/input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Email"
android:inputType="textEmailAddress"/>
</android.support.design.widget.TextInputLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tanggalLahir_textview"
android:paddingRight="15dp"
android:text="Tanggal Lahir"
android:textSize="15dp"
android:layout_marginTop="24dp" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="16dp"
android:orientation="horizontal">

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:layout_marginRight="20dp"
android:onClick="setDate"
android:text="Atur Tanggal Lahir" />

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/button1"
android:layout_below="@+id/textView2"
android:layout_marginTop="15dp"
android:text="@string/date_selected"
android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/gender_textview"
android:paddingRight="15dp"
android:text="Jenis Kelamin"
android:textSize="15dp"
android:layout_marginTop="10dp" />

<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/gender_textview"
android:orientation="horizontal">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/laki-laki_btn"
android:text="Laki-laki"/>

<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/perempuan_btn"
android:text="Perempuan"/>
</RadioGroup>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/Agama_textview"
android:paddingRight="15dp"
android:text="Agama"
android:textSize="15dp"
android:layout_marginTop="15dp" />

<Spinner
android:id="@+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="@+id/country"
></Spinner>

<Button
android:id="@+id/simpan_btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:text="SIMPAN"
/>

</LinearLayout>

</LinearLayout>
Kode Program 1 activity_main.xml

Kode program diatas merupakan kode program dari file activity_main.xml. File ini ditujukan
untuk mendesain antarmuka dari tampilan. Untuk proses dibelakangnya dibuat kodingan sebagai
berikut.

package com.example.adhikadharmesta.user_input;

import android.app.DatePickerDialog;
import android.app.Dialog;
import android.content.Context;
import android.content.Intent;
import android.os.Vibrator;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;
import java.util.Calendar;
import android.widget.DatePicker;

public class MainActivity extends AppCompatActivity {


//Deklarasi Variabel
Spinner spinner;
ArrayAdapter<CharSequence> adapter;
private Vibrator vib;
Animation animshake;
private EditText inputan_nama, inputan_email, inputan_ttl;
private TextInputLayout layout_inputan_nama, layout_inputan_email,
layout_inputan_ttl;
private DatePicker datePicker;
private Calendar calendar;
private TextView dateView;
private int year, month, day;
private Button simpan_btn;
private RadioButton radioButton;
private RadioGroup radioGroup;
String var_nama, var_email, var_tanggalLahir, var_gender, var_agama;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//Menunjuk id dari masing-masing komponen di activity


layout_inputan_nama = (TextInputLayout) findViewById(R.id.layout_nama);
layout_inputan_email = (TextInputLayout) findViewById(R.id.layout_email);
inputan_nama = (EditText) findViewById(R.id.input_nama);
inputan_email = (EditText) findViewById(R.id.input_email);
simpan_btn = (Button) findViewById(R.id.simpan_btn);
radioGroup = (RadioGroup) findViewById(R.id.radio);

dateView = (TextView) findViewById(R.id.textView3);


calendar = Calendar.getInstance();
year = calendar.get(Calendar.YEAR);
month = calendar.get(Calendar.MONTH);
day = calendar.get(Calendar.DAY_OF_MONTH);
showDate(year, month + 1, day);

spinner = (Spinner)findViewById(R.id.spinner);

// Membuat array adapter untuk menampilkan string array


ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
R.array.country_names, android.R.layout.simple_spinner_item);
// menspesifikasi layout yang digunakan pada saat spinner muncul

adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
// masukan adapter ke dalam spinner
spinner.setAdapter(adapter);

spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int pos,
long l) {
Toast.makeText(getBaseContext(),parent.getItemAtPosition(pos)+"
selected", Toast.LENGTH_LONG).show();
}

@Override
public void onNothingSelected(AdapterView<?> adapterView) {

}
});

//fungsi tombol simpan pada saat di klik


simpan_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//membuat penampung variabel untuk di parse ke activity selanjutnya
var_nama = inputan_nama.getText().toString();
var_email = inputan_email.getText().toString();
var_tanggalLahir = dateView.getText().toString();
int selectedId = radioGroup.getCheckedRadioButtonId();
radioButton = (RadioButton) findViewById(selectedId);
var_gender = radioButton.getText().toString();
var_agama = spinner.getSelectedItem().toString();

//deklarasi intent
Intent i = new Intent(MainActivity.this, data_diri.class);
//deklarasi bundle untuk membawa data ke activity baru
Bundle b = new Bundle();
//memparse setiap variabel
b.putString("parse_nama", var_nama);
b.putString("parse_email", var_email);
b.putString("parse_tanggalLahir", var_tanggalLahir);
b.putString("parse_gender", var_gender);
b.putString("parse_agama", var_agama);

i.putExtras(b);

startActivity(i);
Toast.makeText(getApplicationContext(), "Data Berhasil Disimpan",
Toast.LENGTH_SHORT).show();

}
});

@SuppressWarnings("deprecation")
public void setDate(View view) {
showDialog(999);
//akan menampilkan teks ketika kalendar muncul setelah menekan tombol
Toast.makeText(getApplicationContext(), "Pilih Tangal", Toast.LENGTH_SHORT)
.show();
}

@Override
protected Dialog onCreateDialog(int id) {
// TODO Auto-generated method stub
if (id == 999) {
return new DatePickerDialog(this, myDateListener, year, month, day);
}
return null;
}
private DatePickerDialog.OnDateSetListener myDateListener = new
DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker arg0, int arg1, int arg2, int arg3) {
// TODO Auto-generated method stub
// arg1 = year
// arg2 = month
// arg3 = day
showDate(arg1, arg2+1, arg3);
}
};

private void showDate(int year, int month, int day) {


dateView.setText(new StringBuilder().append(day).append("/")
.append(month).append("/").append(year));
}
}
Kode Program 2 MainActivity.java

Kode program diatas merupakan kode program MainActivity.java. Setiap kegiatan yang
membutuhkan algoritma dan proses dilakukan disini.. Kode program ini juga berkesinambungan
dengan kode program pada activity lainnya karena pada tombol simpan terdapat perintah intent
untuk mengarah ke activity lainnya.

package com.example.adhikadharmesta.user_input;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class data_diri extends AppCompatActivity {

private TextView hasil_nama, hasil_email, hasil_tanggalLahir, hasil_gender,


hasil_agama;
String nama, email, tanggalLahir, gender, agama;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_data_diri);

hasil_nama = (TextView) findViewById(R.id.hasil_nama);


hasil_email = (TextView) findViewById(R.id.hasil_email);
hasil_tanggalLahir = (TextView) findViewById(R.id.hasil_Tanggal_lahir);
hasil_gender = (TextView) findViewById(R.id.hasil_gender);
hasil_agama = (TextView) findViewById(R.id.hasil_agama);

Bundle b = getIntent().getExtras();

nama = b.getString("parse_nama");
email = b.getString("parse_email");
tanggalLahir = b.getString("parse_tanggalLahir");
gender = b.getString("parse_gender");
agama = b.getString("parse_agama");

hasil_nama.setText(nama);
hasil_email.setText(email);
hasil_tanggalLahir.setText(tanggalLahir);
hasil_gender.setText(gender);
hasil_agama.setText(agama);

}
}
Kode Program 3 data_diri.java

Kode program diatas merupakan kode program dari file data_diri.java. Terlihat bahwa kode
program menerima parse variabel yang dilakukan pada kode program 2 untuk nantinya
ditampilkan pada file xml yang terhubung pada kode program ini.

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


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="10dp"
tools:context="com.example.adhikadharmesta.user_input.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data Diri"
android:textSize="26dp"
android:layout_marginBottom="80dp"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#eceff1"
android:orientation="horizontal">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Nama" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Email" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Tanggal Lahir" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Jenis Kelamin" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Agama" />

</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=":" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=":" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=":" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=":" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=":" />

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp">
<TextView
android:id="@+id/hasil_nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />

<TextView
android:id="@+id/hasil_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />

<TextView
android:id="@+id/hasil_Tanggal_lahir"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />

<TextView
android:id="@+id/hasil_gender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />

<TextView
android:id="@+id/hasil_agama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />

</LinearLayout>

</LinearLayout>

</LinearLayout>
Kode Program 4 activity_data_diri.xml

Kode program diatas adalah kode program dari file activity_data_diri.xml. Pada kode
program ini akan ditampilkan variabel yang sebelumnya sudah di parse dari kode program
MainActivity.java ke data_diri.java. Namun disini saya menemukan sebuah masalah. Di
program saya mendesain agar setelah tombol simpan di klik maka akan beralih ke halaman yang
lainnya lalu menampilkan hasil dari inputan. Namun kenyataannya pada saat aplikasi dijalankan
dan data sudah diinput oleh pengguna lalu pengguna menekan tombol simpan, yang terjadi adalah
aplikasi langsung keluar sendiri dengan pesan sebagai berikut.
Gambar 4 Pesan Error

Setelah mengisi data diri pada form lalu menekan tombol simpan, maka yang muncul adalah pesan
tersebut. Program akan keluar dan menampilkan pesan error tersebut.

Anda mungkin juga menyukai