Modul Aplikasi Mobile Ke-2
-
Upload
ipih-samiang -
Category
Documents
-
view
35 -
download
0
Transcript of Modul Aplikasi Mobile Ke-2
-
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
-
Aplikasi Mobile (Android)
If-unpas
Fajar
android:layout_height="wrap_content" >
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
lakukan untuk textview yang lainnya. Untuk komponen EditText rubahlah id dari komponen EditText
seperti dibawah ini
Lalu rubahlah komponen id TextView lainnya menjadi edPass
-
Aplikasi Mobile (Android)
If-unpas
Fajar
Terakhir rubahlah properties button seperti dibawah ini
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(), "Selamat anda berhasil login !!!",
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
-
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