Bahan Ajar Basis Data (SQL Fundamental)

Pada posan kali ini saya akan membagikan sebuah video tutorial yang sangat mudah di pahami untuk belajar Basis Data, ini dia 

Bahan Buat Belajar,  Basis Data. 

SQL Fundamental menggunakan Oracle. 

https://www.youtube.com/watchv=okFQOuTpAa8&list=PL5W7F43o9tU6J3d4V7c5N6EsiVgZ4coSY   

semoga bermanfaat ya!!! 

kalo sempat jangan lupa subscribe ya channelnya. 

4 Pemograman perangkat Bergerak (Mengenal Layout di Pemograman Android)

Kompetensi Dasar 

3.2. Memahami teknik desain aplikasi mobile

4.2. Menyajikan desain aplikasi berbasis mobile

Materi pokok 

Mengenal Layout 

oke sebelumny saya ingin menanyakan dulu kepada temen-temen, pernahkah kalian mendengar kata-kata layout, ataukah sudah paham apa yang di maksud dengan layout ini? kalo belum nih jawabanya inget dan di catat ya... 

Layout adalah komponen dasar dalam pembentukan UI dan merupakan container utama untuk komponen-komponen lain pada tampilan aplikasi Android. Dalam satu tampilan aplikasi Android bisa terdapat lebih dari satu Layout dengan adanya sebuah file XML layout sebagai parent, dan dimungkinkan adanya nested layout dalam satu file UI XML. Penjelasan mengenai XML Layout dapat dibaca pada http://developer.android.com/guide/topics/ui/declaring-layout.html

Terdapat empat jenis Layout utama di Android :

• Linear Layout
• Relative Layout
• Frame Layout
• Grid Layout

dari 4 macam layout ini Perbedaanya adalah pada penempatan komponen-komponen (child view) di dalamya, 

sebelum saya melanjutkan penjelasan mengenai Layout ini ada baikannya kita belajar terlebih dahulu mengenai pengelolaan Tampilan di dalam Android. 

di dalam Android tampilan (Views) secara garis besar menggunakan beberapa komponen tampilan yaitu 

• TextView = digunakan untuk menampilkan text
• ImageView = digunakan untuk menampilkan image (gambar)
• Button = diunkan untuk menampilkan tombol 
• CheckBok = digunakan untuk meampilkan cek bok/pilihan
• EditText = digunakan untuk menginfutkan text kepada sistem 
• ProgressBar 
• ImageButton
• DatePicker
• WebView

Macam-macam View tersebut dapat kita kelompokkan menjadi satu wadah, yaitu dengan menggunakan ViewGroup.

sebelum ke pembahasan ViewGrup bagai mana cara membedakan tampilan pada Android coba perhatikan gambar di bawah ini 

Coba kalian tebak ada berapa type tampilan pada halaman di atas? 

oke pada gambar di bawah ini saya akan menjelaskanya 

pada gambar di atas terdapat 5 type view yakni 1 ImageView 3 TextView dan 1 Button

cukup mudah kan menebaknya. 

oke lanjut kepada pembelajaran berikutnya. 

pertanyaanya bagaimana cara menampilkan seperti gambar tampilan di atas, ? 

tampilan android biasanya di kelola oleh bahasa XML, apa itu XML? XML kepanjangan dari Extensible Markup Language, XML termasuk bahasa markup ,yang diprakarsai oleh W3C ,selaku Konsorsium World Wide Web, yang dimana XML , merupakan versi lanjutan dari HTML(Hypertext Markup Language).  Jika HTML ,hanya menampilkan  informasi ,XML memproses dan mengolah informasi. Informasi ini bisa kita sebut sebagai element.  Setiap awalan element ,akan di awali dengan tag pembuka seperti <  dan harus di akhiri dengan tag penutup />. Setiap element mempunyai detail-detail informasi ,yang biasa di sebut atribut. Masing-masing atribut , mempunyai nama dan value atau nilai. Sebagai contoh ,penerapan XML pada Aplikasi Android, untuk lebih jelasnya bisa dilihat, 

oke kembali ke bahasan utama kita yakni tampilan xml di android yang populer di gunakan di setiap aplikasi 

contoh format pengkodean XML 

• Name of view / component = TextView
• Opened using <, and closed using />; self-closing tag or separate-closing tag
• Attribute name → interface characteristic, position, etc. in Android Smartphone
• Actual values → using quotation marks (“)
• Use exact command

