Tugas Pemrograman Multimedia

Gambaran Umum Aplikasi

Aplikasi Perhitungan Rumus-Rumus Fisika ini merupakan aplikasi yang memuat 10 macam rumus dasar yang ada pada bidang Fisika, yaitu Beda Potensial, Energi Potensial, Gaya, Hambatan, Kecepatan, Kuat Arus, Momentum, Percepatan, Tekanan, dan Usaha. User diminta untuk memilih rumus yang ingin digunakan, kemudian memasukkan nilai-nilai yang telah diketahui, lalu lakukan perhitungannya. Aplikasi ini akan menampilkan hasil dari nilai-nilai yang dimasukkan sesuai dengan rumus yang digunakan. Aplikasi ini juga menampilkan simbol dari besaran Fisika yang digunakan beserta rumus perhitungannya. Pada aplikasi ini juga terdapat unsur-unsur multimedia, antara lain teks berupa kata dan kalimat yang menjelaskan isi aplikasi, gambar berupa background aplikasi, serta audio berupa suara yang disisipkan pada tiap tombol pada aplikasi, yang akan berbunyi apabila ditekan.

Dalam pembuatan aplikasi ini, pertama-tama penulis membuat rancangan antarmuka untuk aplikasi Rumus Fisika. Kemudian dilakukan pemilihan algoritma atau metode yang digunakan untuk membuat aplikasi Rumus Fisika ini. Berikutnya mulai dilakukan pembuatan program dengan menggunakan editor seperti Eclipse Galileo serta JDK. Setelah pembuatan program selesai, dilakukan pengujian program dengan menggunakan AVD (Android Virtual Device) yang berfungsi sebagai Android Emulator nya sampai program berhasil di kompile. Bila program berhasil di compile maka akan dilakukan package agar aplikasi Rumus Dasar Fisika ini dapat diimplementasikan kedalam handphone.

Struktur Navigasi

Gambar 3.1 Struktur Navigasi Rumus Fisika

Halaman pertama yang akan tampil adalah halaman layar Menu, yang merupakan halaman utama aplikasi. Pada halaman utama aplikasi terdapat 3 tombol pilihan yaitu Start, Tutorial, About, dan Quit. Start digunakan untuk memulai aplikasi, Tutorial digunakan untuk melihat petunjuk penggunaan aplikasi, About digunakan untuk melihat informasi tambahan mengenai aplikasi, dan Quit digunakan untuk keluar dari aplikasi. Pada halaman Tutorial dan About akan berisikan informasi berupa teks beserta tombol untuk kembali ke halaman utama.

Jika tombol Start dipilih maka akan masuk kedalam  halaman yang berisikan pilihan dari rumus Fisika yang ingin digunakan. Setelah memilih rumus yang ingin digunakan, akan masuk kedalam halaman perhitungan sesuai dengan rumus yang dipilih. User dapat memasukkan nilai-nilai sesuai dengan besaran Fisika yang diketahui dan kemudian melakukan perhitungannya. Selanjutnya aplikasi akan mengeluarkan nilai hasil dari operasi yang dilakukan. Jika ingin kembali untuk memilih rumus Fisikanya user dapat menekan tombol Kembali ke Menu.

 

Perancangan Antar Muka

Perancangan antar muka aplikasi ini terdiri dari perancangan halaman menu, perancangan halaman Rumus Fisika, perancangan halaman Tutorial, halaman About, dan perancangan perhitungan Rumus Dasar Fisika.

Perancangan Halaman Menu

Gambar 3.4 Rancangan Menu

Gambar 3.4 merupakan rancangan halaman menu aplikasi. Pada halaman ini terdapat 4 buah tombol yaitu tombol Start, Tutorial, About, dan Quit. Tombol Start digunakan untuk memulai aplikasi. Saat user memilih tombol Start, maka akan masuk ke menu 10 macam Rumus Fisika. Tombol Tutorial digunakan untuk melihat petunjuk penggunaan aplikasi ini. Tombol About digunakan untuk melihat informasi tambahan mengenai aplikasi. Sedangkan tombol Quit digunakan untuk keluar dari aplikasi.

Perancangan Halaman Tutorial

Gambar 3.5 Rancangan Halaman Tutorial

Halaman tutorial berisikan tentang petunjuk penggunaan dari aplikasi Rumus Dasar Fisika. Halaman ini menyediakan informasi petunjuk berupa teks yang dapat dilihat pada gambar 3.5. Halaman ini juga menyediakan tombol Back untuk kembali ke menu awal aplikasi.

Perancangan Halaman About

Gambar 3.6 Rancangan Halaman About

Halaman about berisikan tentang informasi tambahan mengenai aplikasi Rumus Dasar Fisika. Halaman ini menyediakan informasi tambahan berupa teks yang dapat dilihat pada gambar 3.6. Halaman ini juga menyediakan tombol Back untuk kembali ke menu awal aplikasi.

