Modul Aplikasi Mobile Pertemuan ke-2 Pengenalan environment android pada eclipse

Aplikasi Mobile (Android)

If-unpas Fajar

Konsep MVC pada Android Develop aplikasi Android seperti halnya pada platform yang lain, menggunakan bahasa pemogramman JAVA dengan menerapkan konsep MVC (Model View Controller), konsep MVC memisahkan kodingan dengan tampilan serta data storagenya, dengan konsep ini akan memudahkan para developer untuk membangun aplikasi android. Saat ini disediakan Android SDK (Software Development Kit) sebagai alat bantu dan API diperlukan untuk mulai mengembangkan aplikasi pada platform Android menggunakan bahasa pemrograman Java. Konsep mvc ini dapat dilihat dari isi project yang kita buat :

1. Model digunakan sebagai tempat core suatu program. Model yang akan memproses semua inputan yang dimasukkan oleh user. Pada project android model terdapat class .java 2. View sebagai tempat untuk tampilan yang secara langsung berhubungan dengan user. Atau dengan kata lain sebagai tempat inputan bagi user. Pada project project android view terdapat pada main.xml yang terletak didalam folder res/layout/main.xml 3. Controller, merupakan suatu (klas) pengendali yang akan mengendalikan inputan user. Controller akan mengambil inputan yang dimasukkan oleh user dan akan mengirimkannya ke klas model untuk diproses lebih lanjut. Controller terletak pada manifest.xml

Aplikasi Mobile (Android)

If-unpas Fajar

Membuat aplikasi login pada android Pada bagian ini akan dikenalkan bagaimana cara perancangan layout dalam pemrograman android di ecplise. Langkah awal adalah membuat project terlebih dahulu dengan memilih menu file/new project/android project

Lalu akan muncul windows new android project, isilah sesuai dengan gambar berikut

Aplikasi Mobile (Android)

If-unpas Fajar

Pilih next, maka akan muncul windows seperti berikut

Windows diatas merupakan bagian untuk memilih tipe android manakag program kita dapat dijalankan. Untuk program ini pilihlah android 2.2 dengan Api min 8. Lalu, pilih next.

Aplikasi Mobile (Android)

If-unpas Fajar

Berikutnya akan muncul windows baru untuk memasukan activity, package, min sdk. Isilah sesuai dengan gambar dibawah, untuk min sdk sesuaikan dengan tipe android yang kita gunakan karena kita menggunakan android 2.2 dengan api min 8, maka min sdk dari aplikasi kita adalah 8

Pilih finish, maka akan terbentuk project baru seperti gambar dibawah

Aplikasi Mobile (Android)

If-unpas Fajar

Pertama-tama yang kita lakukan adalah membuat tampilan layout, dengan cara buka res/layout/main.xml. maka akan muncul tab berikut

Dibagian bawah terdapat dua tab yaitu graphical layout dan main.xml. graphical layout digunakan untuk memudahkan desain layout karena graphical layout sudah menggunakan fasilitas drag&drop, sedangkan main.xml masih menggunakan text-based. Buatlah desain layout seperti dibawah ini

Aplikasi Mobile (Android)

If-unpas Fajar

Caranya dengan tariklah komponen-komponen yang ada disebelah kiri ke dalam form yang ada disebelah kanan. Lebih jelas lihatlah gambar yang ada dibawah

Pertama tariklah komponen textview yang ada di listgroup from widgets ke dalam form yang ada di sebelah kanan, lalu tarik textfield yang ada di listgroup textfield kedalam form. Lakukan hingga terlihat seperti tampilan diatas Setelah itu pilihlah tab main.xml untuk merubah properties komponen-komponen. Maka akan muncul source seperti ini
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> <EditText android:id="@+id/editText1" android:layout_width="match_parent"

Aplikasi Mobile (Android)

If-unpas Fajar
android:layout_height="wrap_content" > <requestFocus /> </EditText> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> <EditText android:id="@+id/editText2" android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout>

Bagian model (.java) akan mengenali komponen-komponen yang ada di layout (main.xml) base on id masing-masing komponen. Oleh karena itu rubahlah properties komponen seperti dibawah ini Untuk textview ubahlah android:text sesuai dengan fungsi dari label tersebut, karena kita akan membuat form login maka ubahlah textnya menjadi username dan password. Lihatlah contoh dibawah ini <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Username" /> lakukan untuk textview yang lainnya. Untuk komponen EditText rubahlah id dari komponen EditText seperti dibawah ini <EditText android:id="@+id/edUser" android:layout_width="match_parent" android:layout_height="wrap_content" > <requestFocus /> </EditText> Lalu rubahlah komponen id TextView lainnya menjadi edPass <EditText android:id="@+id/edPass" android:layout_width="match_parent" android:layout_height="wrap_content" />

Aplikasi Mobile (Android)

If-unpas Fajar

Terakhir rubahlah properties button seperti dibawah ini

<Button android:id="@+id/btnLogin" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Login" android:onClick="getNotif"/>

pada properties button kta menambahkan tag onClick, onClick digunakan untuk set behavior dari komponen button tersebut. Pada properties diatas berarti saat menekan button tersebut maka program akan menjalankan method getNotif. setelah itu klik save, agar semua perubahan tersebut dikenali pada .java. sekarang bukalah LoginApp.java, disinilah kita dapat menuliskan lojik proses aplikasi kita isilah Login.java dengan script dibawah ini public class LoginApp extends Activity { /** Called when the activity is first created. */ //Untuk mendeklarasikan komponen yang digunakan Button bLogin; EditText eUser; EditText ePass;

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);

//Untuk menghubungkan antara komponen yang ada di layout (main.xml) dengan komponen //yang ada pada form ini bLogin = (Button) findViewById(R.id.btnLogin);

Aplikasi Mobile (Android)

If-unpas Fajar

eUser = (EditText) findViewById(R.id.edUser); ePass = (EditText) findViewById(R.id.edPass); }

public void getNotif(View view){ String sUser = eUser.getText().toString(); String sPass = ePass.getText().toString();

if (sUser.equalsIgnoreCase("admin") && sPass.equalsIgnoreCase("1234")){ Toast.makeText(getBaseContext(), Toast.LENGTH_SHORT).show(); } else { Toast.makeText(getBaseContext(), "Maaf, user dengan "+ sUser + " dan password "+ sPass +" tidak dikenali", Toast.LENGTH_SHORT).show(); } } } Setelah itu save dan kita coba jalankan pada emulator dengan cara klik kanan pada project aplikasi kita. Lalu pilihlah run as/android application "Selamat anda berhasil login !!!",

Aplikasi Mobile (Android)

If-unpas Fajar

Maka akan muncul emulator android seperti dibawah ini

Aplikasi Mobile (Android)

If-unpas Fajar

Tugas Buatlah aplikasi untuk menghitung luas persegi panjang. Dimana rumus persgi panjang = panjang x lebar. Desain layout untuk aplikasi ini seperti dibawah ini

Aplikasi Mobile (Android)

If-unpas Fajar

Tampilkan hasil dari luas persegi panjang didalam EditText hasil. Kumpulkan dalam bentuk softcopy file project