Kali ini kita akan membuat Aplikasi Android sederhana dengan studi kasusnya “Portal Berita”. Untuk berita yang akan di tampilkan adalah bersumber dari database MySQL yang akan kita buat. Disini kita akan belajar bagaimana caranya bermain API di Android.
Kita akan menggunakan Java sebagai programming languagenya, tapi penulis juga menyediakan Source code versi Kotlinnya di akhir Artikel.
Pengantar
Perlu diketahui kita akan melakukan koding pada 2 sisi yaitu sisi Server dan sisi Client.
Untuk sisi server kita akan menggunakan bahasa PHP “Gunanya untuk apa ?” agar kita dapat mengolah data yang ada pada database MySQL untuk ditampilkan dalam format data JSON, nah data ini yang kemudian akan kita sebut dengan istilah response.
“Kenapa Harus JSON ?” karena seperti yang teman-teman ketahui setiap bahasa pemrograman, setiap plaform mempunyai aturan dan bentuk data yang berbeda-beda. JSON ini adalah salah satu bentuk data yang disupport hampir semua bahasa program dan platform.
Beralih ke sisi Client yaitu Android. Pada sisi Android kita akan mengirim request ke URL API untuk mendapatkan response berupa data JSON, nah data JSON ini akan kita tampung kedalam sebuah Model agar data tersebut dapat kita gunakan.
Masih di Android, untuk memudahkan proses pengiriman request API dan storing json data ke Model kita akan menggunakan library Retrofit2 dan Retrofit Gson-Converter.
Persiapan Server API
Seperti yang sudah dijelaskan sebelumnya kita akan menggunakan PHP sebagai Server API. Scriptnya sudah saya
sediakan, silahkan buka link berikut :
//github.com/drawrs/simple-api-portal-berita
Download kemudian Ekstrak di root web server masing-masing. Kalau saya menggunakan XAMPP berarti saya letakan /xampp/htdocs.
Didalam script tersebut terdapat database mysql yang telah di eksport menjadi file .sql dan terdapat file php yang akan memberikan kita data-data berita dalam bentuk response JSON.
Database
Buatlah sebuah database baru, kita beri nama tb_portal_berita kemudian import file .sql yang ada dalam folder hasil ekstrakan tadi. Jika kamu belum tau cara membuat database klik disini dan cara import database disini.
Setting Koneksi.php
Silahkan sesuaikan konfigurasi database di pada file koneksi.php
Sekarang pindah ke activity_main.xml sesuaikan kodenya menjadi seperti berikut :
Baik tahap layouting telah selesai.
Activity Logic
Berikutnya kita akan mengkoding logika untuk activity kita saat ini yaitu MainActivity. Disini kita akan melakukan inisialisasi widget sampai mengirim request ke API kemudian menampilkanya kedalam RecyclerView. Silahkan sesuaikan kode pada MainActivity menjadi seperti berikut :
MainActivity.java
package com.khilman.www.aplikasiportalberita;import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.widget.Toast;
import com.khilman.www.aplikasiportalberita.network.ApiServices;
import com.khilman.www.aplikasiportalberita.network.InitRetrofit;
import com.khilman.www.aplikasiportalberita.response.BeritaItem;
import com.khilman.www.aplikasiportalberita.response.ResponseBerita;
import java.util.List;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
public class MainActivity extends AppCompatActivity {
// Deklarasi Widget
private RecyclerView recyclerView;
@Override
protected void onCreate[Bundle savedInstanceState] {
super.onCreate[savedInstanceState];
setContentView[R.layout.activity_main];
// Inisialisasi Widget
recyclerView = [RecyclerView] findViewById[R.id.rvListBerita];
// RecyclerView harus pakai Layout manager
recyclerView.setLayoutManager[new LinearLayoutManager[this]];
// Eksekusi method
tampilBerita[];
}
private void tampilBerita[] {
ApiServices api = InitRetrofit.getInstance[];
// Siapkan request
Call beritaCall = api.request_show_all_berita[];
// Kirim request
beritaCall.enqueue[new Callback[] {
@Override
public void onResponse[Call call, Response response] {
// Pasikan response Sukses
if [response.isSuccessful[]]{
Log.d["response api", response.body[].toString[]];
// tampung data response body ke variable
List data_berita = response.body[].getBerita[];
boolean status = response.body[].isStatus[];
// Kalau response status nya = true
if [status]{
// Buat Adapter untuk recycler view
AdapterBerita adapter = new AdapterBerita[MainActivity.this, data_berita];
recyclerView.setAdapter[adapter];
} else {
// kalau tidak true
Toast.makeText[MainActivity.this, "Tidak ada berita untuk saat ini", Toast.LENGTH_SHORT].show[];
}
}
}
@Override
public void onFailure[Call call, Throwable t] {
// print ke log jika Error
t.printStackTrace[];
}
}];
}
}
AdapterBerita.java
Kamu akan mendapati error / merah pada bagian AdapterBerita karena kita belum membuat Class Adapter tersebut. Silahkan buat satu buah class baru dengan nama AdapterBerita kemudian sesuaikan kodenya menjadi seperti berikut.
package com.khilman.www.aplikasiportalberita;import android.content.Context;
import android.content.Intent;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import com.khilman.www.aplikasiportalberita.response.BeritaItem;
import com.squareup.picasso.Picasso;
import java.util.List;
/**
* Created by Rizal Hilman on 12/02/18.
* www.khilman.com
*/class AdapterBerita extends RecyclerView.Adapter {
// Buat Global variable untuk manampung context
Context context;
List berita;
public AdapterBerita[Context context, List data_berita] {
// Inisialisasi
this.context = context;
this.berita = data_berita;
}
@Override
public MyViewHolder onCreateViewHolder[ViewGroup parent, int viewType] {
// Layout inflater
View view = LayoutInflater.from[context].inflate[R.layout.berita_item, parent, false];
// Hubungkan dengan MyViewHolder
MyViewHolder holder = new MyViewHolder[view];
return holder;
}
@Override
public void onBindViewHolder[MyViewHolder holder, final int position] {
// Set widget
holder.tvJudul.setText[berita.get[position].getJudulBerita[]];
holder.tvTglTerbit.setText[berita.get[position].getTanggalPosting[]];
// Dapatkan url gambar
final String urlGambarBerita = "//192.168.20.92/portal_berita/images/" + berita.get[position].getFoto[];
// Set image ke widget dengna menggunakan Library Piccasso
// krena imagenya dari internet
Picasso.with[context].load[urlGambarBerita].into[holder.ivGambarBerita];
// Event klik ketika item list nya di klik
holder.itemView.setOnClickListener[new View.OnClickListener[] {
@Override
public void onClick[View view] {
// Mulai activity Detail
Intent varIntent = new Intent[context, DetailActivity.class];
// sisipkan data ke intent
varIntent.putExtra["JDL_BERITA", berita.get[position].getJudulBerita[]];
varIntent.putExtra["TGL_BERITA", berita.get[position].getTanggalPosting[]];
varIntent.putExtra["PNS_BERITA", berita.get[position].getPenulis[]];
varIntent.putExtra["FTO_BERITA", urlGambarBerita];
varIntent.putExtra["ISI_BERITA", berita.get[position].getIsiBerita[]];
// method startActivity cma bisa di pake di activity/fragment
// jadi harus masuk ke context dulu
context.startActivity[varIntent];
}
}];
}
// Menentukan Jumlah item yang tampil
@Override
public int getItemCount[] {
return berita.size[];
}
public class MyViewHolder extends RecyclerView.ViewHolder {
// Deklarasi widget
ImageView ivGambarBerita;
TextView tvJudul, tvTglTerbit, tvPenulis;
public MyViewHolder[View itemView] {
super[itemView];
// inisialisasi widget
ivGambarBerita = [ImageView] itemView.findViewById[R.id.ivPosterBerita];
tvJudul = [TextView] itemView.findViewById[R.id.tvJudulBerita];
tvTglTerbit = [TextView] itemView.findViewById[R.id.tvTglTerbit];
tvPenulis = [TextView] itemView.findViewById[R.id.tvPenulis];
}
}
}
Detail Berita Activity
Buatlah sebuah scrolling activity baru dengan nama DetailActivity.
File > New >
Activity > Scrolling Activity > Beri nama DetailActivity
Layouting
Sesuaikan kode pada layout activity_detail.xml dan content_detail.xml menjadi seperti berikut
activity_detail.xml
content_detail.xml
DetailActivity.java
Nah disini kita akan menangkap data dari Intent menggunakan getIntent[].getStringExtra[] karena data yang kita kirim sebelumnya adalah data String.
package com.khilman.www.aplikasiportalberita;import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.webkit.WebView;
import android.widget.ImageView;
import android.widget.TextView;
import com.squareup.picasso.Picasso;
public class DetailActivity extends AppCompatActivity {
// Deklarasi
ImageView ivGambarBerita;
TextView tvTglTerbit, tvPenulis;
WebView wvKontenBerita;
@Override
protected void onCreate[Bundle savedInstanceState] {
super.onCreate[savedInstanceState];
setContentView[R.layout.activity_detail];
Toolbar toolbar = [Toolbar] findViewById[R.id.toolbar];
setSupportActionBar[toolbar];
FloatingActionButton fab = [FloatingActionButton] findViewById[R.id.fab];
fab.setOnClickListener[new View.OnClickListener[] {
@Override
public void onClick[View view] {
Snackbar.make[view, "Replace with your own action", Snackbar.LENGTH_LONG]
.setAction["Action", null].show[];
}
}];
// Inisialisasi
ivGambarBerita = [ImageView] findViewById[R.id.ivGambarBerita];
tvTglTerbit = [TextView] findViewById[R.id.tvTglTerbit];
tvPenulis = [TextView] findViewById[R.id.tvPenulis];
wvKontenBerita = [WebView] findViewById[R.id.wvKontenBerita];
// Jalankan method tampil detail berita
showDetailBerita[];
}
private void showDetailBerita[] {
// Tangkap data dari intent
String judul_berita = getIntent[].getStringExtra["JDL_BERITA"];
String tanggal_berita = getIntent[].getStringExtra["TGL_BERITA"];
String penulis_berita = getIntent[].getStringExtra["PNS_BERITA"];
String isi_berita = getIntent[].getStringExtra["ISI_BERITA"];
String foto_berita = getIntent[].getStringExtra["FTO_BERITA"];
// Set judul actionbar / toolbar
getSupportActionBar[].setTitle[judul_berita];
// Set ke widget
tvPenulis.setText["Oleh : " + penulis_berita];
tvTglTerbit.setText[tanggal_berita];
// Untuk gambar berita
Picasso.with[this].load[foto_berita].into[ivGambarBerita];
// Set isi berita sebagai html ke WebView
wvKontenBerita.getSettings[].setJavaScriptEnabled[true];
wvKontenBerita.loadData[isi_berita, "text/html; charset=utf-8", "UTF-8"];
}
}
Android Manifest
Okey ditahap akhir kita perlu menambahkan permission internet karena aplikasi kita memerlukan akses internet untuk mengambil data ke API.
Tambahkan baris kode berikut ke AndroidManifest.xml :
Running Project
Alhamdulillah kita sudah sampai di tahap akhir, sekarang coba jalankan aplikasi Anda ke device atau emulator untuk melihat hasilnya. Perlu di CATAT karena kita masih menggunakan server local itu artinya Device / Emulator harus dalan satu jaringan / wifi yang sama.
Sentuhan Akhir
Sentuhan akhir sedikit mempercantik tampilan kita custom warna themenya. Silahkan buka color.xml yang ada di res/values/color.xml. Sesuaikan seperti berikut :
#ff9100
#c56200
#ffc246
Untuk referensi material color lainya temen-temen bisa menggunakan tools berikut : //material.io/color
Closing
Yap…. Alhamdulillah kita telah menyelesaikan aplikasi portal berita ini, walaupun masih sangat sederhana. Tidak apa karena tujuan dari project ini adalah untuk membantu temen-temen yang baru belajar API, mengambil data dari database MySQL dimana ada dalam platform yang berbeda untuk kemudian di tampilkan ke Aplikasi kita.
Baik sekian dari Saya semoga dapat bermanfaat, terimakasih atas semangatnya :] … Selamat berkarya..