Android

Membuat Aplikasi Berita Android dengan Android Studio, PHP dan Mysqli - Post List, Post Detail dan M

Home » Post » Membuat Aplikasi Berita Android dengan Android Studio, PHP dan Mysqli - Post List, Post Detail dan M

Membuat Aplikasi Berita Android dengan Android Studio, PHP dan Mysqli - Post List, Post Detail dan M

Table of contents



Membuat Aplikasi Berita Android dengan Android Studio, PHP dan Mysqli Part 4: Post List, Post Detail dan Main Activity - Selamat sore, pada artikel kali ini saya akan melanjutkan aplikasi yang sudah dibangun dengan Android Studio. Yang akan dibuat pada artikel ini adalah membuat post loop dan menampilkannya pada Main Activity. Berbeda dengan artikel Membuat Main Activity dan Loop Blogspot Post dengan Android Studio yang menggunakan RecyclerView, pada artikel kali ini saya akan menggunakan ListView.

Apa itu ListView pada Android Studio? ListView adalah widget yang ada pada komponen UI dari sebuah aplikasi dan digunakanan untuk menampilkan value dan data dalam bentuk list atau daftar. 

Bagi anda yang belum mengikuti seri Membuat Website Professional dengan PHP & Mysql silahkan baca terlebih dahulu agar paham dan mengerti Artikel ini:



Membuat Post List XML

Buka Project Android Studio

Pada Folder Res >> Layout >> Klik Kanan >> New >> Layout Resource File >> Beri nama "post_list.xml"

Copy kode xml dibawah dan simpan pada post_list.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent" android:padding="10dp">

    <TextView
        android:id="@+id/id"
        android:visibility="invisible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/imageIv"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="5dp"
        android:adjustViewBounds="true"
        android:background="#ffffff"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_baseline_image_black"
        />

    <TextView
        android:id="@+id/judulTv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Judul Artikel"
        android:textColor="#000"
        android:textSize="20sp"
        android:textStyle="bold"
         />
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/kategoriTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Kategori"
        />
    <TextView
        android:id="@+id/separatorTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="-"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@id/kategoriTv"
        />
    <TextView
        android:id="@+id/tanggalTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="30/11/2020"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@id/separatorTv"
        />
</RelativeLayout>
    <TextView
        android:id="@+id/contentTv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/kategoriTv"
        android:layout_marginTop="5dp"
        android:maxLines="4"
        android:ellipsize="end"
        android:text="The description will show 4 lines from original article"
        android:textColor="#000" />

</LinearLayout>

Screen Shot 2021-03-15 at 16.26.46

Membuat Main Activity XML

Buka Project Android Studio

Pada Folder Res >> Layout >> Klik Kanan >> New >> Layout Resource File >> Beri nama "activity_main.xml"

Copy kode xml dibawah dan simpan pada activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context=".MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView" />

</LinearLayout>

Screen Shot 2021-03-15 at 16.26.58

Membuat Main Activity Java

Buka Project Android Studio

Klik File MainActivity.java

Copy kode dibawah dan simpan pada MainActivity.java

package com.suba.php;

import androidx.appcompat.app.AppCompatActivity;

import android.app.ProgressDialog;
import android.content.Intent;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.StrictMode;
import android.text.Html;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListAdapter;
import android.widget.ListView;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.util.ArrayList;
import java.util.HashMap;

public class MainActivity extends AppCompatActivity implements ListView.OnItemClickListener{

    private ListView listView;

    private String JSON_STRING;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = (ListView) findViewById(R.id.listView);
        listView.setOnItemClickListener(this);

        StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
        StrictMode.setThreadPolicy(policy);


