CARA MENAMPILKAN DATA DARI DATABASE MYSQL KE LAYOUT ANDROID DENGAN ANDROID STUDIO MENGGUNAKAN VOLLEY

CARA MENAMPILKAN DATA DARI DATABASE MYSQL KE LAYOUT ANDROID DENGAN ANDROID STUDIO MENGGUNAKAN VOLLEY

Langkah Pertama

Buat database dan tabel baru di xampp control panel seperti berikut ini :

id sebagai primary key

lalu isi setiap masing-masing kolom dari tabel tersebut seperti berikut :

Langkah Kedua

Sebelum melangkah ke android studio, buatlah folder didalam htdocs (htdocs sendiri biasanya terletak di folder Xampp yang berada di Local Disk C). Kali ini  saya membuat folder bernama toko didalam folder htdocs tersebut. 

Jangan lupa menambahkan folder img didalam folder toko. Folder img ini berfungsi untuk menaruh atau menyimpan gambar yang akan kita panggil nantinya. Contohnya adalah sebagai berikut :

Didalam folder img, kita tambahkan gambar dengan nama file yang sesuai didalam tabel pada database yang telah dibuat sebelumnya. Seperti berikut Contohnya :

Langkah Ketiga

Membuat file koneksi.php dan getdata.php

• source code koneksi.php
  <?php
  $server       ="localhost";
  $username     ="root";
  $password     ="";
  $database     ="toko";
  
  mysql_connect($server, $username, $password) or die("Koneksi tidak ada");
  mysql_select_db($database) or die("Database tidak ditemukan");
  ?>
• source code getdata.php
  <?php 
   include 'koneksi.php';
   $hasil         = mysql_query("SELECT * FROM barang") or die(mysql_error());
   $json_response = array();
  
  if(mysql_num_rows($hasil)> 0){
  while ($row = mysql_fetch_array($hasil)) {
  $json_response[] = $row;
  }
  echo json_encode(array('barang' => $json_response));}
  ?>

Simpan kedua file tersebut didalam folder toko yang ada di htdocs tad, seperti berikut contohnya :

Langkah Keempat

Buka Android Studio anda dan buat project baru seperti contoh pada gambar dibawah ini

Tambahkan Source Code ini didalam build.gradle (Module app)

compile 'com.github.bumptech.glide:volley-integration:1.4.0'

Tambahkan source code berikut ini didalam AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />

Source code activity_main.xml
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.ugiksetyawan.toko.MainActivity">

    <ImageView
        android:id="@+id/imgbarang"
        android:layout_width="360dp"
        android:layout_height="300dp"
        android:layout_below="@+id/txtnama"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="11dp"
        android:scaleType="centerCrop" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="18dp"
                android:id="@+id/relativeLayout">

                <TextView
                    android:id="@+id/txtharga"
                    android:layout_width="366dp"
                    android:layout_height="60dp"
                    android:layout_above="@+id/txtstock"
                    android:layout_alignLeft="@+id/txtstock"
                    android:layout_alignStart="@+id/txtstock"
                    android:layout_marginBottom="12dp"
                    android:text="Harga Barang"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"/>

                <TextView
                    android:id="@+id/txtstock"
                    android:layout_width="371dp"
                    android:layout_height="70dp"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:text="Stock"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/txtharga" />

            </RelativeLayout>

    <TextView
        android:id="@+id/txtnama"
        android:layout_width="370dp"
        android:layout_height="20dp"
        android:layout_alignLeft="@+id/imgbarang"
        android:layout_alignParentTop="true"
        android:layout_alignStart="@+id/imgbarang"
        android:layout_marginTop="16dp"
        android:text="Nama Barang"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="UnknownId" />
</RelativeLayout>

Maka Tampilannya akan seperti berikut ini

Source code MainActivity.java

package com.example.ugiksetyawan.toko;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.android.volley.toolbox.Volley;
import com.bumptech.glide.Glide;
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 {

    private ImageView imgbarang;
    private TextView txtnama, txtharga, txtstock;

    private RequestQueue requestQueue;
    private StringRequest stringRequest;

    ArrayList<HashMap<String, String>> list_data;

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String url = "http://192.168.43.251/toko/getdata.php"; //sesuaikan dengan ip pc anda
        imgbarang = (ImageView)findViewById(R.id.imgbarang);
        txtnama = (TextView)findViewById(R.id.txtnama);
        txtharga = (TextView)findViewById(R.id.txtharga);
        txtstock = (TextView)findViewById(R.id.txtstock);

        requestQueue = Volley.newRequestQueue(MainActivity.this);

        list_data = new ArrayList<HashMap<String, String>>();

        stringRequest = new StringRequest(Request.Method.GET, url, new Response.Listener<String>() {
            @Override            public void onResponse(String response) {
                try {
                    JSONObject jsonObject = new JSONObject(response);
                    JSONArray jsonArray = jsonObject.getJSONArray("barang");
                    for (int a = 0; a < jsonArray.length(); a ++){
                        JSONObject json = jsonArray.getJSONObject(a);
                        HashMap<String, String> map  = new HashMap<String, String>();
                        map.put("id", json.getString("id"));
                        map.put("nama_barang", json.getString("nama_barang"));
                        map.put("gambar", json.getString("gambar"));
                        map.put("harga_barang", json.getString("harga_barang"));
                        map.put("stock", json.getString("stock"));
                        list_data.add(map);
                    }
                    Glide.with(getApplicationContext())
                            .load("http://192.168.43.251/toko/img/" + list_data.get(0).get("gambar"))
                            .crossFade()
                            .placeholder(R.mipmap.indomie)
                            .into(imgbarang);
                    txtnama.setText(list_data.get(0).get("nama_barang"));
                    txtharga.setText(list_data.get(0).get("harga_barang"));
                    txtstock.setText(list_data.get(0).get("stock"));
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        }, new Response.ErrorListener() {
            @Override            public void onErrorResponse(VolleyError error) {
                Toast.makeText(MainActivity.this, error.getMessage(), Toast.LENGTH_LONG).show();
            }
        });

        requestQueue.add(stringRequest);
    }
}

Catatan :

String url = "http://192.168.43.251/toko/getdata.php"; //sesuaikan ip di pc anda

didalam source code MainAvtivity.java, sesuaikan alamat ip anda, caranya yaitu buka cmd dan ketik ipconfig

Aplikasi siap dijalankan

Cek video untuk melihat tampilan