Tampilkan Gambar Dari database ke android Menggunakan Picasso

Pada kesempatan kali ini kita akan membuat Aplikasi android yang dapat menampilkan gambar dari
database maria DB ke android dengan studi kasus App Resep Makanan, disini kita akan menggunakan
library yang namanya picasso untuk menampilkan gambar, dan retrofit untuk library parsing data dari
database maria DB, disini kita memerlukan webservice menggunakan bahasa PHP untuk mendapatkan
data json dari data yang ada di database.

Apa saja yang kita perlukan ?

1. webservice
seperti gambar dibawah ini

2. data json
untuk dapatkan data json pastikan anda sudah import file db_resep.sql itu kedalam server
local anda.
Data yang ada pada database db_resep.sql bisa dilihat seperti pada gambar dibawah ini

Json yang di dapat dari database diatas yaitu seperti dibawah ini

Untuk mendapatkanya kita bisa coba di browser dengan url

localhost/db_resep/getmakanan.php

File getmakanan.php
<?php
//koneksi
// definisikan koneksi ke database
include './config/koneksi.php';
//mysqli_select_db($database) or die("Database tidak bisa dibuka");

if(isset($_GET["id_resep"])){
$id=$_GET["id_resep"];
}
//query untuk menampilkan semua data ditable
$sql=mysqli_query($con,"SELECT * FROM tb_resep ORDER BY id_resep desc");
//untuk menampung isi data
$response=array();
$cek=mysqli_num_rows($sql);
if($cek >0){
$response["resep"]=array();
//perulangan
while ($row=mysqli_fetch_array($sql)){
$data=array();
$data["id_resep1"]=$row["id_resep"];
$data["nama_resep1"]=$row["nama_resep"];
$data["detail1"]=$row["detail"];
$data["gambar1"]=$row["gambar"];

$response["pesan"]="berhasil Mengambil Data";

$response["sukses"]="true";
array_push($response["resep"],$data);
}
echo json_encode($response);
}else{
$response["pesan"]="Gagal Mengambil Data";
$response["sukses"]="false";
echo json_encode($response);
}

?>

File koneksi.php (file di dalam folder config)

<?php

// definisikan koneksi ke database

$server = "localhost";
$username = "root";
$password = "";
//sesuaikan nama db kalian
$database = "db_resep";

// Koneksi dan memilih database di server

$con =mysqli_connect($server,$username,$password,$database) or die("Koneksi gagal");
//mysqli_select_db($database) or die("Database tidak bisa dibuka");
?>

Setelah kita bahas webservicenya sekarang buat 1 project baru di android studio dan
tambahkan library dibawah ini,

Setelah tambahkan library kita buat model, buat package baru dan buat 2 class untuk
modelnya

File ModelResep
import com.google.gson.annotations.SerializedName;

import java.util.List;