Oke nanti kita belajar lebih lanjut mengenai atribut dan nilai dari setiap komponen pada tampilan Android. 

Selanjutnya saya akan menjelaskan dasar yang ke2 dalam pemograman tampilan android yakni ViewGrup

Apa itu ViewGroup ?

ViewGroup merupakan SubClass dari View yang bertugas sebagai wadah dari semua instance dari View. Contohnya antara lain :

• LinearLayout
• RelativeLayout
• ListView
• GridView

Contoh Penggunaan Lainya 

• TABLE LAYOUT
• ABSOLUTE LAYOUT
• FRAME LAYOUT
• SCROLL VIEW

Daftar diatas merupakan ViewGroup yang sering dipergunakan saja. Dari pengertian di atas kita bisa simpulkan bahwa activity_main.xml mempunyai ViewGroup RelativeLayout yang berisikan TextView. 

1. Linear Layout

Contoh Tampilan Dari Linier Layout

Contoh penggunaan Kode 

Linear Layout Horizontal

<?xml version="1.0" encoding="utf-8"?>
<!-Setting the linear layout with horizontal orientation-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >
 <!-- Button1 -->
 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Simple" />
<!-- Button2 -->
 
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
        android:text="Codestuffs" />
  <!-- Button3 -->

    <Button
        android:id="@+id/button3"
        android:layout_width="0dip"
        android:layout_height="0dip"
        android:text=".com" 
        android:layout_weight="1"/>
 </LinearLayout>

Linear Layout Vertical

<?xml version="1.0" encoding="utf-8"?>
<!-Setting the linear layout with vertical orientation-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 <!-- Button1 -->
 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Simple" />
<!-- Button2 -->
 
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
        android:text="Codestuffs" />
  <!-- Button3 -->

    <Button
        android:id="@+id/button3"
        android:layout_width="0dip"
        android:layout_height="0dip"
        android:text=".com" 
        android:layout_weight="1"/>
 </LinearLayout>

Coba Kalian Uji Coba Kode Di atas di android Studio atau bisa di Android Visualizer 

Klik Di Sini  untuk menuju ke Android Visualizer 

2. Relative Layout 

Gambaran Relative Layout

Contoh Tampilan

<?xml version="1.0" encoding="utf-8"?>
<!-Setting the relative layout with horizontal orientation--><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 <!-- Button1 -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Simple"/>
<!-- Button2 -->
 
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Codestuffs"<!-- Use of rightof to place button2 to right of button 1 -->
        android:layout_toRightOf="@+id/button1"/>
 



  <!-- Button3 -->

     <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=".com"<!-- Use of below to place button3 below button 2 -->
        android:layout_below="@+id/button2"/>
 </RelativeLayout>

Coba Kalian Uji Coba Kode Di atas di android Studio atau bisa di Android Visualizer 

Klik Di Sini  untuk menuju ke Android Visualizer

untuk gambaran Layout yang lainya 

Oke uji coba kodingnya cukup sampai sini dulu nanti kita lanjutkan di pertemuan selanjutya 

dari materi ini, Coba temen-temen buat kartu nama atau kartu ucapan.

Contoh : 

Android Vs Laravel # Part 2 Membuat Aplikasi Android CRUD pada Android Studio - Mengambil Data Dari API Service Laravel

PART 1 - MENGAMBIL DATA DARI API SERVICE

Salah satu hal yang tidak boleh dilupakan saat kita mengembangkan sebuah aplikasi adalah bagaimana caranya agar aplikasi kita dapat berkomunikasi dengan jaringan internet. Hampir semua aplikasi seperti sosial media, messenger, news, dan lainnya, pasti membutuhkan koneksi internet untuk transaksi data dengan server mereka.

Pada modul sebelumnya, Anda sudah belajar membuat aplikasi yang bisa menampilkan data berupa array ke dalam RecyclerView dengan menerapkan fitur Kotlin Android Extensions, Anko Commons, dan juga Anko Layout. Sekarang saatnya Anda membuat aplikasi yang bisa menampilkan data dari sebuah API. Kita akan menggunakan API dari TheSportDB. Dengan API tersebut Anda bisa membuat aplikasi untuk menampilkan daftar tim sepak bola, jadwal pertandingan sepak bola, live score, dsb. Untuk bisa melakukan permintaan data dari sebuah API, Anda bisa menggunakan library semacam Retrofit atau yang lainnya. 