Perancangan Halaman Daftar Rumus Fisika

Gambar 3.7 Rancangan Halaman Daftar Rumus Fisika

Pada gambar 3.7 terdapat pilihan rumus Fisika yang ingin digunakan. Pengguna dapat memilih rumusnya sesuai dengan kebutuhan. Pada halaman ini terdapat 10 macam rumus Fisika yang dibuat menggunakan menu list disertai dengan ikon disampingnya, sehingga ke-10 rumus Fisika tersusun berurut dan berbentuk daftar pilihan. Halaman ini juga menyediakan pilihan Keluar yang digunakan untuk keluar dari menu daftar rumus Fisika dan kembali ke menu awal aplikasi.

Perancangan Halaman Perhitungan Energi Potensial

Gambar 3.9 Rancangan Halaman Perhitungan Rumus Energi Potensial

Halaman ini menyediakan 3 kolom isian sebagai tempat untuk menampung nilai yang dimasukkan oleh user, yaitu nilai Massa Benda, Hambatan, dan Tinggi Benda serta 1 kolom isian untuk menampilkan hasil operasinya yaitu nilai Energi Potensial. Halaman ini juga menyediakan 2 buah tombol, yaitu untuk melakukan perhitungan operasi rumusnya dan untuk kembali ke menu daftar pilihan rumus Fisika.

 
Pembuatan Kode Program

Layout center.xml

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

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

   android:layout_height="fill_parent"

   android:layout_width="fill_parent"

   android:padding="60dip"

   android:orientation="horizontal"

   android:background="@drawable/main"

  android:gravity="center_vertical">

   <LinearLayout

      android:orientation="vertical"

      android:layout_height="wrap_content"

      android:layout_width="fill_parent"

      android:layout_gravity="center">

      <Button

         android:id="@+id/button_start"

         android:layout_width="fill_parent"

       android:layout_height="wrap_content"

         android:text="Start" />

      <Button

         android:id="@+id/button_tutorial"

         android:layout_width="fill_parent"

       android:layout_height="wrap_content"

         android:text="Tutorial"/>

      <Button

         android:id="@+id/button_about"

         android:layout_width="fill_parent"

       android:layout_height="wrap_content"

         android:text="About"/>

      <Button

         android:id="@+id/button_quit"

         android:layout_width="fill_parent"

       android:layout_height="wrap_content"

         android:text="Quit" />

   </LinearLayout>

</LinearLayout>

Kode program diatas digunakan untuk membuat halaman awal aplikasi Perhitungan Rumus-Rumus Fisika. Halamannya diatur untuk menyesuaikan dengan ukuran layar pada aplikasi android. Pada halaman ini dibuat 4 macam tombol, yaitu tombol Start, tombol Tutorial, tombol About, dan tombol Exit.

Tombol pertama, yaitu tombol Start dibuat dengan menggunakan metode Button, lalu letaknya diatur agar menyesuaikan dengan lebar layar dengan menggunakan metode fill_parent. Posisi ketinggiannya diatur agar mengisi kekosongan yang masih ada pada jendela halaman aplikasi tersebut dengan menggunakan metode wrap_content. Penamaan tombol dibuat dengan menggunakan metode android:text.

Ketiga tombol lainnya, yaitu tombol Tutorial, About, dan Exit dibuat dengan cara yang sama dengan tombol Start, yaitu menggunakan metode Button. Posisi dari tombol-tombol tersebut juga disesuaikan dengan metode fill_parent untuk lebar dan wrap_content untuk ketinggiannya. Penamaan tombol-tombol tersebut juga dibuat dengan metode android:text.

Gambar 3.18 Tampilan Output Halaman Awal Aplikasi

Layout tutorial.xml

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

<AbsoluteLayout

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

  android:orientation="vertical"

  android:layout_width="fill_parent"

  android:layout_height="fill_parent"

  android:background="@drawable/background">

<ScrollView

    android:layout_width="fill_parent"

      android:layout_height="350px"

      android:layout_y="30px">

<AbsoluteLayout

android:id="@+id/widget0"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

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

<TextView

android:id="@+id/txtView1"

android:layout_width="190px"

android:layout_height="wrap_content"

android:text="TUTORIAL"

android:textSize="28sp"

android:textStyle="bold"

android:layout_x="70px"

android:layout_y="10px"

></TextView>

<TextView

android:id="@+id/txtHasil"

android:layout_width="190px"

android:layout_height="wrap_content"

android:layout_x="30px"

android:layout_y="60px"

></TextView>

<Button

android:id="@+id/btnBack"

android:text="Back"

android:layout_gravity="center_horizontal"

android:layout_width="90px"

android:layout_height="wrap_content"

android:layout_marginTop="200px"

android:onClick="BackMainMenu"

android:layout_x="76px"

android:layout_y="180px"

></Button>

</AbsoluteLayout>

</ScrollView>

</AbsoluteLayout>

