perancangan dan implementasi

 3. PERANCANGAN DAN IMPLEMENTASI

Aplikasi perhitungan indeks massa tubuh dan berat badan ideal ini adalah aplikasi informasi yang dikhususkan untuk orang dewasa yang berusia diatas 17 tahun. Terdapat beberapa menu pada aplikasi ini yaitu:

1.      Kalkulator berat badan yang berisi perhitungan status berat badan dan berat badan ideal.

2.      Informasi nutrisi yang berisi informasi seputar vitamin, protein, karbohidrat dan mineral yang dibutuhkan oleh tubuh manusia.

3.      Referensi restoran vegetarian diwilayah Jakarta untuk mempermudah pengguna untuk mencari referensi restoran yang memiliki menu sehat bagi kebutuhan tubuh.

Penullis akan membahas lebih dalam mengenai pembuatan aplikasi kalkulator indeks massa tubuh dan status berat badan ideal khusus dewasa. Proses perancangan aplikasi ini terdiri dari beberapa tahapan, yaitu tahap perencanaan struktur navigasi, perencanaan, analisis kebutuhan, rancangan halaman aplikasi, pembuatan aplikasi, implementasi program pada perangkat seluler.

3.1    Struktur Navigasi

Struktur navigasi merupakan struktur program secara umum. Sehingga, pada proses perancangan aplikasi ini struktur navigasi sangat diperlukan agar dapat mempermudah dalam proses pembuatan aplikasi. Pada aplikasi ini struktur navigasi yang digunakan adalah struktur navigasi komposit atau campuran. Struktur navigasi campuran merupakan gabungan dari struktur navigasi non linier dan struktur navigasi hierarki, seperti pada Gambar 3.1.

Gambar 3.1 Struktur Navigasi Aplikasi

Struktur navigasi campuran dianggap tepat untuk menggambarkan aplikasi secara umum dikarenakan dapat memberikan tingkat interaksi yang lebih tinggi dibanding dengan struktur navigasi lainnya.

3.2         Tahap Perencanaan

Tahapan ini membahas perencanaan mengenai pengumpulan informasi, pengumpulan konten, dan persiapan software dan hardware yang digunakan.

1.      Pengumpulan Informasi

Dalam tahap pengumpulan informasi, penulis mencari beberapa sumber informasi dari buku-buku dan beberapa situs website dari internet untuk dijadikan sebagai referensi penulisan dan pembuatan aplikasi.

2.      Pengumpulan Konten

Dalam tahap pengumpulan konten, penulis mencari beberapa sumber informasi dan tutorial dari beberapa situs web dari internet dan buku untuk dijadikan bahan rancangan tampilan aplikasi dan pembuatan aplikasi.

3.3    Analisis Kebutuhan

Proses Analisis Kebutuhan merupakan proses menemukan, memperbaiki, dan memodelkan aplikasi. Dengan kata lain analisa kebutuhan adalah sebuah proses untuk mendapatkan informasi, model, dan spesifikasi tentang perangkat yang akan dibutuhkan oleh pengguna

Dewasa ini kesehatan pada berat badan sering dikesampingkan oleh sebagian manusia, akibatnya banyak penyakit yang muncul dan berkembang didalam tubuh. Masalah ini timbul dikarenakan masyarakat kesulitan mengontrol status berat badan yang mereka miliki. Kesibukan dan mobilitas yang tinggi juga membuat masyarakat , khususnya usia dewasa kurang memperhatikan keadaan gizi mereka serta aktifitas yang padat membuat orang-orang tergolong malas untuk berkonsultasi pada ahlinya, mencari referensi buku atau mencari pada sumber terpercaya lainnnya.

Dari beberapa uraian tersebut, maka perlu adanya media alternatif informasi mengenai status berat badan, berat badan ideal, informasi nutrsi serta referensi restoran vegetarian dengan memanfaatkan sistem operasi Android.

3.3.1        Analisis Fungsional

Analisis kebutuhan fungsional adalah bagian penjelasan mengenai fitur-fitur yang dimasukkan kedalam aplikasi yang akan dibuat. Berikut penjelasan fitur-fitur yang terdapat dalam aplikasi perhitungan Indeks Massa Tubuh dan status berat badan:

1.      Kalkulator Berat Badan berisikan perhitungan Indeks Massa Tubuh dan Berat Badan Ideal dimana terdapat saran bagi orang yang mengalami berat badan kurang, normal, berat badan lebih atau obesitas.