Melakukan request data ke sebuah API ketika mengembangkan aplikasi Android bisa dibilang sulit kalau kita tidak menggunakan library pihak ketiga. Anda akan berurusan dengan HttpURLConnection, BufferedReader, dan teman-temannya. Sebagai contoh ketika Anda ingin mendapatkan respon dari API, Anda perlu menuliskan kode berikut:

1.  URL url = new URL("http://www.example.com/api/");

2.     HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();

3.     try {

4.       InputStream in = new BufferedInputStream(urlConnection.getInputStream());

5.       readStream(in);

6.     } finally {

7.       urlConnection.disconnect();

8.     }

Tentunya kode di atas tidak akan cukup jika nantinya kita membutuhkan respon yang lebih spesifik. Namun Anda tidak perlu khawatir, karena Kotlin menyediakan beberapa extension functions yang bisa mempermudah dan menyederhanakan suatu fungsi. Salah satunya adalah readText, sebuah extension functions yang bisa digunakan untuk request data dari API. Fungsi tersebut cukup bagus untuk menangani permintaan data yang sederhana, namun tidak direkomendasikan jika Anda ingin melakukan permintaan data yang besar.

Untuk menerapkan fungsi readText Anda bisa membuat kelas baru, misalnya seperti berikut:

1.  class ApiRepository {

2.   

3.      fun doRequest(url: String): String {

4.          return URL(url).readText()

5.      }

6.  }

readText() akan membaca url sebagai string. Kemudian fungsi doRequest() di atas akan mengembalikan respon yang merupakan hasil request dari sebuah API.

Membuat Aplikasi Football Club

Pada latihan kali ini, Anda akan membuat sebuah aplikasi yang bisa menampilkan data dari API. Aplikasi yang akan dibuat adalah Football Club, yang memanfaatkan API dari TheSportDB untuk menampilkan daftar tim sepak bola berdasarkan liga yang telah ditentukan. Di dalam TheSportDB terdapat beberapa endpoint yang sangat mudah untuk digunakan. Untuk melihat daftar endpoint yang tersedia, Anda bisa membuka tautan berikut ini: https://www.thesportsdb.com/api.php. Aplikasi yang akan kita buat mempunyai beberapa use cases seperti berikut:

·        Pengguna dapat melihat daftar tim dalam suatu liga.

·        Aplikasi dapat menampilkan daftar nama tim dilengkapi dengan logo tim.

Kurang lebih hasil aplikasi yang diharapkan menyerupai gambar di bawah ini:

Membuat Proyek Baru

Buatlah proyek baru pada Android Studio 3.1.2. Jangan lupa aktifkan Kotlin dan Anko Support.

Menambahkan Dependensi

Kita akan membutuhkan beberapa dependensi seperti Android Support Library, Anko, dan juga Gson sebagai libraryuntuk mengubah objek menjadi JSON. Tambahkanlah semua dependensi yang dibutuhkan ke dalam build.gradle.

1.  implementation 'com.android.support:appcompat-v7:27.1.1'

2.  implementation 'com.android.support:design:27.1.1'

3.   

4.  //anko

5.  implementation "org.jetbrains.anko:anko:$anko_version"

6.  implementation "org.jetbrains.anko:anko-design:$anko_version"

7.   

8.  // RecyclerView-v7

9.  implementation "org.jetbrains.anko:anko-recyclerview-v7:$anko_version"

10. implementation "org.jetbrains.anko:anko-recyclerview-v7-coroutines:$anko_version"

11.  

12. implementation 'com.squareup.picasso:picasso:2.71828'

13. implementation 'com.google.code.gson:gson:2.8.5'

Jangan lupa untuk mensinkronisasi proyek.

Mendesain Tampilan

Selanjutnya, kita akan mendesain tampilan utama dari aplikasi. Anda perlu menambahkan sebuah RecyclerView dan beberapa komponen view lainnya seperti Spinner, SwipeRefreshLayout, ProgressBar, ImageView, dan juga TextView. Buka MainActivity dan hapus fungsi setContentView karena kita akan menggunakan Anko Layout dalam mendesain tampilan. Deklarasikan beberapa view tersebut sebagai variabel lateinit:

1.  private lateinit var listTeam: RecyclerView

2.  private lateinit var progressBar: ProgressBar

3.  private lateinit var swipeRefresh: SwipeRefreshLayout

4.  private lateinit var spinner: Spinner

lateinit digunakan untuk menginisialisasi nilai variabel sebelum Anda mengaksesnya. Kemudian tambahkan kode berikut ke dalam method onCreate:

