Membuat Kalkulator Indeks Massa Tubuh Menggunakan Eclipse ~ Catatan Waktu SMK

Di akhir magang penulis membuat sebuah aplikasi yang berbasiskan android, seperti yang di sebutkan penulis diatas. Penulis membuat aplikasi “Kalkulator IMT”

Arti IMT (Indeks Masa Tubuh) atau BMI (Body Mass Index) sendiri yakni suatu pengukuran yang menghubungkan (membandingkan) berat badan dengan tinggi badan.

Gambar 3.1 Rumus perhitungan indeks massa tubuh

IMT adalah salah satu indikator kadar lemak tubuh seseorang yang sudah dewasa dengan usia 20 tahun keatas. IMT digunakan untuk menentukan status berat badan seseorang yang memiliki badan terlalu kurus, ideal atau terlalu gemuk. IMT membantu menilai status berat badan seseorang terhadap resiko masalah kesehatan akibat kekurangan atau kelebihan berat badan. IMT tidak bisa digunakan untuk mendiagnosis kondisi kesehatan seseorang.

Tabel 3.1 : Kalsifikasi IMT menurut WHO (1998)

Klasisfikasi	Kisaran
Dibawah Normal	18.5
Normal	18.5 – 24.9
Kelebihan Berat Badan	25 - 29.9
Obesitas 1	30 – 34,9
Obesitas Tingkat 2	35 – 39.9
Obesitas Tingkat 3	> 40

Penulis memilih membuat aplikasi ini karena penulis merasa aplikasi ini sederhana, tetapi tetap mengandung data yang dapat diinput, dikalkulasi, dan memiliki fungsi if walau belum bisa mengaplikasikan database dan validasi data.

Dalam pembuatan aplikasi diatas, penulis menggunakan beberapa tools standar untuk melakukan pemprograman berbasis Android, yaitu :

1. Java SDK

Merupakan platform dasar Java yang diperlukan agar PC kita bisa mengeksekusi kode-kode program anda yang menggunakan bahasa Java.

2. Android SDK (Software Development Kit)

Yakni alat bantu dan API (Aplication Programing Interface) untuk memulai pengembangan aplikasi pada platform Android menggunakan bahasa pemprograman Java.

3. Eclipse

Adalah sebuah IDE (Integrated Development Environment) untuk mengembangkan perangkat lunak dan dapat dijalankan di semua platform (platform-independent).

4. ADT (Android Development Tools).

Yaitu plugin untuk Eclipse yang didesain untuk pengembangan aplikasi Android. ADT memungkinkan Eclipse untuk digunakan dalam membuat aplikasi Android baru, membuat User Interface, menambahkan komponen berdasarkan framework API Android, debug aplikasi, dan pemaketan aplikasi Android.

5. AVD (Android Virtual Devices)

Adalah konfigurasi dari emulator sehingga kita dapat menjalankan sesuai model Android yang kita pilih.

Berikut merupakan tahapan dalam mebuat kalkulator Indeks Massa Tubuh :

1. Membuat flowchart aplikasi kalkulator IMT.

Gambar 3.2 : Flowchart Aplikasi Kalkulator IMT bagian 1

Gambar 3.3 : Flowchart Aplikasi Kalkulator IMT bagian 2

Gambar 3.4 : Flowchart Aplikasi Kalkulator IMT bagian 3

2. Membuat Projek Aplikasi Android “Kalkultor IMT”

a. Untuk membuat aplikasi Android baru, silahkan klik File > New > Android Application Project.

Gambar 3.5 : Eclipse

b. Di “New Android application” , isikan :

a. Application Name, nama aplikasi yang bersifat bebas dan hanya berupa tampilan.

b. Project Name, nama file project Android yang akan penulis buat.

c. Package Name, nama file yang akan dieksekusi.

d. Minimum Required SDK, menjelaskan spesifikasi Android minimum yang bisa menjalankan aplikasi yang akan di buat.

e. Target SDK, menjelaskan OS Android yang disarankan untuk menggunakan aplikasi yang akan di buat.

f. Theme, mengubah tema.

Klik Next.

Gambar 3.6 : Eclipse

c. Di “Configure Project” , centang :

a. Create custom launcher icon, agar aplikasi mempunyai icon.

b. Create activity, agar memiliki aktivitas.

c. Create project in workspace, untuk pengaturan tempat menaruh project. Biasanya sudah terisi sesuai workspace yang kita pilih saat membuka eclipse.

Klik Next.

Gambar 3.7 : Eclipse

d. Di “Configure Launcher Icon”.

a. Foreground, ikon bisa berupa simbol gambar (klik browse pada image file), clipart (sudah disediakan), atau pun teks.

