Membuat Aplikasi Android Upload Gambar

Langkah awal dalam tutorial yaitu membuat database dengan nama volley_upload dengan nama tabel volley_upload dan struktur tabelnya seperti berikut :

Membuat web service untuk parsing data aplikasi android.
koneksi.php
Sebagai koneksi aplikasi ke database. Coding-nya dibawah.

<?php
    $server 	= "localhost";
    $username 	= "root";
    $password	= "enter";
    $database 	= "volley_upload";
    
    $con = mysqli_connect($server, $username, $password, $database);
    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
?>

upload.php
Untuk upload gambar ke sever dan menyimpan data di database. Coding-nya dibawah.

<?php
    include_once "koneksi.php";
    
    class emp{}
    
    $image = $_POST['image'];
    $name = $_POST['name'];
    
    if (empty($name)) { 
        $response = new emp();
        $response->success = 0;
        $response->message = "Please dont empty Name."; 
        die(json_encode($response));
    } else {
        $random = random_word(20);
        
        $path = "images/".$random.".png";
        
        // sesuiakan ip address laptop/pc atau URL server
        $actualpath = "http://192.168.10.177/android/upload_image/$path";
        
        $query = mysqli_query($con, "INSERT INTO volley_upload (photo,name) VALUES ('$actualpath','$name')");
        
        if ($query){
            file_put_contents($path,base64_decode($image));
            
            $response = new emp();
            $response->success = 1;
            $response->message = "Successfully Uploaded";
            die(json_encode($response));
        } else{ 
            $response = new emp();
            $response->success = 0;
            $response->message = "Error Upload image";
            die(json_encode($response)); 
        }
    }	
    
    // fungsi random string pada gambar untuk menghindari nama file yang sama
    function random_word($id = 20){
        $pool = '1234567890abcdefghijkmnpqrstuvwxyz';
        
        $word = '';
        for ($i = 0; $i < $id; $i++){
            $word .= substr($pool, mt_rand(0, strlen($pool) -1), 1);
        }
        return $word; 
    }

    mysqli_close($con);
    
?>

Buat project baru di Android Studio File ⇒ New Project. Kemudian pilih Blank Activity dan melanjutkannya hingga selesai.

activity_main.xml
Layout container untuk floating action button.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    tools:context="com.chandra.uploadimage.MainActivity">


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/buttonUpload"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_menu_upload" />

</android.support.design.widget.CoordinatorLayout>

content_main.xml
Untuk menampilkan gambar setelah memilih dari galeri.

<?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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.chandra.uploadimage.MainActivity"
    tools:showIn="@layout/activity_main">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Choose Image"
        android:id="@+id/buttonChoose"
        android:drawableRight="@android:drawable/ic_menu_gallery"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/imageView" />

    <EditText
        android:id="@+id/editText"
        android:hint="Enter a Name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Buka build.gradle dan tambahkan volley library didalamnya.

compile 'com.android.volley:volley:1.0.0'

build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:26.+'
    compile 'com.android.support:design:26.+'
    compile 'com.android.volley:volley:1.0.0'
}

Agar project terstruktur dan terorganisir, buat 2 paket dengan nama app dan volley. Untuk membuat paket baru , klik kanan pada src=>New=>Peckage dan memberikan nama paket. Contoh : com.chandra.uploadimage.

Buat class dengan nama LruBitmapCache.java didalam package volley dan tambah coding seperti dibawah ini. Class ini berfungsi untuk mengatur caching network image dalam penyimpanan.
LruBitmapCache.java

Buat class AppController.java didalam package app dan tambah coding seperti dibawah ini. Class tunggal yang menginisialisasi class global yang diperlukan. Semua objek yang berhubungan dengan volley diinisialisasi di sini.
AppController.java

Buka class MainActivity.java dan tambahkan coding seperti dibawah ini. Class ini berfungsi untuk meng-upload gambar dan nama ke server.
MainActivity.java

Tambahkan perijinan INTERNET dan android:name=”.app.AppController” dalam tag application pada AndroidManifest.xml.

Terakhir, mari kita Run Aplikasinya.