1.  linearLayout {

2.      lparams (width = matchParent, height = wrapContent)

3.      orientation = LinearLayout.VERTICAL

4.      topPadding = dip(16)

5.      leftPadding = dip(16)

6.      rightPadding = dip(16)

7.   

8.      spinner = spinner ()

9.      swipeRefresh = swipeRefreshLayout {

10.         setColorSchemeResources(colorAccent,

11.                 android.R.color.holo_green_light,

12.                 android.R.color.holo_orange_light,

13.                 android.R.color.holo_red_light)

14.  

15.         relativeLayout{

16.             lparams (width = matchParent, height = wrapContent)

17.  

18.             listTeam = recyclerView {

19.                 lparams (width = matchParent, height = wrapContent)

20.                 layoutManager = LinearLayoutManager(ctx)

21.             }

22.  

23.             progressBar = progressBar {

24.             }.lparams{

25.                 centerHorizontally()

26.             }

27.         }

28.     }

29. }

Dengan Anko Layout di atas, Anda telah menambahkan sebuah LinearLayout sebagai parent layout yang di dalamnya terdapat beberapa view yang dibungkus dalam SwipeRefreshLayout.

Mengatur Network Service

Setelah berhasil mendesain tampilan utama dari aplikasi, kita akan membuat beberapa kelas. Fungsinya, untuk mengatur layanan jaringan (network service) yang akan digunakan untuk mendapatkan data dari server.
Tambahkan juga buildConfigField pada defaultConfig di dalam berkas build.gradle untuk menyimpan BASE_URLdan API_KEY dari TheSportDB.

1.  buildConfigField "String", "BASE_URL", "\"https://www.thesportsdb.com/\""

2.  buildConfigField "String", "TSDB_API_KEY", "\"1\""

Bangun kembali (rebuild) proyek dan buat kelas baru dengan nama ApiRespository lalu tambahkan fungsi doRequestyang di dalamnya terdapat extension functions readText untuk membaca url seperti berikut:

1.  class ApiRepository {

2.   

3.      fun doRequest(url: String): String {

4.          return URL(url).readText()

5.      }

6.  }

Kemudian buat kelas objek baru lagi dengan nama TheSportDBApi yang di dalamnya terdapat sebuah fungsi untuk menampung endpoint yang akan digunakan. Kita akan menggunakan endpoint /search_all_team.php?id=+LEAGUE_NAME untuk mendapatkan data daftar tim berdasarkan liga yang dipilih.

1.  object TheSportDBApi {

2.      fun getTeams(league: String?): String {

3.          return BuildConfig.BASE_URL + "api/v1/json/${BuildConfig.TSDB_API_KEY}" + "/search_all_teams.php?l=" + league

4.      }

5.  }

Penulisan fungsi di atas bisa juga dilakukan dengan cara yang lebih sederhana, yaitu dengan memanfaatkan fungsi Uri.Builder dari Android. Sehingga, kodenya menjadi seperti berikut:

1.  fun getTeams(league: String?): String {

2.      return Uri.parse(BuildConfig.BASE_URL).buildUpon()

3.              .appendPath("api")

4.              .appendPath("v1")

5.              .appendPath("json")

6.              .appendPath(BuildConfig.TSDB_API_KEY)

7.              .appendPath("search_all_teams.php")

8.              .appendQueryParameter("l", league)

9.              .build()

10.             .toString()

11. }

Dengan begitu kode akan terlihat lebih rapi.

Selanjutnya, Anda perlu membuat data class untuk menampung respon dari API. Untuk mengetahui respon tersebut, Anda bisa mengakses endpoint-nya pada Postman seperti gambar di bawah ini:

Setelah mengetahui respon tersebut, buatlah 2 (dua) data class berisi objek yang dibutuhkan.

 Team.Kt:

1.  data class Team(

2.          @SerializedName("idTeam")

3.          var teamId: String? = null,

4.   

5.          @SerializedName("strTeam")

6.          var teamName: String? = null,

7.   

8.          @SerializedName("strTeamBadge")

9.          var teamBadge: String? = null

10.         )

Pada data class ini, setiap objek diberi anotasi @SerializedName. Parameter (nilai) dari anotasi tersebut adalah nama yang akan digunakan pada saat mengkomersialkan dan deserializing objek. Misalnya, field teamNamedirepresentasikan sebagai strTeam di JSON.TeamResponse.Kt:

1.  data class TeamResponse(

2.          val teams: List<Team>)