b. Trim Syrrounding Blank Space, untuk memotong bagian yang dianggap kosong.

c. Additional Padding, Untuk mengubah ukuran gambar dengan cara menggeser.

d. Foreground Scaling, untuk menyesuaikan ikon, sebaiknya pilih center agar ikon tidak terpotong.

e. Shape, untuk menimbulkan kesan tampilan seperti tombol, baik berbentuk kotak, lingkaran, atau pun bisa sama sekali tidak menggunakan.

f. Background Color, sebagai warna dasar dan biasanya hanya terlihat jika menggunakan shape.

g. Preview, sebagai tampilan besarnya ikon saat di instal di Android maupun Tablet.

Klik Next.

Gambar 3.8 : Eclipse

e. Di “Create Activity”.

Sudah di jelaskan di judul konfigurasinya, dibagian ini kita bisa memilih jenis activity yang akan dibuat.

Klik Next.

Gambar 3.9 : Eclipse

f. Di “Blank Activity”.

Biarkan saja sesuai default.

Klik Finish, dan tunggu hingga tampilan konfigurasi tertutup dan project yang kita buat tampil di “Package Explorer”.

Gambar 3.10 : Eclipse

3. Membuat Tab Layout

a) Buat 2 Activity dan 2 xml untuk mengintegrasi tab nya.

Caranya:

a. Avtivity, klik KalkulatorIMT > src > com.kalkulatorimt pada “Project Explorer” kemudian klik kanan pada com.kalkulatorimt > New > class.

Isi “Name” dengan “ActivitySatu”, klik Finish.

Buat satu activity lagi, namai dengan “ActivityDua”.

Gambar 3.11 : Eclipse

b. Xml, klik KalkulatorIMT > res > layout pada “Project Explorer” kemudia klik kanan pada layout New > Other > Android > Android XML Layout File.

Isi “File” dengan “activity_satu” klik Next, biarkan sesuai default dan klik Finish.

Buat satu xml lagi, namai dengan “activity_dua”.

b) Ketikkan Source code dibawah ini untuk membuat interface pada activity_main.xml nya.

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@android:id/tabhost"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<TabWidget

android:id="@android:id/tabs"

android:layout_width="fill_parent"

android:layout_height="wrap_content" />

<FrameLayout

android:id="@android:id/tabcontent"

android:layout_width="fill_parent"

android:layout_height="fill_parent" />

</LinearLayout>

</TabHost>

Gambar 3.12 : Source Code

c) Ketikkan Source code di bawah ini, buka Class utama MainAcivity.java

package com.kalkulatorimt;

import android.app.~~TabActivity~~;

import android.content.Intent;

import android.os.Bundle;

import android.view.Menu;

import android.widget.TabHost;

import android.widget.TabHost.TabSpec;

public class MainActivity extends ~~TabActivity~~ {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

TabHost tabHost = getTabHost();

// Tab for kalkulasi

TabSpec tabsatu = tabHost.newTabSpec("Kalkulasi");

tabsatu.setIndicator("Kalkulasi");

Intent satuIntent = new Intent(this, ActivitySatu.class);

tabsatu.setContent(satuIntent);

// Tab for keterangan

TabSpec tabdua = tabHost.newTabSpec("Keterangan");

// setting Title and Icon for the Tab

tabdua.setIndicator("Keterangan");

Intent duaIntent = new Intent(this, ActivityDua.class);

tabdua.setContent(duaIntent);

// Adding all TabSpec to TabHost

tabHost.addTab(tabsatu); // Adding photos tab

tabHost.addTab(tabdua); // Adding songs tab

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

d) Masukkan source code berikut di ActivitySatu.java untuk memanggil activity_satu.xml.

Lakukan hal yang sama pada ActivityDua.java, ganti di setContentView menjadi activity_dua.xml.

public class ActivitySatu extends Activity{

@Override

protected void onCreate(Bundle savedInstanceState){

// TODO auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_satu);

}

e) Daftarkan dua class Java tambahan yang telah dibuat tadi pada Android manifest.xml.

Masukkan Source code berikut tepat di bawah </activity>.

Gambar 3.16 : Source Code

f) Running, dengan cara klik kanan pada project, Run AS > Android Application dan berikut tampilannya setelah aplikasi di jalankan.

Gambar 3.17 : Emulator Android

4. Membuat Kalkulasi IMT

a) Buat tampilan pada activity_satu.xml, masukkan source code berikut.

Pada kode ini kita akan membuat 4 TextView, 2 EditText, serta 2 Button.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/LinearLayout1"

android:layout_width="match_parent"

android:gravity="center"

android:layout_height="match_parent"

android:orientation="vertical"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity" >

