[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