2.      Informasi Nutrisi berisikan 4 buah bagian yang terdiri dari informasi karbohidrat dan mineral, vitamin dan protein yang dibutuhkan bagi tubuh manusia.

3.      Riwayat perhitungan berisikan tampilan riwayat perhitungan yang disimpan oleh pengguna aplikasi. Riwayat perhitungan bertujuan untuk memudahkan pengguna dalam melihat hasil perhitungan indeks massa tubuh.

4.      Lokasi restoran vegetarian berisikan referensi restoran yang menyediakan menu makanan sehat yang terhubung langsung dengan google maps untuk mempermudah pengguna dalam pencarian lokasi.

5.      Bantuan berisikan panduan penggunaan aplikasi.

6.      Tentang Aplikasi berisikan informasi fitur-fitur pada aplikasi.

3.4    Rancangan Halaman Aplikasi

Sebelum memulai membuat aplikasi langkah yang pertama dilakukan adalah membuat rancangan input dan output agar lebih terarah dalam proses pembuatan aplikasi. Perancangan halaman ini juga digunakan untuk mengatur posisi gambar, tombol dan teks yang sesuai dengan hasil aplikasi yang akan dibuat. Tahap pembuatan aplikasi ini dibagi menjadi menjadi beberapa bagian dalam perancangan halaman splash screen, menu utama, kalkulator berat badan, informasi nutrisi, lokasi restoran vegetarian ,dan bantuan.

3.4.1    Rancangan Halaman Splash Screen

Splash Screen digunakan sebagai halaman pembuka aplikasi. Setelah tampilan Splash Screen selesai ditampilkan maka akan muncul halaman menu utama. Dimana dalam bagian ini dilengkapi dengan tulisan dan gambar kalkulator berat badan. Berikut tampilan rancangan halaman splash screen pada aplikasi android penghitung berat badan, seperti pada gambar 3.2

Gambar 3.2 Rancangan Halaman Splash Screen

Keterangan  :

Image 1 : gambar kalkulator berat badan

3.4.2   Rancangan Halaman Menu Utama

Setelah diawali halaman splash Screen sebagai halaman pembuka. Selanjutnya akan muncul halaman menu utama yang berisi menu-menu utama dari aplikasi. Pada halaman menu utama terdapat tombol-tombol untuk menuju ke bagian menu kalkulator berat badan, informasi nutrisi, lokasi restoran vegetarian, bantuan dan tombol keluar. Rancangan halaman menu utama ditunjukkan pada Gambar 3.3

Gambar 3.3 Rancangan Halaman Menu Utama

Keterangan          :

1.      Tombol kalkulator berat badan akan menampilkan halaman perhitungan berat badan

2.      Tombol informasi nutrisi akan menampilkan informasi nutrisi seperti karbohidrat dan mineral, vitamin dan protein yang dibutuhkan tubuh.

3.      Tombol lokasi restoran akan menampilkan referensi restoran vegetarian

4.      Tombol bantua menampilkan panduan penggunaan aplikasi

5.      Tombol keluar untuk keluar dari aplikasi

3.4.3        Rancangan Halaman Menu Kalkulator Berat Badan

Tombol pertama pada menu utama yaitu kalkulator berat badan, dimana halaman ini digunakan untuk menghitung indeks massa tubuh dan berat badan ideal sesorang. Pada halaman ini terdapat text  tinggi badan , berat badan yang akan diinput oleh pengguna serta terdapat radio button laki-laki dan perempuan yang akan dipilih oleh pengguna. Terdapat tombol hitung untuk menghitung indeks massa tubuh dan berat badan ideal. Rancangan kalkulator berat badan ditunjukkan pada Gambar 3.4

Gambar 3.4 Halaman Kalkulator Berat Badan

3.4.4        Rancangan Halaman Hasil Berat Badan

Pada halaman hasil perhitungan berat badan merupakan halaman yang menampilkan hasil dari perhitungan berat badan. Dimana pengguna dapat mengetahui status berat badan seperti : berat badan kurang, normal, berat badan berlebih atau bahkan obesitas. Pengguna juga dapat mengetahui berat badan ideal yang sesuai dengan tinggi badan mereka. Terdapat pula tombol lanjut yang akan menampilkan halaman saran yang tepat bagi status berat badan pengguna. Rancangan tampilan hasil perhitungan berat badan ditunjukkan pada Gambar 3.5 .

Gambar 3.5 Rancangan Halaman Hasil Berat Badan

3.4.5    Rancangan Halaman Saran