Kode program diatas digunakan untuk menampilkan halaman Tutorial. Perintah yang digunakan untuk menampilkan judul dari halaman Tutorial ini adalah android:text = “TUTORIAL”. Kemudian ditampilkan teks yang berisikan keterangan petunjuk yang sudah disimpan pada txtHasil. Keterangan teks tersebut dibuat pada kelas tutorial.java. Lalu pembuatan button Back dilakukan dengan fungsi Button, kemudian diatur agar ketika button Back diklik maka akan kembali ke halaman awal dengan menggunakan fungsi android:onClick = “BackMainMenu”.

Gambar 3.19 Tampilan Output Halaman Tutorial

 

Layout about.xml

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

<AbsoluteLayout

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

  android:orientation="vertical"

  android:layout_width="fill_parent"

  android:layout_height="fill_parent"

  android:background="@drawable/background">

<ScrollView

    android:layout_width="fill_parent"

      android:layout_height="350px"

      android:layout_y="30px">

<AbsoluteLayout

android:id="@+id/widget0"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

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

<TextView

android:id="@+id/txtView1"

android:layout_width="190px"

android:layout_height="wrap_content"

android:text="ABOUT"

android:textSize="28sp"

android:textStyle="bold"

android:layout_x="84px"

android:layout_y="10px"></TextView>

<TextView

android:id="@+id/txtHasil"

android:layout_width="190px"

android:layout_height="wrap_content"

android:layout_x="30px"

android:layout_y="50px"></TextView>

<Button

android:id="@+id/btnBack"

android:text="Back"

android:layout_gravity="center_horizontal"

android:layout_width="90px"

android:layout_height="wrap_content"

android:layout_marginTop="200px"

android:onClick="BackMainMenu"

android:layout_x="76px"

android:layout_y="180px"></Button>

</AbsoluteLayout>

</ScrollView>

</AbsoluteLayout>

Kode program diatas digunakan untuk menampilkan halaman About. Perintah yang digunakan untuk menampilkan judul dari halaman Tutorial ini adalah android:text = “ABOUT”. Kemudian ditampilkan teks yang berisikan keterangan petunjuk yang sudah disimpan pada txtHasil. Keterangan teks yang disimpan pada txtHasil tersebut dibuat pada kelas about.java. Lalu pembuatan button Back dilakukan dengan fungsi Button, lalu diatur agar ketika button Back diklik maka akan kembali ke halaman awal dengan menggunakan fungsi android:onClick = “BackMainMenu”. 

Gambar 3.20 Tampilan Output Halaman About

 

Layout main.xml

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

<LinearLayout

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

   android:layout_height="wrap_content"

   android:layout_width="fill_parent"

   android:orientation="horizontal"

   android:background="@drawable/test">

    <TextView

            android:id="@+id/selection"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"/>

      <ListView

            android:id="@android:id/list"

            android:drawSelectorOnTop="false"

            android:padding="7px"

            android:layout_weight="1"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"></ListView>

</LinearLayout>

Kode program diatas digunakan untuk menampilkan halaman daftar pilihan rumus Fisika. Terdapat pengaturan ukuran layout serta ukuran teksnya. Teks yang akan ditampilkan pada halaman tersebut diambil dari nilai teks yang disimpan pada string yang terdapat pada kelas MenuRumusFisika.java.

Gambar 3.21 Tampilan Halaman Daftar Rumus Fisika

Layout Rumus Fisika

Penjelasan layout rumus Fisika ini mewakili ke-10 rumus yang ada pada aplikasi Rumus Fisika, karena ke-10 rumus tersebut masing-masing memiliki button dan kolom isian untuk menampung nilai dari variable yang dimasukkan serta nilai hasil operasinya.

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

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

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

<TextView android:text="Kuat Arus (I) :" android:id="@+id/TextView01"

android:layout_width="wrap_content"

android:layout_height="wrap_content"></TextView>

<EditText android:text="" android:id="@+id/txtKuatArus"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:inputType="numberSigned|numberDecimal"></EditText>

<Button android:text="Hitung Beda Potensial" android:id="@+id/btnHitung"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:onClick="hitungBedaPotensial"></Button>

<Button android:text="Kembali ke Menu" android:id="@+id/btnBack"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:onClick="backtoMenu"></Button>

Kode program diatas digunakan untuk memasukkan elemen-elemen pada halaman perhitungan kesepuluh rumus Fisika, antara lain teks yang digunakan sebagai variabel pada rumus yang sedang digunakan, kolom isian yang digunakan untuk menampung nilai yang dimasukkan user, serta tombol yang digunakan untuk melakukan perhitungan rumus. Kode program diatas merupakan contoh dari perhitungan rumus beda potensial. Kesembilan rumus lainnya memiliki dasar kode program yang sama didalam pembuatannya.

Gambar 3.22 Tampilan Halaman Perhitungan Rumus Fisika

Japanico Christiadi Silalahi

50408474

4IA06