Source code Portal berita berbasis android dengan API PHP Native & Mysql

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.

Source code Portal berita berbasis android dengan API PHP Native & Mysql

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

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.

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);

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);

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:

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'
   ...
}

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.

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);
    }
}

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.

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()

}

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 + '\'' +
         "}";
      }
}

content_detail.xml

    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".DetailActivity"
    tools:showIn="@layout/activity_detail">

            android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="10dp"
        android:orientation="vertical">
                    android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="15dp"
            android:orientation="horizontal">
                            android:id="@+id/tvTglTerbit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Senin, 12 Maret 2018"/>
                            android:id="@+id/tvPenulis"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="10dp"
                android:text="Oleh : Rizal Hilman"/>

                    android:layout_width="match_parent"
            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 :

    #ff9100
    #c56200
    #ffc246

Untuk referensi material color lainya temen-temen bisa menggunakan tools berikut : https://material.io/color