[Tutorial] Membuat Aplikasi Portal Berita

Assalamualaikum Guys... Kembali lagi bersama gw Ramadhany si programer ganteng.... nah guys... Sekarang ane mau berbagi ilmu tentang pembuatan aplikasi protal berita menggunalkan databases.... mau tau gimana cara bikinnya??? langsung aja ikuti langkah-langkahnya....

Membuat Aplikasi Portal Berita
1. Aktifkan XAMPP nya terlebih dahulu

2. apabila anda sudah mempunyai folder data db_beritanya, maka langsung saja import file sqlnya

3. buka android studio dan buat projeck dengan nama "Portal Berita"
4. copylah android aquerinya ke android studionya ke libs, lalu di Ad Us Library, lalu ok.
5. buka layout activity_main.xml dan tambahkan 1 buah widget ListView dan berikan idnya = LvBerita

6. setelah itu, buatlah 3 buah package dan beri nama Adapter, Helper dan Model. Dan buat class didalam package seperti gambar di bawah ini

7. buat layout baru, beri nama  list_berita. Setelah itu tambahkan CardView. Lalu beri 2 widget yaitu image view dan text view. Dan beri IvGambar dan TxtJudul

8. buka class ModelBerita.java, lalu tambahkan kode seperti di bawah ini
public class ModelBerita {
    private String judul, isi, gambar;

    public String getJudul() {
        return judul;
    }

    public void setJudul(String judul) {
        this.judul = judul;
    }

    public String getIsi() {
        return isi;
    }

    public void setIsi(String isi) {
        this.isi = isi;
    }

    public String getGambar() {
        return gambar;
    }

    public void setGambar(String gambar) {
        this.gambar = gambar;
    }
}

9. buka class AdapterBerita.java, lalu tambahkan kode lengkap seperti di bawah ini
public class AdapterBerita extends BaseAdapter{
    //buat array list model berita
    ArrayList<ModelBerita> data;
    Context c;
    //buat construktor
    //agar bisa di panggil oleh activity yang menggunakan adapter
    public AdapterBerita(ArrayList<ModelBerita> data, Context c) {
        this.data = data;
        this.c = c;
    }

    // fungsi untuk menghitung banyak data
    @Override
    public int getCount() {
        return data.size();
    }

    @Override
    public Object getItem(int position) {
        return position;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }
    // buatkan class untuk menampung widget yang kita gunakan
    public class ViewHolder{
        ImageView gambar;
        TextView judul;
    }


    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        View v = convertView;
        //
        if (v == null){
            //panggil layout list_berita
            LayoutInflater layoutInflater = (LayoutInflater)c.getSystemService(c.LAYOUT_INFLATER_SERVICE);
            v = layoutInflater.inflate(R.layout.list_berita, null);
            holder = new ViewHolder();
            //kenalkan widget by id
            holder.gambar = (ImageView)v.findViewById(R.id.IvGambar);
            holder.judul = (TextView)v.findViewById(R.id.TxtJudul);
            // set v nya
            v.setTag(holder);
        }else {
            holder = (ViewHolder)v.getTag();
        }
        // set deta kedalam image view dan text view
        ModelBerita modelBerita = new ModelBerita();
        holder.judul.setText(modelBerita.getJudul());
        // tampilkan gambar ke dalam image view
        Glide.with(c).load(Server.BASE_IMG + modelBerita.getGambar()).into(holder.gambar);
        // http://192.168.4.123/berita/foto_berita/nama file dati database
        // format untuk menggunakan glide : context / url / widget
        return v;
    }
}
10. dan bukalah class Server.java, lalu berikan code text di bawah ini. Bila ingin menjalankan kembali aplikasi tersebut, anda harus mengganti ip anda
public static String BASE_URL = "http://192.168.4.123/berita/";
public static String BASE_IMG =BASE_URL + "foto_berita/";

11. lalu jangan lupa tambahkan di gradle nya yaitu, dan jangan lupa di sync now tunggu hingga gradle selesai
compile 'com.github.bumptech.glide:glide:3.7.0'
dan ini contoh hasil di gradle nya
dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:25.1.0'
    compile files('libs/android-query-full.0.26.8.jar')
    compile 'com.android.support:cardview-v7:25.1.0'
    compile 'com.github.bumptech.glide:glide:3.7.0'

}

