Kali ini kita akan membuat Aplikasi Android sederhana dengan studio kasusnya "Portal Berita". Untuk berita yang akan ditampilkan adalah bersumber dari database MySQL yang akan kita buat. Disini kita akan belajar bagaimana memainkan API di Android.
Kita akan menggunakan Java sebagai bahasa pemrograman, tetapi penulis juga menyediakan Source code versi Kotlinnya.
Perlu diketahui kita akan melakukan koding pada 2 sisi yaitu sisi Server dan sisi Klien.
Untuk sisi server kita akan menggunakan bahasa PHP “Gunanya untuk apa?” Agar kita dapat mengolah data yang ada di database MySQL untuk meminta dalam format data JSON, nah data ini yang kemudian akan kita panggil dengan istilah respons.
“Kenapa Harus JSON?” Karena seperti teman-teman yang percaya setiap bahasa pemrograman, setiap plaform memiliki 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 Klien yaitu Android. Pada sisi Android kita akan mengirim permintaan ke URL API untuk mendapatkan respons berupa data JSON, dan data JSON ini akan kita tampung menjadi Model agar data tersebut dapat kita gunakan.
Untuk sisi server kita akan menggunakan bahasa PHP “Gunanya untuk apa?” Agar kita dapat mengolah data yang ada di database MySQL untuk meminta dalam format data JSON, nah data ini yang kemudian akan kita panggil dengan istilah respons.
“Kenapa Harus JSON?” Karena seperti teman-teman yang percaya setiap bahasa pemrograman, setiap plaform memiliki 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 Klien yaitu Android. Pada sisi Android kita akan mengirim permintaan ke URL API untuk mendapatkan respons berupa data JSON, dan data JSON ini akan kita tampung menjadi Model agar data tersebut dapat kita gunakan.
Masih di Android, untuk memudahkan proses pengiriman permintaan API dan menyimpan data json ke Model kita akan menggunakan library Retrofit2 dan Retrofit Gson-Converter.
Persiapan Server API pada PHP Web Bases
Seperti yang sudah dijelaskan sebelumnya kita akan menggunakan PHP & Mysql sebagai Server API. Scriptnya sudah saya sediakan, silahkan buka link berikut : donwload disini
Seperti yang sudah dijelaskan sebelumnya kita akan menggunakan PHP & Mysql sebagai Server API. Scriptnya sudah saya sediakan, silahkan buka link berikut : donwload disini
kemudian Ekstrak di root web server localhost masing-masing. Kalau saya menggunakan XAMPP/Appserv 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 berikan nama tb_portal_berita kemudian import file .sql yang ada dalam folder hasil ekstrakan tadi.
Buatlah sebuah database baru, kita berikan nama tb_portal_berita kemudian import file .sql yang ada dalam folder hasil ekstrakan tadi.
Setting Koneksi.php
Silahkan sesuaikan konfigurasi database di pada file koneksi.php
// mengkoneksikan ke database
$server = “localhost”;
$server_username = “root”;
$server_password = “”;
$database_name = “db_portal_berita”;$conn = new Mysqli($server, $server_username, $server_password, $database_name);
$server = “localhost”;
$server_username = “root”;
$server_password = “”;
$database_name = “db_portal_berita”;$conn = new Mysqli($server, $server_username, $server_password, $database_name);
tampil_berita.php
Didalam file ini berisi script yang bertugas untuk mengambil data dari database kemudian ditampilkan dalam bentuk json.
// include file koneksi
require ‘koneksi.php’;
// buat QUery perintah untuk menampilkan semua data
// Secara Descending berdasarkan ID
$sql_get_berita = “SELECT * FROM tb_berita ORDER BY id DESC”;
$query = $conn->query($sql_get_berita);// Variable penampung array sementara
$response_data = null;while ($data = $query->fetch_assoc()) {
// tambahkan data yg di seleksi ke dalam array
$response_data[] = $data;
}// Cek apakah datanya null ?
if (is_null($response_data)) {
// jika ya, buat status untuk response jadi false
$status = false;
} else {
// jika tidak, buat status untuk response jadi true
$status = true;
}
// Set type header response ke Json
header(‘Content-Type: application/json’);
// Bungkus data dalam array
$response = [‘status’ => $status, ‘berita’ => $response_data];
// tampilkan dan convert ke format json
echo json_encode($response);
require ‘koneksi.php’;
// buat QUery perintah untuk menampilkan semua data
// Secara Descending berdasarkan ID
$sql_get_berita = “SELECT * FROM tb_berita ORDER BY id DESC”;
$query = $conn->query($sql_get_berita);// Variable penampung array sementara
$response_data = null;while ($data = $query->fetch_assoc()) {
// tambahkan data yg di seleksi ke dalam array
$response_data[] = $data;
}// Cek apakah datanya null ?
if (is_null($response_data)) {
// jika ya, buat status untuk response jadi false
$status = false;
} else {
// jika tidak, buat status untuk response jadi true
$status = true;
}
// Set type header response ke Json
header(‘Content-Type: application/json’);
// Bungkus data dalam array
$response = [‘status’ => $status, ‘berita’ => $response_data];
// tampilkan dan convert ke format json
echo json_encode($response);
Lakukan Testing Web server
ScrollingBaik, jika semua konfigurasi telah siap berikutnya untuk mengetes apakah semua telah berjalan dengan normal atau belum. Silahkan akses tampil_berita.php melalui browser atau postman atau API Tester lainnya.
di atas adalah data json yang akan kami proses nanti. Jika Anda ingin membaca data json lebih mudah, teman Anda dapat menggunakan ekstensi chrome atau perangkat lunak pihak ketika untuk json viewer. Di sini saya menggunakan alat web jsonviewer.stack.hu, rekatkan semua json ke web lalu klik tab Penampil.
Sedikit penjelasan tentang response diatas, setelah kita masukan lihat dengan menggunakan json viewer terlihat jelas data json yang kita punya memiliki 2 buah item, yaitu Json object (status) dan Json array (berita). Jika teman-teman perhatikan, semua berita kita ditampung oleh json array berita yang didalamnya terdapat json object Nah semua data tersebut akan kita tampung (oleh si Retrofit) kedalam sebuah Class Model yang biasa disebut POJO.
Persiapan Proyek Android
Buatlah sebuah proyek baru, berinama Aplikasi Portal Berita dengan minimum SDK API 16: Jelly Bean, kemudian untuk Activity template pilih Empty Activity.
Perpustakaan Persiapan
Dibaca oleh kami Tambahkan perpustakaan-perpustakaan yang akan kita gunakan, diterbitkan adalah:
Buatlah sebuah proyek baru, berinama Aplikasi Portal Berita dengan minimum SDK API 16: Jelly Bean, kemudian untuk Activity template pilih Empty Activity.
Perpustakaan Persiapan
Dibaca oleh kami Tambahkan perpustakaan-perpustakaan yang akan kita gunakan, diterbitkan adalah:
- Retrofit & Gson-Converter (untuk manajer API)
- Piccasso (menampilkan gambar dari internet)
- Tampilan Pendaur Ulang (untuk daftar)
Silakan buka gradle (Modul: aplikasi), tambahkan dependencis berikut kemudian klik “Sinkronkan Sekarang” yang ada di sebelah kanan untuk mensinkronisasikan proyek perpustakaan dngan library.
{
...
implementation'com.squareup.retrofit2:retrofit:2.3.0'
implementation 'com.squareup.retrofit2:converter-gson:2.3.0'
implementation 'com.squareup.picasso:picasso:2.5.2'
implementation 'com.android.support:recyclerview-v7:26.1.0'
...
}
...
implementation'com.squareup.retrofit2:retrofit:2.3.0'
implementation 'com.squareup.retrofit2:converter-gson:2.3.0'
implementation 'com.squareup.picasso:picasso:2.5.2'
implementation 'com.android.support:recyclerview-v7:26.1.0'
...
}
Note :
— Untuk recycler view “com.android.support:recyclerview-v7:26.1.0” bagian yang salah tebalkan disesuaikan dngan versi SDK masing-masing karena akan error jika tidak cocok.
— Untuk recycler view “com.android.support:recyclerview-v7:26.1.0” bagian yang salah tebalkan disesuaikan dngan versi SDK masing-masing karena akan error jika tidak cocok.
berikutnya kita akan mempersiapkan Class dan Interface untuk memudahkan kita dalam menggunakan library retrofit ini. Silahkan buat package baru dengan nama network kemudian dialamnya buat satu Java Class InitRetrofit dan satu Java Interface ApiServices. Sehingga struktur foldernya menjadi seperti berikut :
InitRetrofit
In this class we will create 2 methods setInit () and getInstance (). The method name doesn't have to be the same so you can adjust it.
setInit (): this method is the task of initializing the Retrofit Class. In this method we also tell Retrofit where our API is headed. Because we are still playing in the locale, please change the contents of the API_URL variable with your computer's IP.
getInstance (): this method is responsible for connecting the InitRetrofit class to the ApiServices interface so we can use the request method that is in the ApiServices interface.
Adjust the InitRetrofit Class to the following:
package com.khilman.www.aplikasiportalberita.network;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;
/**
* Created by Dev-on 12/02/19.
*/
public class InitRetrofit {
// URL Server API
public static String API_URL = "http://192.168.95.2/portal_berita/";
public static Retrofit setInit() {
return new Retrofit.Builder().baseUrl(API_URL)
.addConverterFactory(GsonConverterFactory.create())
.build();
}
public static ApiServices getInstance() {
return setInit().create(ApiServices.class);
}
}
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;
/**
* Created by Dev-on 12/02/19.
*/
public class InitRetrofit {
// URL Server API
public static String API_URL = "http://192.168.95.2/portal_berita/";
public static Retrofit setInit() {
return new Retrofit.Builder().baseUrl(API_URL)
.addConverterFactory(GsonConverterFactory.create())
.build();
}
public static ApiServices getInstance() {
return setInit().create(ApiServices.class);
}
}
ApiServices
Interface ApiServices adalah tempat dimana kita mendeklarasikan semua request yang akan kita kirim/gunakan. Contohnya request untuk login, register, menampilkan data, mengubah data, menghapus data dan sejenisnya, didalam Interface inilah kita definisikan Methodnya apa (ex: GET, POST, PUT, etc) dan Endpoint API-nya apa (ex: show_item, get_news.php, get_detail.php, etc).
saat ini kita hanya akan membuat 1 buah request ke Endpoint tampil_berita.php dengan metode pengiriman data GET.
Sesuaikan interface ApiServices menjadi seperti berikut.
Sesuaikan interface ApiServices menjadi seperti berikut.
package com.khilman.www.aplikasiportalberita.network;
import retrofit2.Call;
import retrofit2.http.GET;
/**
* Created by Dev-on 12/02/18.
*/
public interface ApiServices {
//@TIPEMETHOD("API_END_POINT")
@GET("tampil_berita.php")
Call request_show_all_berita();
// nama_method()
}
import retrofit2.Call;
import retrofit2.http.GET;
/**
* Created by Dev-on 12/02/18.
*/
public interface ApiServices {
//@TIPEMETHOD("API_END_POINT")
@GET("tampil_berita.php")
Call
//
}
Catatan :
- Kamu akan mendapati kesalahan dibagian ResponseBerita, itu karena kita belum membuat Model Pojo tersebut. Kita akan diproses ditahap selanjutnya
- Ketika memanggil kelas, panggil mengimport kelas milik retrofit2. seperti di screenshot berikut
Pembuatan model kali ini akan kita buat otomatis dengan menggunakan Plugin RoboPOJOGenerator. Untuk yang belum terinstal Plugin ini instal terlebih dahulu plugin tersebut:
File > Settings > Plugins > Browse Repositories > Kemudian cari “RoboPojoGenerator” > Install.
Jika sudah close dan restart Android Studio.
Klik kanan Pada package response > New > Generate POJO from JSON (ada dipaling bawah) > Pastekan JSON yang sebelumnya kita dapat ketika testing ke tampil_berita.php
Tipenya pilih GSON dan Root object name pilih ResponseBerita jika sudah langsung klik > Generate.
Akan terbentuk 2 buah Respon Kelas Berita dan Berita Item. Pada 2 Class tersebut hapus 2 baris dibawah ini:
import javax.annotation.Generated;
@Generated (“com.robohorse.robopojogenerator”)
ResponseBerita.java
package com.khilman.www.aplikasiportalberita.response;
import java.util.List;
import com.google.gson.annotations.SerializedName;
public class ResponseBerita{
@SerializedName("berita")
private List berita;
@SerializedName("status")
private boolean status;
public void setBerita(List berita){
this.berita = berita;
}
public List getBerita(){
return berita;
}
public void setStatus(boolean status){
this.status = status;
}
public boolean isStatus(){
return status;
}
@Override
public String toString(){
return
"ResponseBerita{" +
"berita = '" + berita + '\'' +
",status = '" + status + '\'' +
"}";
}
}
import java.util.List;
import com.google.gson.annotations.SerializedName;
public class ResponseBerita{
@SerializedName("berita")
private List
@SerializedName("status")
private boolean status;
public void setBerita(List
this.berita = berita;
}
public List
return berita;
}
public void setStatus(boolean status){
this.status = status;
}
public boolean isStatus(){
return status;
}
@Override
public String toString(){
return
"ResponseBerita{" +
"berita = '" + berita + '\'' +
",status = '" + status + '\'' +
"}";
}
}
content_detail.xml
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".DetailActivity"
tools:showIn="@layout/activity_detail">
android:layout_height="match_parent"
android:padding="10dp"
android:orientation="vertical">
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:orientation="horizontal">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Senin, 12 Maret 2018"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginHorizontal="10dp"
android:text="Oleh : Rizal Hilman"/>
android:layout_height="match_parent"
android:id="@+id/wvKontenBerita">
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 :
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 sedikit mempercantik tampilan kita custom warna themenya. Silahkan buka color.xml yang ada di res/values/color.xml. Sesuaikan seperti berikut :
Untuk referensi material color lainya temen-temen bisa menggunakan tools berikut : https://material.io/color
Untuk Mendapatkan Source Code project Portal berita berbasis Android Secara lengkap silahkan Donwload disini yah gaess
Donwload Juga Source Code Program Lainnya :
- Cara Mendapatkan Code SHA1 pada Framework Flutter Android
- Memulai Cara Membuat Aplikasi Android dengan Flutter dengan Android Studio
- Source Code Aplikasi Laundry menggunakan Laravel 5.8 Vue.js Siap pakai
- Cara buat material Desain Flutter Appbar Body, Bottom Navigation, Floating Action
- Cara membuat Form login validation Flutter Dart + Source code android Gratis
- Cara Membuat AppBar Layout Aplikasi Android Menggunakan Dart Flutter
- Download Source code Form login android menggunakan dart flutter
- Kumpulan Source Code Aplikasi Tes Potensi Santri berbasis Web PHP & Mysql
- SOURCE CODE PHP KEAMANAN Akses LOGIN ADVANCE
- Source Code CRUD Aplikasi Android menggunakan SQLite di Android Studio
- Cara Mudah Pasang Scryp Admob Banner dan Interstial di Adobe Flash Game