Halaman saran merupakan tampilan untuk menampilkan saran atau informasi untuk menaikkan, menurunkan , atau menjaga status berat badan normal dan ideal kepada pengguna. Pada halaman ini juga terdapat tombol kembali untuk membawa pengguna kembali masuk ke halaman menu utama pada aplikasi, Seperti pada Gambar 3.6.

Gambar 3.6 Rancangan Halaman Saran

3.4.6   Rancangan Halaman Informasi Nutrisi

Pada rancangan halaman informasi nutrisi terdapat tombol karbohidrat dan mineral, vitamin, dan protein yang dibutuhkan tubuh manusia. Masing-masing tombol menampilkan informasi nutrisi berdasarkan jenis-jenis tombol yang akan ditekan oleh pengguna. Tombol kembali digunakan untuk membawa pengguna kembali ke halaman menu utama pada aplikasi Android, seperti pada Gambar 3.7.

3.7 Rancangan Halaman Informasi Nutrisi

3.4.7   Rancangan Halaman Lokasi Restoran Vegetarian

Pada perancangan halaman lokasi restoran vegetarian ini akan menampilkan lokasi restoran yang terhubung langsung dengan google maps untuk mempermudah pengguna dalam pencarian lokasi restoran vegetarian di daerah Jakarta. Pada halaman lokasi restoran vegetarian terdapat tombol kembali yang akan membawa pengguna aplikasi untuk masuk kembali pada halaman menu utama, seperti pada Gambar 3.8.

Gambar 3.8 Rancangan Tampilan Lokasi Restoran Vegetarian

3.4.8   Rancangan Tampilan Halaman Bantuan

Rancangan tampilan halaman bantuan yang menampilkan panduan penggunaan aplikasi untuk mempermudah pengguna dalam menggunakan aplikasi, seperti pada Gambar 3.9.

Gambar 3.9 Rancangan Tampilan Halaman Bantuan

3.4.9   Rancangan Halaman Riwayat Perhitungan

Rancangan tampilan halaman riwayat perhitungan merupakan tampilan yang menampilkan hasil perhitungan berat badan yang telah disimpan sebelumnya oleh pengguna aplikasi. Fungsi halaman riwayat berat badan ini adalah untuk mempermudah pengguna dalam mengakses perhitungan berat badan sebelumnya agar pengguna dapat mengontrol berat badan untuk mencapai status berat badan ideal atau normal, seperti pada Gambar 3.10.

                      Gambar 3.10 Rancangan Halaman Riwayat Perhitungan

3.4.10    Rancangan Halaman Tentang Aplikasi

Rancangan tampilan halaman tentang aplikasi merupakan tampilan yang menampilkan informasi mengenai aplikasi. Informasi yang ditampilkan berupa jenis aplikasi, nama pembuat aplikasi, fitur aplikasi serta kritik dan saran, seperti pada Gambar 3.11.

3.5    Unified Modeling Language (UML)

Dalam membangun sebuah aplikasi Android dibutuhkan rancangan untuk menggambarkan struktur sebuah aplikasi. UML menyediakan standar pada notasi dan diagram yang bisa digunakan untuk memodelkan suatu sistem. Diagram UML digunakan untuk mengakses aplikasi penghitung indeks massa tubuh dan berat badan ideal. Diagram yang digunakan pada aplikasi saat ini adalah :

3.5.1        Use Case Diagram

Use case diagram digunakan untuk mengetahui apa saja yang ada di dalam sistem. Dalam use case diagram aplikasi penghitung berat badan ini terdapat 1 buah aktor yaitu user. User mendapatkan hak akses ke semua menu yang ada pada aplikasi, seperti pada Gambar 3.12.

Gambar 3.12 use case diagram aplikasi

3.5.2        Rancangan Activity Diagram

Activity Diagram menggambarkan aliran kerja atau aktivitas dalam sebuah aplikasi. Diagram ini menggambarkan bagaimana alur berawal, aktivitas apa saja yang ada dalam aplikasi dan bagaimana akhir dari aplikasi, seperti pada Gambar 3.13.

Gambar 3.13 Activity diagram

3.6    Pembuatan Aplikasi

Pada tahap pembuatan aplikasi memerlukan software Android Studio. Langkah pertama dalam pembuatan aplikasi adalah menjalankan software Android Studio yang telah di download dan di install. Berikut langkah-langkah dalam membuat project baru dalam Android Studio.

1.      Jendela Welcome to Android Studio akan ditampilkan, seperti pada Gambar 3.14.