Kelas ini merupakan data class yang akan menampung objek berupa list dari data class sebelumnya.

Menerapkan Business Logic

Dalam proyek ini, kita akan mencoba menerapkan MVP (Model View Presenter) sebagai pola desainnya (design pattern). MVP adalah sebuah pola desain  yang memungkinkan kita memisahkan antara logika bisnis dari aplikasi dengan view.

Untuk menerapkan MVP, kita akan membutuhkan 3 (tiga) komponen utama dari pattern tersebut yaitu pertama, Modelyang berfungsi untuk mengelola data; kedua, View untuk mengatur tampilan; dan ketiga, Presenter untuk menjembatani antara model dan view.

Sebelumnya, Anda sudah membuat model, yaitu 2 (dua) data class Team dan TeamResponse. Sekarang Anda tinggal menambahkan view dan presenter untuk melengkapinya. 

Kita akan menjadikan MainActivity sebagai view. Untuk itu, kita membutuhkan sebuah interface dan sebuah presenter. Buatlah interface baru dengan nama MainView yang berisi beberapa fungsi berikut:

1.  interface MainView {

2.      fun showLoading()

3.      fun hideLoading()

4.      fun showTeamList(data: List<Team>)

5.  }

Kemudian buat kelas baru yang akan berperan sebagai presenter yang dilengkapi dengan beberapa constructor seperti berikut:

1.  class MainPresenter(private val view: MainView,

2.                      private val apiRepository: ApiRepository,

3.                      private val gson: Gson) {

4.  }

Di dalam presenter tersebut, kita perlu menambahkan beberapa behaviour, antara lain:

·        Ketika presenter sedang menunggu respon, ProgressBar akan ditampilkan.

·        Ketika respon berhasil didapatkan, ProgressBar akan hilang dan data akan ditampilkan ke dalam view.

Untuk menerapkan behaviour di atas, buatlah fungsi getTeamList di dalam presenter tersebut:

1.  fun getTeamList(league: String?) {

2.      view.showLoading()

3.      doAsync {

4.          val data = gson.fromJson(apiRepository

5.                  .doRequest(TheSportDBApi.getTeams(league)),

6.                  TeamResponse::class.java

7.          )

8.   

9.          uiThread {

10.             view.hideLoading()

11.             view.showTeamList(data.teams)

12.         }

13.     }

14. }

Ketika fungsi di atas dijalankan, otomatis juga akan memanggil fungsi showLoading dan doAsync. Fungsi doAsyncdari Anko bisa digunakan untuk menjalankan asynchronous task. Ia akan memanggil fungsi doRequest, dan jika berhasil data akan ditampilkan oleh uiThread.

Membuat RecyclerView Adapter

Untuk menampilkan list data pada RecyclerView, kita membutuhkan sebuah adapter yang akan mengatur semua elemen pada list tersebut. Di dalam adapter ini kita perlu menambahkan sebuah holder yang akan digunakan untuk menyatukan semua data ke dalam view. Selain itu, kita juga bisa mendesain tampilan dari item list menggunakan Anko Layout di dalam adapter.

Buatlah kelas baru bernama MainAdapter dengan parameter seperti berikut:

1.  class MainAdapter (private val teams: List<Team>) {

2.   

3.  }

Setelah itu tambahkan kelas dengan nama TeamViewHolder yang mewarisi kelas RecyclerView.ViewHolder. Kelas tersebut akan kita jadikan parameter untuk kelas RecyclerView.Adapter yang kita wariskan ke kelas MainAdapter. Alhasil, strukturnya menjadi seperti ini:

1.  class MainAdapter (private val teams: List<Team>)

2.      : RecyclerView.Adapter<TeamViewHolder>(){

3.   

4.   

5.  }

6.   

7.  class TeamViewHolder(view: View) : RecyclerView.ViewHolder(view){

8.   

9.   

10.     fun bindItem(teams: Team) {

11.  

12.     }

13. }

Pada kondisi ini, kelas MainAdapter pasti akan terdeteksi sebagai suatu kesalahan. Sebabnya, kita belum menerapkan semua anggota dari kelas RecyclerView.Adapter. Tekan ALT + Enter pada baris yang eror dan terapkan semua anggotanya:

1.  class MainAdapter (private val teams: List<Te>am)

2.      : RecyclerView.Adapter<TeamViewHolder>(){

3.      override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): TeamViewHolder {

4.          TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

5.      }

6.   

7.      override fun getItemCount(): Int {

8.          TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

9.      }

