045 - Nabila Meinisya Sahira - Week12

LAPORAN
PRAKTIKUM PEMROGRAMAN KOMPUTER

MODUL 11 – ANDROID MASTER-DETAIL FLOW
Pelaksanaan Praktikum
Hari: Senin Tanggal: 24 Mei 2021 Jam ke: 9-10
Oleh:
Nabila Meinisya Sahira
NIM: 081911733045
Dosen Pembimbing : Alfian Pramudita Putra, S.T.,M.Sc.
PRODI TEKNIK BIOMEDIS

FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS AIRLANGGA
2021
A. Tujuan :
1. Mengetahui konsep Master-Detail Flow
2. Menggunakan Master-Detail Tamplate
B. Dasar Teori
1. Konsep Dasar Detail Flow

1.1 Mengetahui konsep Master Detail Flow
Master-Detail flow adalah konsep desain tampilan yang akan memfasilitasi
beberapa jendela (windows) dalam satu aplikasi. Ini dilakukan menggunakan
sebuah daftar (list) pilihan (yang akan menjadi Master list) dan akan selalu bisa
dipilih oleh pengguna. Selanjutnya ketika sebuah pilihan ditentukan, maka jendela
informasi tambahan yang berhubungan dengan pilihan itu akan ditampilkan ke
pengguna (dalam bentuk panel Detail). Dengan menggunakan Master-Detail Flow,
kita dapat memfasilitasi tampilan/user interface lebih dari satu seperti pada Gambar
42. Pada gambar tersebut terlihat bahwa ada satu tampilan halaman utama (Master
list) dari aplikasi. Kemudian dari tampilan tersebut kita bisa memilih tampilan ke-
1,tampilan ke-2, dan tampilan ke-3. Ketiga tampilan tersebut adalah panel Detail
dari aplikasi. Fasilitas semacam ini diperlukan ketika program yang dibuat sudah
menjadi kompleks. Di mana satu tampilan saja tidak cukup untuk mengakomodasi
keseluruhan business logic dari program. Untuk memfasilitasi tersebut kita dapat
menggunakan Master-Detail Flow.
2. User Interface Flow Desaign
Sebelum membuat program kita perlu mendesain terlebih dahulu aplikasi yang
akan kita buat sebagaimana pada tahapan SDLC. Tujuan aplikasi yang akan dibuat
adalah untuk menampilkan tampilan dari tiga buah file xml yang berbeda-beda.. Ini
kurang lebih sama Pemrograman Android dengan Menggunakan Eclipse dan StarUML
dibuat. Penjelasan sekilas tentang Class Diagram tersebut dapat dilihat dari tiga class
yang utama. Layout List Activity merupakan Activity Class dari Master List.
Kemudian Layout Detail Activity adalah Activity Class dari panel Detail. Kedua file
activity tersebut tidak diubah. Perubahan hanya ada pada Layout Detail Fragment.
Class yang terakhir ini yang mengatur perubahan tampilan dari panel Detail. Di sini
dari sebelumnya yang hanya menggunakan satu file tampilan, fragment_layout detail,
diubah sehingga menggunakan tiga file tampilan. Dua tambahan file-nya adalah
fragment_ layout2 dan fragment_layout3.
3. Create Android Application
Setelah membuat desain, langkah selanjutnya adalah pembuatan aplikasi. Untuk
pembuatan aplikasinya, perlu diperhatikan bahwa Master- Detail Flow hanya ada sejak
API 11. Untuk itu, perlu ditentukan minimum SDK dan Target SDK yang akan
digunakan. Untuk kompilasinya, kita dapat menggunakan API yang lebih tinggi
sebagaimana di bahas pada langkah pertama. Selain dari API yang dibutuhkan, perlu
diperhatikan juga ketika mencapai tahap Activity karena setting Master-Detail Flow ada
pada tahap tersebut. Itu dijelaskan di langkah keempat. Terakhir untuk penamaan dari
objek seperti pada langkah kelima, digunakan tampilan agar sesuai dengan tujuan dari
aplikasi. Setelah membuat desain, langkah selanjutnya adalah pembuatan aplikasi.
Untuk pembuatan aplikasinya, perlu diperhatikan bahwa Master- Detail Flow hanya ada
sejak API 11. Untuk itu, perlu ditentukan minimum SDK dan Target SDK yang akan
aplikasi. Setelah membuat desain, langkah selanjutnya adalah pembuatan aplikasi.
Untuk pembuatan aplikasinya, perlu diperhatikan bahwa Master- Detail Flow hanya ada
sejak API 11. Untuk itu, perlu ditentukan minimum SDK dan Target SDK yang akan
aplikasi.berikut langkah langkahnya
1. File-New-Android Application
• Enter App name : MasterDetail
• Package Name : com.example.masterdetail
• Minimum required SDK : API 14
• Target SDK : API 18
• Compile With : API 19
• Theme : Holo Light and Dark Action Bar
2. Klik next dan next
3. Di Configure Launcher
• Pilih text dibagian Foreground
• Ketikkan MD di bagian Text
• Klik next
4. Di bagian Create Activity
• Pilih Master/Detail Flow
• Klik next
5. Di bagian Master/Detail Flow
• Isikan Layout untuk Object Kind
• Isikan Layouts untuk Object Kind Plural
• Klik Finish
4. Run Program
1. Sebelum menjalankan program,pastikan telah ada Virtual Device dengan
API Level di atas 14.
2. Jika belum ada tambahkan Virtual Device seperti pada modul 7, langkah
2.2 membuat virtual device :
• Isikan nama phone, PHONE
• Pilih Nexus One 3.7 “ pada Device
• Target Android 4.4.2-API Level 19
3. Kemudian jalankan program dengan menekan panel dibawah di sebelah
tombol Run. Sehingga akan muncul android simulator seperti gambar
dibawah:
C. Hasil dan pembahasan
1. Rubah Program di atas dengan menambahkan tombol pada layout
fragment_layout2.xml. ikuti Langkah-langkah pada modul 7.
1) Codingan
- Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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="match_parent"
android:background="@drawable/c85c2ad73736226e5e3d266574190e25"
android:hapticFeedbackEnabled="false" tools:context=".MainActivity">
<TextView
android:layout_width="365dp"
android:layout_height="207dp"
android:fontFamily="@font/abril_fatface"
android:text="Biomedical Engeenering Universitas Airlangga"
android:textColor="#FFFFFF"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.652"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.129" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click here"
app:backgroundTint="#3E0505"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
</androidx.constraintlayout.widget.ConstraintLayout>
- MainActivity.java
package com.example.masterdetail1;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View; import
android.widget.Button;
public class MainActivity extends AppCompatActivity { private
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button =(Button)findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
openActivity2();
}
});
}
public void openActivity2(){
Intent intent=new Intent(this,MainActivity2.class);
startActivity(intent);
}
}
- activity_main1.xml
android:background="#290E40"
tools:context=".MainActivity2">
<ImageView
android:id="@+id/imageView"
android:layout_width="334dp"
android:layout_height="201dp"
app:layout_constraintVertical_bias="0.296"
app:srcCompat="@drawable/_bced6c4328504ccf1df07ccfc5682a7" />
<TextView
android:id="@+id/textView"
android:fontFamily="sans-serif-smallcaps"
android:text="Welcome To Computer Programming"
android:textColor="#F1EAEA" android:textSize="18sp"
- MainActivity2.java
public class MainActivity2 extends AppCompatActivity {

@Override
setContentView(R.layout.activity_main2);
}
}
2) Tampilan Program
Tampilan awal
Layout 2
PEMBAHASAN
Pada tugas satu ini membahas mengenai penambahan tombol pada layout.
Dimana Master-Detail flow adalah konsep desain tampilan yang akan memfasilitasi
beberapa jendela (windows) dalam satu aplikasi. Dengan menggunakan Master Detail
Flow, kita dapat menfasilitasi tampilan/user inerface lebih dari satu. Ini diperlukan
ketika program yang dibuat menjadi kompleks. Caranya yaitu dengan membuat project
baru lalu memilih empty project dengan menggunakan codingan Activity_main.xml
dan MainActivity.java. Menambahkan tombol button pada Activity_main.xml dan
MainActivity.java untuk membuat tobol dapat di running. Untuk membuat tampilan
kedua ketika tombol button di klick yaitu dengan menklik app lalu java dan akan
muncul com.example.masterdetail lalu klik kanan dan menklik new lalu mengklik
activity dan memilih empty activity. Setelah itu menggunakan codingan seperti diatas
dan running program terlihat seperti tampilan awal dan Ketika mengklik tombol “click
here” maka progtam akan membuka layout 2. Hal tersebut dikarenakan menggunakan
button pada layout dan codingannya sehingga untuk layout 2 akan terpanggil jika button
di klik. Untuk emulator menggunakan pixel 4 API 30 agar program dapat di running
dengan sempurna.
2. Buat program di modul 9 dengan tampilan Master/Detail Flow