@SuppressWarnings("unused")
public class ModelResep {

@SerializedName("pesan")
private String mPesan;
@SerializedName("resep")
private List<Resep> mResep;
@SerializedName("sukses")
private String mSukses;
 public String getPesan() {
return mPesan;
}

public void setPesan(String pesan) {

mPesan = pesan;
}

public List<Resep> getResep() {

return mResep;
}

public void setResep(List<Resep> resep) {

mResep = resep;
}

public String getSukses() {

return mSukses;
}

public void setSukses(String sukses) {

mSukses = sukses;
}

File Resep
public class Resep {

@SerializedName("detail1")
private String mDetail1;
@SerializedName("gambar1")
private String mGambar1;
@SerializedName("id_resep1")
private String mIdResep1;
@SerializedName("nama_resep1")
private String mNamaResep1;

public String getDetail1() {

return mDetail1;
}

public void setDetail1(String detail1) {

mDetail1 = detail1;
}

public String getGambar1() {

return mGambar1;
}

public void setGambar1(String gambar1) {

mGambar1 = gambar1;
}

public String getIdResep1() {

return mIdResep1;
}

public void setIdResep1(String idResep1) {

mIdResep1 = idResep1;
 }

public String getNamaResep1() {

return mNamaResep1;
}

public void setNamaResep1(String namaResep1) {

mNamaResep1 = namaResep1;
}

setelah buat model sekarang kita buat package baru namanya helper dan isi 2 kelas di
dalamnya

File My Constant
File MyFunction

Setelah buat helper sekarang kita buat package adapater

File ReclerViewAdapter
package com.blogbasbas.myresep.adapter;

import android.content.Context;
import android.content.Intent;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.blogbasbas.myresep.DetailActivity;
import com.blogbasbas.myresep.R;
import com.blogbasbas.myresep.helper.MyConstant;
import com.blogbasbas.myresep.model.Resep;
import com.squareup.picasso.Picasso;

import java.util.List;

/**
* Created by Server on 25/09/2017.
*/

public class RecylerViewAdapter extends

RecyclerView.Adapter<RecylerViewAdapter.MyHolder> {
//buat variabel
Context con;
List <Resep> data_resep;
//buat constructor dari variabel diatas
public RecylerViewAdapter(Context con, List<Resep> data_resep) {
this.con = con;
this.data_resep = data_resep;
}

//membuat view baru untuk menampung data

@Override
public RecylerViewAdapter.MyHolder onCreateViewHolder(ViewGroup
parent, int viewType) {
View v =
LayoutInflater.from(parent.getContext()).inflate(R.layout.tampilancus
tomresep,parent,false);
MyHolder holder = new MyHolder(v);

return holder;
}

@Override
public void onBindViewHolder(RecylerViewAdapter.MyHolder holder,
final int position) {

holder.txtnama.setText(data_resep.get(position).getNamaResep1());

Picasso.with(con).load(MyConstant.IMAGE_URL+data_resep.get(position).
getGambar1()).error(R.mipmap.ic_launcher)
.into(holder.imgMakanan);

//event click
holder.itemView.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View view) {
Intent kirim = new Intent(con, DetailActivity.class);

kirim.putExtra("nm",data_resep.get(position).getNamaResep1());

kirim.putExtra("gb",data_resep.get(position).getGambar1());

kirim.putExtra("i",data_resep.get(position).getDetail1());
con.startActivity(kirim);
}
});
}
 @Override
public int getItemCount() {
return data_resep.size();
}

public class MyHolder extends RecyclerView.ViewHolder {

ImageView imgMakanan ;
TextView txtnama;
public MyHolder(View itemView) {
super(itemView);
imgMakanan = (ImageView)
itemView.findViewById(R.id.imgmakanan);
txtnama = (TextView) itemView.findViewById(R.id.txtnama);
}
}
}

Setelah itu kita buat package network utuk disi interface RestAPI

File RestAPI

Setelah kita buat file RestAPI kita tambahkan activity seperti gambar berikut ini

File ResepActivity
package com.blogbasbas.myresep;

import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;

import com.blogbasbas.myresep.adapter.RecylerViewAdapter;
import com.blogbasbas.myresep.helper.MyConstant;
import com.blogbasbas.myresep.helper.MyFunction;
import com.blogbasbas.myresep.model.ModelResep;
import com.blogbasbas.myresep.model.Resep;
import com.blogbasbas.myresep.network.RestAPI;

import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;

public class ResepActivity extends MyFunction {

@BindView(R.id.listresep)
RecyclerView listresep;
RecyclerView.LayoutManager layoutManager;
//membuat variabel datamakan menggunakn List (untuk menampung
data)
List<Resep> dataresep;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_resep);
ButterKnife.bind(this);

//layoutManager = new GridLayoutManager(con,2);

layoutManager = new LinearLayoutManager(con);
//id dari recylerfivew
listresep.setLayoutManager(layoutManager);

//method menampilkan data