10.  

11.     override fun onBindViewHolder(holder: TeamViewHolder?, position: Int) {

12.         TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

13.     }

14.  

15. }

16.  

17. class TeamViewHolder(view: View) : RecyclerView.ViewHolder(view){

18.  

19.  

20.     fun bindItem(teams: Team) {

21.  

22.     }

23. }

Masih di kelas MainAdapter kita akan mendesain tampilan dari item yang akan dimasukkan ke dalam RecyclerView. Kita perlu menambahkan sebuah TextView dan ImageView. Berikut adalah kode yang perlu ditambahkan menggunakan Anko Layout:

1.  class TeamUI : AnkoComponent<ViewGroup> {

2.      override fun createView(ui: AnkoContext<ViewGroup>): View {

3.          return with(ui) {

4.              linearLayout {

5.                  lparams(width = matchParent, height = wrapContent)

6.                  padding = dip(16)

7.                  orientation = LinearLayout.HORIZONTAL

8.   

9.                  imageView {

10.                     id = R.id.team_badge

11.                 }.lparams{

12.                     height = dip(50)

13.                     width = dip(50)

14.                 }

15.  

16.                 textView {

17.                     id = R.id.team_name

18.                     textSize = 16f

19.                 }.lparams{

20.                     margin = dip(15)

21.                 }

22.  

23.             }

24.         }

25.     }

26.  

27. }

Pada masing-masing komponen view di atas, terdapat atribut id. Ia akan eror karena kita belum mendefinisikan sebuah id value resource untuk menampung kumpulan id. Untuk menambahkannya, tekan ALT + Enter pada setiap id dan pilih create id value resource. Lalu akan muncul window seperti berikut :

Tekan OK dan atribut id akan ditambahkan ke berkasids.xml:

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

2.  <resources>

3.      <item name="team_badge" type="id" />

4.      <item name="team_name" type="id" />

5.  </resources>

Dengan begitu semua view di atas sudah bisa kita akses pada ViewHolder. Deklarasikan semua view yang dibutuhkan dengan menambahkan variabel berikut di dalam kelas TeamViewHolder:

1.  private val teamBadge: ImageView = view.find(team_badge)

2.  private val teamName: TextView = view.find(team_name)

Setelah itu kita bisa mengumpulkan objek dari data class ke masing-masing view tersebut:

1.  fun bindItem(teams: Team) {

2.      Picasso.get().load(teams.teamBadge).into(teamBadge)

3.      teamName.text = teams.teamName

4.  }

Dengan begitu, tampilan yang sudah kita desain akan ditampilkan saat method onCreateViewHolder dijalankan. 

Pada method getItemCount kita definisikan teams.size sebagai nilainya:

1.  override fun getItemCount(): Int = teams.size

Kemudian pada method onBindViewHolder tambahkan kode berikut untuk menampilkan data pada posisi yang telah ditentukan :

1.  holder.bindItem(teams[position])

Sampai di sini kita sudah selesai membuat sebuah RecyclerView adapter. Kode keseluruhan dari adapter tersebut kurang lebih seperti berikut :

1.  class MainAdapter(private val teams: List<Team>)

2.      : RecyclerView.Adapter<TeamViewHolder>() {

3.   

4.      override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): TeamViewHolder {

5.          return TeamViewHolder(TeamUI().createView(AnkoContext.create(parent.context, parent)))

6.      }

7.   

8.      override fun onBindViewHolder(holder: TeamViewHolder, position: Int) {

9.          holder.bindItem(teams[position])

10.     }

11.  

12.     override fun getItemCount(): Int = teams.size

13.  

14. }

15.  

16. class TeamUI : AnkoComponent<ViewGroup> {

17.     override fun createView(ui: AnkoContext<ViewGroup>): View {

18.         return with(ui) {

19.             linearLayout {

20.                 lparams(width = matchParent, height = wrapContent)

21.                 padding = dip(16)

22.                 orientation = LinearLayout.HORIZONTAL

23.  

24.                 imageView {

25.                     id = R.id.team_badge

26.                 }.lparams{

27.                     height = dip(50)

28.                     width = dip(50)

29.                 }

30.  

31.                 textView {

32.                     id = R.id.team_name

33.                     textSize = 16f

34.                 }.lparams{

35.                     margin = dip(15)

36.                 }

37.  

38.             }

39.         }

40.     }

41.  

42. }

43.  