Gambar 3.14 Halaman utama Android Studio

2.      Penulis memilih Start a new Android Studio Project.

Gambar 3.15 Halaman utama Android Studio

3.      Penulis mengatur nama aplikasi Android yang akan dibuat dan kemudian menekan Next.

Gambar 3.16 Halaman pembuatan project baru

4.      Penulis memilih minimum SDK yang akan digunakan kemudian menekan Next.

Gambar 3.17 Halaman Target Android Devices

5.      Penulis memilih Activity yang akan digunakan, kemudian menekan Next.

Gambar 3.18 Halaman Add an activity to mobile

6.      Penulis mengatur nama Activity, kemudian menekan Finish. Kemudian Project baru akan di tampilkan.

Gambar 3.19 Tampilan layout

3.6.1   Pembuatan Splash Screen

Splash screen adalah tampilan loading pertama kali ketika aplikasi Android dibuka atau dijalankan, agar terlihat lebih menarik dan terkesan profesional. Pada umumnya Splash Screen ini dibuat untuk menunjukan logo aplikasi yang dibuat.

1.      Langkah pertama dalam memasang Splash Screen pada aplikasi Android yaitu: satu buah file Java dengan nama splashscreen.java, satu buah Activity Layout dengan nama splashscreen.xml dan sedikit pengaturan di file AndroidManifest.xml.

       Berikut ini adalah source code pada splashscreen.java:

package com.dwi.weigher;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

public class splashscreen extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splashscreen);
        boolean b = new Handler().postDelayed(new Runnable() {
            public void run() {
                Intent intent = new Intent(splashscreen.this, MainActivity.class);
                startActivity(intent);
                finish();
            }


        },3000);
    }
}

2.      Langkah kedua adalah penulis membuat file dengan nama dan format splashscreen.xml dengan bentuk source code seperti berikut ini:

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

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

    xmlns:app="http://schemas.android.com/apk/res-auto"

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

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    tools:context="com.dwi.weigher.splashscreen"

    tools:showIn="@layout/activity_splashscreen"

    android:background="#71509c">



    <ImageView

        android:layout_width="1200dp"

        android:layout_height="match_parent"

        android:id="@+id/imageView6"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:src="@drawable/logomini" />



</RelativeLayout>

3.      Lalu penulis meng-edit file Android Manifest.xml menjadi seperti script dibawah ini AndroidManifest.xml

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

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

    package="com.dwi.weigher">



    <application

        android:allowBackup="true"

        android:icon="@mipmap/ic_launcher"

        android:label="@string/app_name"

        android:supportsRtl="true"

        android:theme="@style/AppTheme">

       <activity

    android:name=".splashscreen"

    android:theme="@style/AppTheme.FullScreen">

    <intent-filter>

        <action android:name="android.intent.action.MAIN" />



        <category android:name="android.intent.category.LAUNCHER" />

    </intent-filter>

</activity>

</manifest>

4.      Berikut tampilan Splashscreen yang telah dibuat, seperti pada Gambar 3.20 :

3.6.2    Pembuatan Halaman Menu

Halaman menu merupakan tampilan yang menampilkan beberapa pilihan menu. Pada halaman menu terdapat 7 buah seperti : tombol Mulai, tombol Riwayat Perhitungan, tombol Informasi Nutisi, tombol Lokasi Restoran Vegetarian, tombol Tentang, tombol Bantuan dan tombol Keluar.

Pada proses pembuatan halaman menu ini langkah pertama yang dilakukan adalah membuat project baru yang terdiri dari satu buah file Java dengan nama MainActivity.java dan satu buah tampilan Activity Layout dengan nama content_main.xml. Berikut ini cara membuat tampilan halaman menu utama:

1.    Men-design tampilan halaman menu utama dengan cara memasukkan beberapa buah tombol, teks dan gambar pada content_main.xml

2.    Pada saat memasukkan gambar pada content_main.xml, sebelumnya masukkan gambar pada folder drawable pada Android Studio, seperti pada Gambar 3.21.

Gambar 3.21 Layout content_main

3.      Langkah selanjutnya adalah penulis memasukkan gambar pada drawable pada aplikasi dengan menuliskan kode program seperti berikut ini:

<ImageView

    android:layout_width="wrap_content"

    android:layout_height="200dp"

    android:id="@+id/imageView"

    android:src="@drawable/logomini"

    android:layout_above="@+id/btn_mulai"

    android:layout_alignParentLeft="true"

    android:layout_alignParentStart="true" />