getDatamakanan();
}

private void getDatamakanan() {

//inisialisasi retrofit
Retrofit retrofit = new Retrofit.Builder()
.baseUrl(MyConstant.BASE_URL) //ke url java
MyCOnstant

.addConverterFactory(GsonConverterFactory.create())//diconvert
.build();//dibuild

RestAPI api = retrofit.create(RestAPI.class);

//ngecal
Call<ModelResep> modelResepCall = api.getResep();
modelResepCall.enqueue(new Callback<ModelResep>() {
@Override
public void onResponse(Call<ModelResep> call,
Response<ModelResep> response) {
String pesan = response.body().getPesan();
String sukses = response.body().getSukses();

if (sukses.equals("true")){
pesan(pesan);
Log.d(" Retrofit "," Berhasil dapatkan "
+pesan);
Log.d(" Retrofit "," Berhasil dapatkan "
+sukses);

dataresep = response.body().getResep();
//showdata makanan
tampildatamakanan();

} else {
pesan(pesan);
}
}

@Override
public void onFailure(Call<ModelResep> call, Throwable t)
{

}
});

private void tampildatamakanan() {

String items []= new String[dataresep.size()];

for (int i=0;i<dataresep.size();i++){
items[i]=dataresep.get(i).getNamaResep1();
}
RecylerViewAdapter adapter = new RecylerViewAdapter(con,
dataresep);
listresep.setAdapter(adapter);
}
}

File DetailActivity
package com.blogbasbas.myresep;

import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

import com.blogbasbas.myresep.helper.MyConstant;
import com.blogbasbas.myresep.helper.MyFunction;
import com.squareup.picasso.Picasso;

import butterknife.BindView;
import butterknife.ButterKnife;

public class DetailActivity extends MyFunction {

@BindView(R.id.imgmakanan)
ImageView imgmakanan;
@BindView(R.id.txtnama)
TextView txtnama;
@BindView(R.id.txtdetail)
TextView txtdetail;
 @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail);
ButterKnife.bind(this);

Intent terima = getIntent();

txtnama.setText(terima.getStringExtra("nm"));

txtdetail.setText(terima.getStringExtra("i"));

Picasso.with(con).load(MyConstant.IMAGE_URL+terima.getStringExtra("gb
")).
error(R.mipmap.ic_launcher).into(imgmakanan);

}
}

setelah kita buat activity jangan lupa layoutnya di sesuiakan, isi code dibawah ini

File activity_resep.xml

File activity_detal.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"
android:orientation="vertical"
>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="10dp"
android:layout_margin="7dp"
app:cardCornerRadius="8dp">
 <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:orientation="vertical"
>
<ImageView
android:layout_width="match_parent"
android:id="@+id/imgmakanan"
android:scaleType="fitXY"
android:src="@mipmap/ic_launcher"

android:layout_height="200dp" />

<TextView
android:id="@+id/txtnama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="nama"
android:textStyle="bold"
android:textSize="20sp" />
<View
android:background="@android:color/black"
android:layout_width="match_parent"
android:layout_height="2dp"/>

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="isi "
android:textSize="17sp"
android:id="@+id/txtdetail"/>

</ScrollView>
</LinearLayout>
</android.support.v7.widget.CardView>

</LinearLayout>

File tampilcustomresep.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_margin="2dp"
app:cardElevation="10dp"
app:cardCornerRadius="6dp"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_margin="7dp"
 android:layout_height="wrap_content"
android:orientation="horizontal">

<ImageView
android:id="@+id/imgmakanan"
android:src="@mipmap/ic_launcher"
android:layout_width="150dp"
android:layout_height="150dp" />

<LinearLayout
android:layout_marginLeft="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center">

<TextView
android:id="@+id/txtnama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="nama"
android:textSize="20sp" />
</LinearLayout>

</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>

File AndroidManifest.xml jangan lupa ditambahkan permission internet