44. class TeamViewHolder(view: View) : RecyclerView.ViewHolder(view){

45.  

46.     private val teamBadge: ImageView = view.find(team_badge)

47.     private val teamName: TextView = view.find(team_name)

48.  

49.     fun bindItem(teams: Team) {

50.         Picasso.get().load(teams.teamBadge).into(teamBadge)

51.         teamName.text = teams.teamName

52.     }

53. }

Menyelesaikan Aplikasi Football Club

Setelah berhasil menerapkan semuanya, untuk tahap terakhir kita perlu menerapkan presenter dan adapter yang sudah dibuat ke dalam MainActivity. Tambahkan beberapa variabel berikut:

1.  private var teams: MutableList<Team> = mutableListOf()

2.  private lateinit var presenter: MainPresenter

3.  private lateinit var adapter: MainAdapter

Lalu di dalam method onCreate, tambahkan kode berikut:

1.  adapter = MainAdapter(teams)

2.  listTeam.adapter = adapter

3.   

4.  val request = ApiRepository()

5.  val gson = Gson()

6.  presenter = MainPresenter(this, request, gson)

Setelah mendeklarasikan adapter, presenter, dan beberapa komponen yang dibutuhkan, sekarang Anda sudah bisa memanggil fungsi getTeamList yang ada pada presenter.  Fungsi tersebut membutuhkan parameter berupa string yang merupakan nama dari liga yang dipilih. Kita akan memilih nama liga tersebut dari sebuah Spinner. Deklarasikan sebuah variabel leagueName pada MainActivity:

1.  private lateinit var leagueName: String

Kemudian tambahkan kode berikut pada method onCreate untuk mengatur SpinnerAdapter:

1.  val spinnerItems = resources.getStringArray(league)

2.  val spinnerAdapter = ArrayAdapter(ctx, android.R.layout.simple_spinner_dropdown_item, spinnerItems)

3.  spinner.adapter = spinnerAdapter

Pastikan sebelumnya Anda sudah membuat Array dari nama-nama liga yang diinginkan pada berkas strings.xml:

1.  <array name="league">

2.      <item>English Premier League</item>

3.      <item>English League Championship</item>

4.      <item>German Bundesliga</item>

5.      <item>Italian Serie A</item>

6.      <item>French Ligue 1</item>

7.      <item>Spanish La Liga</item>

8.  </array>

Untuk memanggil fungsi getListTeam pada presenter ketika nama liga dipilih, Anda bisa memanggilnya di dalam onItemSelectedListener pada Spinner tersebut:

1.  spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {

2.      override fun onItemSelected(parent: AdapterView<*>, view: View, position: Int, id: Long) {

3.          leagueName = spinner.selectedItem.toString()

4.          presenter.getTeamList(leagueName)

5.      }

6.   

7.      override fun onNothingSelected(parent: AdapterView<*>) {}

8.  }

Fungsi getListTeam memerlukan semua fungsi yang ada pada interface MainView. Oleh karena itu, MainActivity perlu menerapkan interface tersebut beserta semua anggotanya. 

1.  class MainActivity : AppCompatActivity(), MainView {

2.   

3.      private var teams: MutableList<Team> = mutableListOf()

4.      private lateinit var presenter: MainPresenter

5.      private lateinit var adapter: MainAdapter

6.      private lateinit var listTeam: RecyclerView

7.      private lateinit var progressBar: ProgressBar

8.      private lateinit var swipeRefresh: SwipeRefreshLayout

9.      private lateinit var spinner: Spinner

10.     private lateinit var leagueName: String

11.  

12.  

13.     override fun onCreate(savedInstanceState: Bundle?) {...}

14.  

15.  

16.     override fun showLoading() {

17.         TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

18.     }

19.  

20.     override fun hideLoading() {

21.         TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

22.     }

23.  

24.     override fun showTeamList(data: List<Team>) {

25.         TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

26.     }

27.  

28. }

Kita belum menerapkan apapun pada ketiga anggota dari interface MainView tersebut. Method showLoading dan hideLoading akan kita gunakan untuk mengatur ProgressBar. Oleh karena itu, kita akan membuat extensions functionbaru untuk melakukannya. Buatlah file Utils.Kt dan tambahkan 2 (dua) fungsi berikut:

1.  fun View.visible() {

2.      visibility = View.VISIBLE

3.  }

4.   

5.  fun View.invisible() {

6.      visibility = View.INVISIBLE

7.  }