<TextView

android:id="@+id/txtTinggi"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tinggi"

android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText

android:id="@+id/edTinggi"

android:layout_width="232dp"

android:layout_height="wrap_content"

android:ems="10"

android:hint="Tinggi dalam satuan CM"

android:inputType="number" />

<TextView

android:id="@+id/txtBerat"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Berat"

android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText

android:id="@+id/edBerat"

android:layout_width="232dp"

android:layout_height="wrap_content"

android:ems="10"

android:hint="Berat dalam satuan KG"

android:inputType="number" />

<TextView

android:id="@+id/txtHasil"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text=""

android:textAppearance="?android:attr/textAppearanceLarge" />

<LinearLayout

android:id="@+id/LinearLayout1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:orientation="horizontal" >

<Button

android:id="@+id/btHitung"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hitung" />

<Button

android:id="@+id/btHapus"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hapus"

android:onClick="hapus"/>

</LinearLayout>

<TextView

android:id="@+id/txtKeterangan1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text=""

android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView

android:id="@+id/txtKeterangan2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text=""

android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

b) Masukkan source code berikut ke ActivitySatu.java, tinggal sesuaikan dengan kode yang dibuat sebelumnya.

Didalamnya, ada source code untuk aksi saat btHitung saat di klik. Saat btHitung diklik maka kalkulasi akan berjalan dan hasilnya akan tampil sebagai TeksView. Sedangkan apabila btHapus diklik maka EditTex tampilan keterangan akan kosong otomatis.

package com.kalkulatorimt;

import java.security.PublicKey;

import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.EditText;

import android.widget.TextView;

import android.widget.Toast;

public class ActivitySatu extends Activity implements OnClickListener {

TextView txtBerat, txtTinggi, txtHasil, txtKeterangan1,txtKeterangan2;

EditText edBerat, edTinggi;

Button btHitung;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_satu);

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

edBerat = (EditText) findViewById(R.id.edBerat);

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

edTinggi = (EditText) findViewById(R.id.edTinggi);

btHitung = (Button) findViewById(R.id.btHitung);

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

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

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

btHitung.setOnClickListener(this);

}

public void onClick(View v) {

String hasil = "";

Double hitung = 0.0;

if (v.getId() == btHitung.getId()) {

try {

Double x1 = Double.parseDouble(edBerat.getText().toString());

Double x2 = Double.parseDouble(edTinggi.getText().toString());

Double hitung1 = x2 / 100;

hitung = (x1 / (hitung1 * hitung1));

hasil = String.valueOf(hitung);

// txtHasil = String.valueOf(hasil);

} catch (Exception e) {

e.printStackTrace();

}

if (hitung <= 18.5) {

txtKeterangan1.setText(hasil.toString());

} else if (hitung <= 24.5) {

txtKeterangan1.setText(hasil.toString());

} else if (hitung <= 29.5) {

txtKeterangan1.setText(hasil.toString());

} else if (hitung <= 34.5) {

txtKeterangan1.setText(hasil.toString());

} else if (hitung <= 39.5) {

txtKeterangan1.setText(hasil.toString());

} else if (hitung >= 40) {

txtKeterangan1.setText(hasil.toString());

}

public void hapus (View arg0) {

edBerat.setText("");

edTinggi.setText("");

txtKeterangan1.setText("");

txtKeterangan2.setText("");

edTinggi.setFocusable(true);

}

public boolean onCreateOptionMenu(Menu menu) {

// inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

c) Running, berikut tampilan kalkulasi pada aplikasi Kalkuator IMT.

5. Membuat keterangan dari hasil kalkulasi IMT menggunakan fungsi IF.

a) Tambahkan source code berikut di ActivitySatu.java.

Letakkan tepat dibawah Source code untuk menampilkan txtKeterangan1, lakukan hal yang sama ke semua fungsi if,dan sesuaikan keterangannya. Jangan lupa tambahkan Double hitung = 0.0; dibawah String hasil = “”;

Pesan teks akan disesuaikan dengan hasil IMT yang telah dihitung sebelumnya.

txtKeterangan2.setText("Berat Dibawah Normal".toString());

b) Berikut tampilan keterangan berdasarkan hasil saat dijalankan.

6. Mengganti Background

a) Siapkan gambar seukuran tampilan layout. Simpan di folder anda meletakkan program. Contoh C:/Workspace/KalkulatorIMT/res/drawable-hdpi, pastikan menggunakan huruf kecil untuk penamaannya agar memudahkan.

b) Masuk ke Eclipse klik Project > Clean > Clean project selected below > KalkulatorIMT. Klik Ok.Maka file gambar yang telah disimpan tadi akan masuk di drawable-hdpi.