1) Codingan
- ItemDetailFragment.java
import android.app.Activity;
import com.google.android.material.appbar.CollapsingToolbarLayout; import
androidx.fragment.app.Fragment;
import android.text.Layout;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.example.masterdetail2.dummy.DummyContent;
/**
* A fragment representing a single Item detail screen.
* This fragment is either contained in a {@link ItemListActivity}
* in two-pane mode (on tablets) or a {@link ItemDetailActivity}
* on handsets.
*/
public class ItemDetailFragment extends Fragment {
/**
* The fragment argument representing the item ID that this
fragment
* represents.
*/
public static final String ARG_ITEM_ID = "item_id";
/**
* The dummy content this fragment is presenting.
*/
private DummyContent.DummyItem mItem;
/**
* Mandatory empty constructor for the fragment manager to
instantiate the
* fragment (e.g. upon screen orientation changes).
*/
public ItemDetailFragment() {
}
@Override
public void onCreate(Bundle savedInstanceState) {
if (getArguments().containsKey(ARG_ITEM_ID)) {
// Load the dummy content specified by the fragment
// arguments. In a real-world scenario, use a Loader
// to load content from a content provider. mItem
=
DummyContent.ITEM_MAP.get(getArguments().getString(ARG_ITEM_ID));
Activity activity = this.getActivity();

CollapsingToolbarLayout appBarLayout =
(CollapsingToolbarLayout) activity.findViewById(R.id.toolbar_layout); if
(appBarLayout != null) {
appBarLayout.setTitle(mItem.content);
}
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup
container,
Bundle savedInstanceState) {
View rootView;
// Show the dummy content as text in a TextView. if

(mItem.id.endsWith("2")) {
rootView=inflater.inflate(R.layout.activity_activity2,container, false);
}
else if (mItem.id.endsWith("3")){
rootView=inflater.inflate(R.layout.activity_activity3,container,false)
;
}
else{
rootView=inflater.inflate(R.layout.activity_activity1,container,false)
;
}
return rootView;
}
}
- DummyContetnt.java
{
/**
* An array of sample (dummy) items.
*/
public static final List<DummyItem> ITEMS = new
ArrayList<DummyItem>();
/**
* A map of sample (dummy) items, by ID.
*/
public static final Map<String, DummyItem> ITEM_MAP = new
HashMap<String, DummyItem>();
static {
// Add some sample items.
addItem(new DummyItem("1", "SEMESTER 1", "NABILA MEINISYA S
(045)"));
addItem(new DummyItem("2","SEMESTER 2", "NABILA MEINISYA S
(045)"));
addItem(new DummyItem("3", "SEMESTER 3", "NABILA MEINISYA S
(045)"));
}
private static void addItem(DummyItem item) {

ITEMS.add(item);
ITEM_MAP.put(item.id, item);
}
private static DummyItem createDummyItem(int position) { return

new DummyItem(String.valueOf(position), "Item " +
position, makeDetails(position));
}
private static String makeDetails(int position) { StringBuilder builder =

new StringBuilder(); builder.append("Details about Item:
").append(position); for (int i = 0; i < position; i++) {
builder.append("\nMore details information here.");
}
return builder.toString();
}
/**
* A dummy item representing a piece of content.
*/
public static class DummyItem {
public final String id; public final
String content; public final String
details;
public DummyItem(String id, String content, String details) { this.id =

id;
this.content = content;
this.details = details;
}
@Override
public String toString() {
return content;
}
}
}
- Activity1.java
public class activity1 extends AppCompatActivity {
@Override
setContentView(R.layout.activity_activity1);
}
}
- activity2.java
@Override
}
}
- activity3.java
@Override
}
}
- activity_activity1.xml
tools:context=".activity1">
<TextView
android:id="@+id/textView52"
android:text="2"
android:textColor="#040303"
app:layout_constraintTop_toBottomOf="@+id/textView53"
<TextView
android:text="2"
<TextView
android:layout_height="wrap_content" android:text="Fisika
Dasar 1" android:textColor="#0E0E0E"
app:layout_constraintEnd_toStartOf="@+id/textView57"
<TextView
android:text="SKS"
<TextView
android:text="2"
<TextView
android:layout_height="wrap_content" android:text="Bahasa
Inggris 1" android:textColor="#100F0F"
<TextView
android:layout_height="wrap_content" android:text="MATA
KULIAH" android:textColor="#090909"
<TextView
android:text="Kalkulus 1" android:textColor="#151414"
<TextView
android:layout_height="wrap_content" android:text="Biologi
Dasar 1" android:textColor="#0B0A0A"
<TextView
android:text="2"
<TextView
android:text="3"
<TextView
android:layout_height="wrap_content" android:text="Kimia
Dasar 1" android:textColor="#151515"
<TextView
android:text="2"
<TextView
Indonesia" android:textColor="#101010"
<TextView
android:layout_height="wrap_content" android:text="IP
SEMESTER : 3.6" android:textColor="#050505"
<TextView
android:layout_marginTop="44dp" android:text="IPK :
3.6" android:textColor="#090808"
- activity_activity2.xml
tools:context=".activity1"
tools:layout_editor_absoluteX="116dp"
tools:layout_editor_absoluteY="35dp">
<TextView
android:text="2"
<TextView
android:text="2"
<TextView
android:layout_height="wrap_content" android:text="Fisika
Dasar 2" android:textColor="#0E0E0E"
<TextView
android:text="SKS"
<TextView
android:text="2"
<TextView
android:text="Kewarganegaraan"
android:textColor="#100F0F"
<TextView
<TextView
android:text="Kalkulus 2" android:textColor="#151414"
<TextView
android:layout_height="wrap_content" android:text="Biologi
Dasar 2" android:textColor="#0B0A0A"
<TextView
android:text="2"
<TextView
android:text="3"
<TextView
android:layout_height="wrap_content" android:text="Kimia
Dasar 2" android:textColor="#151515"
<TextView
android:text="2"
<TextView
android:layout_height="wrap_content" android:text="Agama
Islam" android:textColor="#101010"
<TextView
android:text="IP SEMESTER : 3.8"
<TextView
android:layout_marginTop="44dp" android:text="IPK :
3.7" android:textColor="#090808"
- Activity_activity3.xml
tools:context=".activity1"
tools:layout_editor_absoluteX="-182dp"
tools:layout_editor_absoluteY="-105dp">
<TextView
android:text="2"
<TextView
android:text="2"
<TextView
android:layout_height="wrap_content" android:text="Anatomi
Manusia" android:textColor="#0E0E0E"
<TextView
android:text="SKS"
<TextView
android:text="2"
<TextView
android:layout_height="wrap_content" android:text="Ilmu
Bahan" android:textColor="#100F0F"
<TextView
<TextView
android:text="Matematika Teknik 2"
<TextView
android:text="Rangkaian Listrik"
android:textColor="#0B0A0A"
<TextView
android:text="2"
<TextView
android:text="3"
<TextView
android:text="Elektronika Analog"
<TextView
android:text="2"
<TextView
Inggris 2" android:textColor="#101010"
<TextView
android:layout_height="wrap_content" android:text="IP
SEMESTER : 3.85" android:textColor="#050505"
<TextView
android:text="IPK : 3.64"
2) Tampilan Program
Tampilan awal Semester 1
Semester 2 Semester 3
PEMBAHASAN
Pada tugas dua ini membahas mengenai pembuatan program pada modul 9
dengan menggunakan master/detail flow. Dimana Master-Detail flow adalah konsep
desain tampilan yang akan memfasilitasi beberapa jendela (windows) dalam satu
aplikasi. Master-detail flow adalah konsep desain interface yang menggunakan sebuah
daftar/list pilihan (yang menjadi master list) yang akan ditampilkan ke user. Ketika
sebuah pilihan dipilih, informasi tambahan yang berhubungan dengan pilihan itu akan
ditampilkan ke user dalam bentuk panel detail. Dengan menggunakan Master Detail
Flow, kita dapat menfasilitasi tampilan/user inerface lebih dari satu. Ini diperlukan
ketika program yang dibuat menjadi kompleks. Caranya yaitu dengan membuat project
baru lalu memilih Master/Detail Flow dengan menggunakan codingan
ItemDetailFragment.java dan DummyContetnt.java. Untuk membuat tampilan kedua,
ketiga dan keempat ketika ketika item di klick yaitu dengan menklik app lalu java dan
akan muncul com.example.masterdetail2 lalu klik kanan dan menklik new lalu
mengklik activity dan memilih empty activity sebanyak 3 kali. Setelah itu
menggunakan codingan seperti diatas dan running program terlihat seperti tampilan
awal dan Ketika mengklik item yang akan dipilih maka progtam akan membuka layout
yang dipilih tersebut. Hal tersebut dikarenakan menggunakan master detail flow
dimana Ketika ingin mengklik suatu item maka akan menampilkan informasi secara
detail. Untuk emulator menggunakan pixel 4 API 30 agar program dapat di running
dengan sempurna. Pada tugas 2 menggunakan master detail flow untuk mengetahui
jumlah ips, ipk dan mata kuliah berdasarkan semester yang dipilih. Ketika ingin
mengklik semester satu maka master detail flow akan menampilkan informasi detail
mengenai semester 1 yaitu mata kuliah, ips, dan ipk.
D. Kesimpulan
Pada praktikum kali ini membahas tentang Master/Detail Flow, dengan tujuan
untuk mengetahui konsep Master-Detail Flow dan menggunakan Master-Detail
Template. Master-detail flow adalah konsep desain interface yang menggunakan
sebuah daftar/list pilihan (yang menjadi master list) yang akan ditampilkan ke user.
Ketika sebuah pilihan dipilih, informasi tambahan yang berhubungan dengan pilihan
itu akan ditampilkan ke user dalam bentuk panel detail. Dengan menggunakan Master
Detail Flow, kita dapat menfasilitasi tampilan/user inerface lebih dari satu. Ini
diperlukan ketika program yang dibuat menjadi kompleks. Di mana satu tampilan tidak
cukup untuk mengakomodasi keseluruhan business logic program. Praktikum Android
Master-Detail Flow ini menggunakan fragment layout agar program dapat memberikan
pilihan kepada user sesuai dengan banyaknya fragmen layout xml yang sudah dibuat.
Selanjutnya dibuatlah program untuk menentukan indeks IPK mahasiswa per semester
dengan menggunakan program master digital flow ini. Dimana pada program ini dapat
menampilkan beberapa pilihan semester yang telah diinputkan.
E. Daftar Pustaka
Gargenta, M. (2011). Learning Android. Sebastopol: O'Reilly Media, Inc.
Sutanto, Erwin, dan Endah Purwanti. 2017. Modul Praktikum Pemrograman

Komputer. Surabaya: Universtas Airlangga.
F. Lampiran
1. Link file aplikasi
https://drive.google.com/drive/folders/1TDHBfFzrOx9opmrxhLMilMA1cB3G7w27?
usp=sharing
2. Screenshot full

045 - Nabila Meinisya Sahira - Week12

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

045 - Nabila Meinisya Sahira - Week12

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN

PRAKTIKUM PEMROGRAMAN KOMPUTER

Dosen Pembimbing : Alfian Pramudita Putra, S.T.,M.Sc.

PRODI TEKNIK BIOMEDIS

1. Konsep Dasar Detail Flow

public class MainActivity extends AppCompatActivity { private

public class MainActivity2 extends AppCompatActivity {

2. Buat program di modul 9 dengan tampilan Master/Detail Flow

import com.google.android.material.appbar.CollapsingToolbarLayout; import

Activity activity = this.getActivity();

// Show the dummy content as text in a TextView. if

private static void addItem(DummyItem item) {

private static DummyItem createDummyItem(int position) { return

private static String makeDetails(int position) { StringBuilder builder =

public DummyItem(String id, String content, String details) { this.id =

public class activity1 extends AppCompatActivity {

public class activity2 extends AppCompatActivity {

public class activity3 extends AppCompatActivity {

Tampilan awal Semester 1

Sutanto, Erwin, dan Endah Purwanti. 2017. Modul Praktikum Pemrograman

Anda mungkin juga menyukai