        getJSON();
    }

    private void getPost(){
        JSONObject jsonObject = null;
        ArrayList<HashMap<String,String>> list = new ArrayList<HashMap<String, String>>();
        try {
            jsonObject = new JSONObject(JSON_STRING);
            JSONArray result = jsonObject.getJSONArray(ApiConfig.TAG_JSON_ARRAY);
            for(int i = 0; i<result.length(); i++){
                JSONObject jo = result.getJSONObject(i);
                String imgurl = ""+ApiConfig.BASE_URL+"admin/";
                String id = jo.getString(ApiConfig.TAG_ID);
                String judul = jo.getString(ApiConfig.TAG_JUDUL);
                String gambar= imgurl + jo.getString(ApiConfig.TAG_GAMBAR);
                String content = Html.fromHtml(jo.getString(ApiConfig.TAG_ARTIKEL)).toString().replaceAll("<p>", "").trim();
                String tanggal = jo.getString(ApiConfig.TAG_PUBLISH);
                String kategori = jo.getString(ApiConfig.TAG_KATEGORI);

                HashMap<String,String> posts = new HashMap<>();
                posts.put(ApiConfig.TAG_ID,id);
                posts.put(ApiConfig.TAG_JUDUL,judul);
                posts.put("gambar", gambar);
                posts.put(ApiConfig.TAG_ARTIKEL,content);
                posts.put(ApiConfig.TAG_PUBLISH,tanggal);
                posts.put(ApiConfig.TAG_KATEGORI,kategori);

                list.add(posts);
            }

        } catch (JSONException e) {
            e.printStackTrace();
        }

        ListAdapter adapter = new CustomImageAdapter(

                MainActivity.this, list, R.layout.post_list,
                new String[]{ApiConfig.TAG_ID, ApiConfig.TAG_JUDUL, ApiConfig.TAG_ARTIKEL,ApiConfig.TAG_KATEGORI,ApiConfig.TAG_PUBLISH},
                new int[]{R.id.id, R.id.judulTv, R.id.contentTv, R.id.kategoriTv, R.id.tanggalTv});
        listView.setAdapter(adapter);
    }

    private void getJSON(){
        class GetJSON extends AsyncTask<Void,Void,String>{

            ProgressDialog loading;
            @Override
            protected void onPreExecute() {
                super.onPreExecute();
                loading = ProgressDialog.show(MainActivity.this,"Mengambil data...","Mohon tunggu...",false,false);
            }

            @Override
            protected void onPostExecute(String s) {
                super.onPostExecute(s);
                loading.dismiss();
                JSON_STRING = s;
                getPost();
            }

            @Override
            protected String doInBackground(Void... params) {
                RequestHandler rh = new RequestHandler();
                String s = rh.sendGetRequest(ApiConfig.URL_GET_ALL);
                return s;
            }
        }
        GetJSON gj = new GetJSON();
        gj.execute();
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Intent intent = new Intent(this, PostDetail.class);
        HashMap<String,String> map =(HashMap)parent.getItemAtPosition(position);
        String empId = map.get(ApiConfig.POST_ID).toString();
        intent.putExtra(ApiConfig.POST_ID,empId);
        startActivity(intent);
    }
}

Membuat Post Detail XML

Pada Folder Res >> Layout >> Klik Kanan >> New >> Layout Resource File >> Beri nama "activity_detail.xml"

Copy kode xml dibawah dan simpan pada activity_detail.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="#fff"
    tools:context=".PostDetail">

    <ScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:orientation="vertical"
        android:padding="5dp">

        <TextView
            android:id="@+id/id"
            android:visibility="invisible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:id="@+id/imageIv"
            android:layout_width="match_parent"
            android:layout_height="220dp"
            android:layout_marginTop="5dp"
            android:layout_marginEnd="5dp"
            android:adjustViewBounds="true"
            android:background="#ffffff"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_baseline_image_black"
            />


        <TextView
            android:id="@+id/judulTv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:textColor="#000"
            android:text="Judul Artikel"
            android:textSize="20dp"
            android:textStyle="bold"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#dedede" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:id="@+id/kategoriTv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="Kategori"
                />
            <TextView
                android:id="@+id/separatorTv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="-"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/kategoriTv"
                />
            <TextView
                android:id="@+id/tanggalTv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="30/11/2020"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/separatorTv"
                />
        </RelativeLayout>


        <TextView
            android:id="@+id/contentTv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/kategoriTv"
            android:scrollbars = "vertical"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="20dp"
            android:text="Load Content..."
            android:textAppearance="@android:style/TextAppearance" />


    </LinearLayout>

    </ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

Screen Shot 2021-03-15 at 16.55.00

Membuat Post Detail Java  

Buka Project Android Studio

Pada folder java >> com >> suba >> Klik Kanan >> New >> Java Class >> Beri nama "DetailActivity.java"

Copy kode dibawah dan simpan pada DetailActivity.java