4.      Pada tampilan menu utama ini memerlukan 5 buah tombol. Cara memasukkan tombol tersebut adalah dengan cara menuliskan kode program pada halaman MainActivity.java, sebagai contoh memasukkan tombol mulai pada aplikasi dengan menuliskan kode program seperti berikut ini:

<Button

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:text="MULAI"

    android:id="@+id/btn_mulai"

    android:layout_centerVertical="true"

    android:layout_alignParentLeft="true"

    android:layout_alignParentStart="true" />

5.      Penulis melakukan hal yang sama pada tombol riwayat perhitungan, informasi nutrisi, lokasi restoran vegetarian dan tombol keluar.

6.    Cara menghubungkan Activity satu dengan Activity lainnya adalah dengan cara menuliskan kode program pada file MainActivity.java untuk membuat aksi pada saat tombol ditekan. Sebagai contoh pada tombol mulai tuliskan kode program seperti dibawah ini:

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

    setSupportActionBar(toolbar);



   Button btnMulai = (Button) findViewById(R.id.btn_mulai);

   btnMulai.setOnClickListener(new View.OnClickListener() {

       @Override

       public void onClick(View v) {

            Intent mulai = new Intent(MainActivity.this, mulai.class);

           startActivity(mulai);

       }



   });

Aksi yang dilakukan pada penulisan kode program diatas adalah ketika tombol mulai ditekan maka pengguna aplikasi akan terhubung dengan tampilan activity mulai untuk memulai perhitugan indeks massa tubuh.

7.      Penulis melakukan hal yang sama pada tombol Riwayat Perhitungan, Informasi Nutrisi, Referensi Restoran Vegetarian dan tombol Bantuan, hanya saja diubah pada bagian nama tombol , dan halaman yang akan dituju.

3.6.3   Pembuatan Halaman Mulai

Tampilan halaman mulai merupakan tampilan yang menampilkan halaman perhitungan indeks massa tubuh dan status berat badan ideal. Pada tampilan mulai terdapat 3 buah textview yaitu tinggi, berat, dan jenis kelamin, terdapat 2 buah editText, 1 buah radio group yang terdiri dari 2 buah radio button serta terdapat pula 1 buah button.

Pada proses pembuatan halaman ini diperlukan satu buah file Java dengan nama mulai.java, dan satu buat file ActivityLayout dengan nama mulai.xml untuk men-design halaman mulai. Berikut langkah-langkah dalam membuat halaman tampilan halaman mulai:

1.  Penulis men-design tampilan halaman mulai dengan cara memasukkan 3 buah textview, editText, radiogroup, dan button pada file content_mulai.xml, seperti pada  Gambar 3.22.

Gambar 3.22  Layout content_mulai

2.      Langkah selanjutnya adalah membuat kode program dalam file mulai.java. Kode program dalam file mulai.java dibuat untuk mengaktifkan operasi perhitungan indeks massa tubuh dan berat badan ideal pada  aplikasi yang mengharuskan pengguna untuk memasukkan nilai tinggi badan, berat badan dan jenis kelamin . Berikut potongan  kode program pada operasi perhitungan indeks massa tubuh dan berat badan ideal :

public void onClick(View v) {

         //object baru dari hitungan

         hitungan ht = new hitungan();



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

berat= Integer.parseInt(edBerat.getText().toString());

         if(radiobtn_laki.isChecked()){

         ht.setJenisKelamin(1);

         Log.i("jenis",      Integer.toString(ht.getJenisKelamin()));

         }else if(radiobtn_prm.isChecked()){

             ht.setJenisKelamin(2);

         }

         //rumus baru

         double tinggiKurangSeratus = tinggi - 100;

         double hasilBB = (tinggiKurangSeratus - (0.1*tinggiKurangSeratus));

         ht.setHasilBB(hasilBB);

         //rumus lama

         double tinggicuy = (tinggi/100);

         double temp = Math.pow(tinggicuy,2);

         Log.i("tinggi",Double.toString(tinggicuy));

         Log.i("temp",Double.toString(temp));

         hasil = berat/temp;

         ht.setHasil(hasil);

         Intent help = new Intent(mulai.this,hasil.class);

         startActivity(help);

     }

 });

Sehingga pada saat tombol hitung ditekan oleh pengguna, aplikasi otomatis akan menghitung indeks massa tubuh dan berat badan ideal pengguna, serta aplikasi juga secara otomatis akan menampilkan hasil perhitungan.