12. setelah itu tambahkan code di MainActivity.java nya, dan tambahkan kode lengkap di bawah ini
public class MainActivity extends AppCompatActivity {
    ArrayList<ModelBerita> data;
    AQuery aQuery;
    ListView LvBerita;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // methode untuk mengenalkan
        Berita();
        // methode untuk mrnampilkan list berita
        getBerita();
        LvBerita.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                ModelBerita b = data.get(position);
                Intent a = new Intent(getApplicationContext(), DetailBerita.class);
                a.putExtra("judul", b.getJudul());
                a.putExtra("gambar", b.getGambar());
                a.putExtra("isi", b.getIsi());
                startActivity(a);
            }
        });
    }

    private void getBerita() {
        // buatkan String URL JSON getBerita.php
        String url = Server.BASE_URL + "getBerita.php";
        // buat progress dialog
        ProgressDialog pd = new ProgressDialog(this);
        pd.setTitle("Informasi");
        pd.setMessage("Sedang Mengambil Data");
        pd.setCancelable(false);
        pd.setCanceledOnTouchOutside(false);

        // kirimkan url ke server
        try {
            aQuery.progress(pd).ajax(url,String.class, new AjaxCallback<String>(){
               // ambil nilai pengembalian dari server menggunakan methode callback

                @Override
                public void callback(String url, String object, AjaxStatus status) {
                    // kita cek apakah ada nilai pengembalian atau tidak??

                    if (object != null){
                    // ambil nilai pengembalian jika ada
                        try {
                            JSONObject json = new JSONObject(object);
                            // tampung object json ke dalam string
                            String sts = json.getString("status");
                            String msg = json.getString("msg");
                            if (sts.equalsIgnoreCase("1")){
                                // ambil object yang ada pada array data
                                JSONArray jsonArray = json.getJSONArray("data");
                                // lakukan perulangan data
                                for (int a = 0; a <jsonArray.length(); a++){
                                    //ambil object yang ada dalam array object data
                                    JSONObject jsonObject = jsonArray.getJSONObject(a);
                                    //masukan data ke dalam model berita
                                    ModelBerita b = new ModelBerita();
                                    b.setJudul(jsonObject.getString("judul"));
                                    b.setGambar(jsonObject.getString("gambar"));
                                    b.setIsi(jsonObject.getString("isi_berita"));
                                    // masukan ke dalam array list
                                    data.add(b);
                                    // setelah itu panggil dadapter berita
                                    AdapterBerita adapterBerita = new AdapterBerita(data, MainActivity.this);
                                    // kemudian tampilkan kedalam listview
                                    LvBerita.setAdapter(adapterBerita);

                                }
                            }
                        }catch (Exception e){

                        }
                    }
                }
            });
        }catch (Exception e){

        }
    }

    private void Berita() {
        data = new ArrayList<>();
        aQuery = new AQuery(this);
        LvBerita = (ListView)findViewById(R.id.LvBerita);

    }
}


13. setelah itu buat activity baru untuk detail isi beritanya, buat activity DetailBerita.java. Berikut ini adalah kode lengkap DetailBerita.java
package com.example.rara.portalberita;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.ActionBar;
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 com.bumptech.glide.Glide;
import com.example.rara.portalberita.Helper.Server;

public class DetailBerita extends AppCompatActivity {
    ImageView IvDitailGambar;
    WebView WvIsi;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail_berita);


        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();
            }
        });
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        Set();
        // ambil data dari intent
        String judul,isi,gambar;
        judul = getIntent().getStringExtra("judul");
        isi = getIntent().getStringExtra("isi");
        gambar = getIntent().getStringExtra("gambar");
        // tampilkan data
        Glide.with(this).load(Server.BASE_IMG + gambar).placeholder(R.mipmap.ic_launcher).into(IvDitailGambar);
        // load data ke dalam web view
        WvIsi.loadData(isi,"text/html", "utf-8");
        // tampilkan judul berita
        ActionBar title = getSupportActionBar();
        title.setTitle(judul);
    }

    private void Set() {
        IvDitailGambar = (ImageView)findViewById(R.id.IvDetailGambar);
        WvIsi = (WebView)findViewById(R.id.WvDetailIsi);
    }
}

14. lalu di layout activity_detail_berita.xml tambahkan 1 buah widget image view dan beri id nya IvDetailGambar. berikut contoh codenya
<ImageView
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:scaleType="fitXY"
    android:id="@+id/IvDetailGambar"/>
jangan lupa !! taruh widget image viewnya dibawah code ini
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_collapseMode="pin"
    app:popupTheme="@style/AppTheme.PopupOverlay" />
15. buka manifests nya, lalu tambahkan 2 code lagi
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
16. langkah terakhir, jalankan aplikasi tersebut

halaman menu utama

tampilan detail