package com.suba.php;

import android.app.ProgressDialog;
import android.content.Intent;
import android.os.AsyncTask;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Html;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.squareup.picasso.Callback;
import com.squareup.picasso.Picasso;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

public class PostDetail extends AppCompatActivity implements View.OnClickListener{
    private TextView judulTv, kategoriTv, tanggalTv, contentTv;
    private TextView PostId;
    private ImageView imageIv;
    private String id;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        Intent intent = getIntent();

        id = intent.getStringExtra(ApiConfig.POST_ID);

        imageIv = (ImageView) findViewById(R.id.imageIv);
        PostId = (TextView) findViewById(R.id.id);
        judulTv = (TextView) findViewById(R.id.judulTv);
        tanggalTv = (TextView) findViewById(R.id.tanggalTv);
        kategoriTv = (TextView) findViewById(R.id.kategoriTv);
        contentTv = (TextView) findViewById(R.id.contentTv);
        PostId.setText(id);

        getPostDetail();

    }

    private void getPostDetail(){
        class GetPost extends AsyncTask<Void,Void,String>{
            ProgressDialog loading;
            @Override
            protected void onPreExecute() {
                super.onPreExecute();
                loading = ProgressDialog.show(PostDetail.this,"Mengambil data...","Mohon tunggu...",false,false);
            }

            @Override
            protected void onPostExecute(String s) {
                super.onPostExecute(s);
                loading.dismiss();
                showPost(s);
            }

            @Override
            protected String doInBackground(Void... params) {
                RequestHandler rh = new RequestHandler();
                String s = rh.sendGetRequestParam(ApiConfig.URL_GET_POST,id);
                return s;
            }
        }
        GetPost ge = new GetPost();
        ge.execute();
    }

    private void showPost(String json){
        try {
            JSONObject jsonObject = new JSONObject(json);
            JSONArray result = jsonObject.getJSONArray(ApiConfig.TAG_JSON_ARRAY);
            JSONObject c = result.getJSONObject(0);
            String imgurl = ""+ApiConfig.BASE_URL+"admin/";
            String judul = c.getString(ApiConfig.KEY_POST_JUDUL);
            String publish_date = c.getString(ApiConfig.KEY_POST_PUBLISH);
            String gambar= imgurl + c.getString(ApiConfig.KEY_POST_GAMBAR);
            String desg = c.getString(ApiConfig.KEY_POST_ARTIKEL);
            String kategori = c.getString(ApiConfig.KEY_POST_KATEGORI);

            judulTv.setText(judul);
            String htmltext = Html.fromHtml(desg).toString();
            contentTv.setText(Html.fromHtml(htmltext));
            tanggalTv.setText(publish_date);
            kategoriTv.setText(kategori);
            imageIv.setVisibility(View.GONE);
            Picasso.get().load(gambar).into(imageIv, new Callback() {
                @Override
                public void onSuccess() {
                    imageIv.setVisibility(View.VISIBLE);
                }

                @Override
                public void onError(Exception e) {
                    imageIv.setVisibility(View.VISIBLE);
                    imageIv.setImageResource(R.drawable.ic_baseline_image_black);
                }


            });

        } catch (JSONException e) {
            e.printStackTrace();
        }
    }

    @Override
    public boolean onSupportNavigateUp() {
        onBackPressed();
        return true;
    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
    }


    @Override
    public void onClick(View v) {
        
    }
}

Uji Coba Aplikasi Berita

Saatnya Mencoba Aplikasi, screenshot Main Activity

Screen Shot 2021-03-15 at 16.32.04

Screenshot Post Detail

Screen Shot 2021-03-15 at 16.58.48

Aplikasi berjalan dengan lancar di emulator android dengan API 28, jika ingin meng-generate APK nya, klik Build >> Generate Signed Bundle / APK (saya akan jelaskan di lain artikel)

Kesimpulan

Tak terasa aplikasi Android Studio berbasis PHP dan Mysqli sudah rampung untuk dibuat. Silahkan download source code project ini via Github disini. Silahkan kembangkan aplikasi ini seperti dengan menambahkan tombol Share pada Post Detail atau memberikan fitur komentar dan jangan lupa mengkoneksikannya dengan Admod agar bisa di monetize. 


Artikel Terkait