Fungsi visible() digunakan untuk menampilkan ProgressBar, sedangkan invisible() untuk menyembunyikannya. Kita bisa menerapkannya pada method showLoading dan hideLoading:

1.  override fun showLoading() {

2.      progressBar.visible()

3.  }

4.   

5.  override fun hideLoading() {

6.      progressBar.invisible()

7.  }

Kemudian pada method showTeamList kita perlu menambahkan kode berikut untuk memasukkan semua data yang didapatkan dari server kedalam data class Team:

1.  override fun showTeamList(data: List<Team>) {

2.      swipeRefresh.isRefreshing = false

3.      teams.clear()

4.      teams.addAll(data)

5.      adapter.notifyDataSetChanged()

6.  }

Pada kelas MainActivity, kita juga memiliki SwipeRefreshLayout yang belum kita terapkan fungsinya. Komponen ini akan kita gunakan untuk melakukan penyegaran data pada aplikasi. Untuk menerapkannya, tambahkan fungsi onRefresh dan panggil presenter.getTeamList() di dalamnya.

1.  swipeRefresh.onRefresh {

2.      presenter.getTeamList(leagueName)

3.  }

Jangan lupa untuk menambahkan swipeRefresh.isRefreshing = false ketika data sudah berhasil diperbarui.

Selesai, keseluruhan kode pada MainActivity kurang lebih seperti berikut:

1.  class MainActivity : AppCompatActivity(), MainView {

2.      private var teams: MutableList<Team> = mutableListOf()

3.      private lateinit var presenter: MainPresenter

4.      private lateinit var adapter: MainAdapter

5.      private lateinit var listTeam: RecyclerView

6.      private lateinit var progressBar: ProgressBar

7.      private lateinit var swipeRefresh: SwipeRefreshLayout

8.      private lateinit var spinner: Spinner

9.      private lateinit var leagueName: String

10.  

11.     override fun onCreate(savedInstanceState: Bundle?) {

12.         super.onCreate(savedInstanceState)

13.         linearLayout {

14.             lparams (width = matchParent, height = wrapContent)

15.             orientation = LinearLayout.VERTICAL

16.             topPadding = dip(16)

17.             leftPadding = dip(16)

18.             rightPadding = dip(16)

19.  

20.             spinner = spinner ()

21.             swipeRefresh = swipeRefreshLayout {

22.                 setColorSchemeResources(colorAccent,

23.                         android.R.color.holo_green_light,

24.                         android.R.color.holo_orange_light,

25.                         android.R.color.holo_red_light)

26.  

27.                 relativeLayout{

28.                     lparams (width = matchParent, height = wrapContent)

29.  

30.                     listTeam = recyclerView {

31.                         lparams (width = matchParent, height = wrapContent)

32.                         layoutManager = LinearLayoutManager(ctx)

33.                     }

34.  

35.                     progressBar = progressBar {

36.                     }.lparams{

37.                         centerHorizontally()

38.                     }

39.                 }

40.             }

41.         }

42.  

43.         val spinnerItems = resources.getStringArray(league)

44.         val spinnerAdapter = ArrayAdapter(ctx, android.R.layout.simple_spinner_dropdown_item, spinnerItems)

45.         spinner.adapter = spinnerAdapter

46.  

47.         adapter = MainAdapter(teams)

48.         listTeam.adapter = adapter

49.  

50.         val request = ApiRepository()

51.         val gson = Gson()

52.         presenter = MainPresenter(this, request, gson)

53.  

54.         spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {

55.             override fun onItemSelected(parent: AdapterView<*>, view: View, position: Int, id: Long) {

56.                 leagueName = spinner.selectedItem.toString()

57.                 presenter.getTeamList(leagueName)

58.             }

59.  

60.             override fun onNothingSelected(parent: AdapterView<*>) {}

61.         }

62.  

63.         swipeRefresh.onRefresh {

64.             presenter.getTeamList(leagueName)

65.         }

66.     }

67.  

68.     override fun showLoading() {

69.         progressBar.visible()

70.     }

71.  

72.     override fun hideLoading() {

73.         progressBar.invisible()

74.     }

75.  

76.     override fun showTeamList(data: List<Team>) {

77.         swipeRefresh.isRefreshing = false

78.         teams.clear()

79.         teams.addAll(data)

80.         adapter.notifyDataSetChanged()

81.     }

82.  

83. }

Terakhir, pastikan Anda sudah 
menambahkan internet permission pada AndroidManifest:

1.  <uses-permission android:name="android.permission.INTERNET"/>