Cara Input Data Menggunakan API Server pada Android

Cara Input Data Menggunakan API Server pada Android - Halo semua, pada kesempatan kali ini kita akan belajar android lagi nih. Kali ini kita akan masuk yang sudah agak advanced nih, kita akan belajar membuat suatu aplikasi untuk menginsert / post / input data ke database dengan android. Pada tutorial kali ini, kita akan menggunakan library Fast Android Networking sebagai Http Client untuk POST data kita ke API Server. Untuk itu, kali ini kita membutuhkan beberapa bahan. Mulai dari library sampai API Server yang akan kita gunakan. Tapi, sebelum itu kita harus ketahui terlebih dahulu apa itu API ?

API (Application Programming Interface) adalah sebuah metode untuk menggabungkan / mengintegrasikan dua aplikasi. Nah, API sendiri bisa diibaratkan sebagai sebuah jembatan yang menggabungkan desa A dengan desa B sehingga desa A dan desa B dapat bersatu.

Untuk lebih jelasnya, kalian bisa mengikuti tutorial ini dari awal sampai akhir dengan seksama ya.

Sama, seperti pengertiannya. Kali ini kita akan menggunakan API untuk menghubungkan database dengan aplikasi android yang akan kita buat.

Sebelum masuk ke kodingannya, ada beberapa bahan yang harus kalian siapkan nih teman – teman.

Yuk langsung aja ke tutorial input data ke database dengan android.

Persiapan

Bagian awal, buatlah sebuah projek baru di Android Studio kalian. Beri Nama sesuai yang kalian inginkan.

Karena kita akan menggunakan Methode post yang membutuhkan koneksi internet, tambahkan permission internet di androidmanifest.

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

Tambahkan baris di atas, pada app -> manifests -> AndroidManifest.xml

Persiapan Library

Untuk mengikuti tutorial ini dengan lancar, pastikan kalian sudah menyiapkan beberapa bahan yang akan kita gunakan kali ini ya.

Library FAN (Fast Android Networking)

Fast Android Networking merupakan sebuah library untuk melakukan beberapa tipe operasi jaringan (POST / GET / PUT) pada aplikasi android.

Untuk menginstall Library FAN ini, kalian perlu menambah baris di dependencies build.gradle kalian,

implementation 'com.amitshekhar.android:android-networking:1.0.2'

Kemudian, sync now.

Material Edit Text

Untuk sedikit mempercantik tampilan edit text kita, kita akan menggunakan library dari rengwuxian untuk mengubah tampilan edit text kita menjadi ala – ala material design.

Install Material Edit Text dengan menambahkan baris ini di dependencies build.gradle

implementation 'com.rengwuxian.materialedittext:library:2.1.4'

Kemudian, sync now.

Hasilnya seperti ini :

Menyiapkan Database

Untuk menyimpan data kita memerlukan sebuah database. Maka, buatlah sebuah database baru kemudian beri nama db_siswa.

Kemudian buat sebuah table baru dengan nama tb_siswa. Isi dengan struktur sebagai berikut :

Supaya lebih gampang / mudah, kalian bisa cukup dengan eksekusi kueri berikut :

-- phpMyAdmin SQL Dump
-- version 4.5.2
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Dec 04, 2019 at 05:10 AM
-- Server version: 5.5.64-MariaDB-1ubuntu0.14.04.1
-- PHP Version: 5.6.23

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_siswa`
--

-- --------------------------------------------------------

--
-- Table structure for table `tb_siswa`
--

CREATE TABLE `tb_siswa` (
`noinduk` varchar(5) NOT NULL,
`nama` varchar(50) DEFAULT NULL,
`alamat` varchar(100) DEFAULT NULL,
`hobi` varchar(50) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tb_siswa`
--

INSERT INTO `tb_siswa` (`noinduk`, `nama`, `alamat`, `hobi`) VALUES
('1', 'Alfansyah', 'Jalan Merdeka', 'Bermain Bola');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tb_siswa`
--
ALTER TABLE `tb_siswa`
ADD UNIQUE KEY `noinduk` (`noinduk`);

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Setelah dieksekusi, akan terbentuk tabel dengan data seperti berikut :

Membuat API

Buatlah sebuah folder baru di direktori web server kalian / htdocs.

Kemudian buat 2 file baru dengan format .php.

Beri nama koneksi.php dan tambahSiswa.php

Koneksi.php

Koneksi.php merupakan file php yang berfungsi sebagai koneksi PHP kita ke database nantinya.

Isi koneksi.php dengan isi seperti berikut :

<?php
$hostname = '127.0.0.1'; //Atur sesuai alamat web server kalian
$username = 'root'; //Atur sesuai username database kalian
$password = '123'; //Atur sesuai password database kalian
$database = 'db_siswa';

$conn = mysqli_connect($hostname,$username,$password,$database);
if(!$conn){
echo "gagal";
}

?>

tambahSiswa.php

FIle ini berfungsi sebagai API kita untuk menginsert / mengirim / input data ke database dari android.

Isi file tambahSiswa.php dengan isi seperti berikut :

<?php

include('koneksi.php');

$nama = $_POST['nama'];
$noinduk = $_POST['noinduk'];
$alamat = $_POST['alamat'];
$hobi = $_POST['hobi'];

if(!empty($nama) && !empty($noinduk)){

$sqlCheck = "SELECT COUNT(*) FROM tb_siswa WHERE noinduk='$noinduk' AND nama='$nama'";
$queryCheck = mysqli_query($conn,$sqlCheck);
$hasilCheck = mysqli_fetch_array($queryCheck);
if($hasilCheck[0] == 0){
$sql = "INSERT INTO tb_siswa (nama,noinduk,alamat,hobi) VALUES('$nama','$noinduk','$alamat','$hobi')";

$query = mysqli_query($conn,$sql);

if(mysqli_affected_rows($conn) > 0){
$data['status'] = true;
$data['result'] = "Berhasil";
}else{
$data['status'] = false;
$data['result'] = "Gagal";
}
}else{
$data['status'] = false;
$data['result'] = "Gagal, Data Sudah Ada";
}

}
else{
$data['status'] = false;
$data['result'] = "Gagal, Nomor Induk dan Nama tidak boleh kosong!";
}

print_r(json_encode($data));

?>

Sampai sini kita sudah membuat API Server kita, nantikan tutorial membuat aplikasi CRUD lengkap dari awal sampai akhir ya :).

Membuat Aplikasi Android

Setelah tahap persiapan, saatnya kita membuat aplikasi android sederhana kita untuk mengirim data.

Aplikasi yang akan kita buat kali ini hanya berupa FORM sederhana untuk menginputkan data – data yang diperlukan seperti nomor induk, nama, alamat, dan hobi.

Kita awali dengan membuat layout terlebih dahulu ya, langsung saja.

Layout

Setelah membuat projek di android studio, akan ada satu activity yaitu MainActivity.

Buka activity_main.xml pada resource -> layout untuk mengedit layout :

Setelah itu, isi dengan kode sebagai berikut :

<?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"
tools:context=".MainActivity"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Tambah Data Siswa"
android:textAlignment="center"
android:textAppearance="?android:textAppearanceLarge"
android:textColor="#000" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:orientation="horizontal"
android:weightSum="6">
<com.rengwuxian.materialedittext.MaterialEditText
android:id="@+id/et_noinduk"
android:layout_weight="6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Nomor Induk"
app:met_floatingLabel="normal"/>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal"
android:weightSum="6">
<com.rengwuxian.materialedittext.MaterialEditText
android:id="@+id/et_nama"
android:layout_weight="6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Nama"
app:met_floatingLabel="normal"/>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal"
android:weightSum="6">
<com.rengwuxian.materialedittext.MaterialEditText
android:id="@+id/et_alamat"
android:layout_weight="6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Alamat"
app:met_floatingLabel="normal"/>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal"
android:weightSum="6">
<com.rengwuxian.materialedittext.MaterialEditText
android:id="@+id/et_hobi"
android:layout_weight="6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Hobi"
app:met_floatingLabel="normal"/>
</LinearLayout>

<Button
android:id="@+id/btn_submit"
android:layout_marginTop="20dp"
android:layout_width="120dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:text="Submit"
android:textAllCaps="false"/>
</LinearLayout>
</LinearLayout>

Setelah ke tahap layouting, lanjut ke Class javanya.

MainActivity.java

Buka file MainActivity.java kalian. Kali ini kita akan mulai mengubah Classnya.

Menginisialisasi Komponen

Bagian pertama, kita akan menginisialisasi komponen – komponen yang kita gunakan pada layout kita.

Buatlah sebuah komponen – komponen pada class Activity seperti ini :

com.rengwuxian.materialedittext.MaterialEditText et_noinduk,et_nama,et_alamat,et_hobi;

String noinduk,nama,alamat,hobi;
Button btn_submit;
ProgressDialog progressDialog;

Di script tersebut, kita membuat beberapa komponen mulai dari

com.rengwuxian.materialedittext.MaterialEditText
String
Button
ProgressDialog

Setelah kita inisialisasi pada bagian class, saatnya kita arahkan variabel komponen yang sudah kita buat tadi dengan id yang ada pada layout.

Isikan script di bawah pada method onCreate(),

et_noinduk = findViewById(R.id.et_noinduk);
et_nama = findViewById(R.id.et_nama);
et_alamat = findViewById(R.id.et_alamat);
et_hobi = findViewById(R.id.et_hobi);
btn_submit = findViewById(R.id.btn_submit);

progressDialog = new ProgressDialog(this);

Membuat Fungsi Validasi Data

Setelah itu, kita akan membuat sebuah fungsi sederhana untuk memvalidasi data yang akan diinputkan.

Buatlah sebuah fungsi baru seperti berikut,

void validasiData(){
if(noinduk.equals("") || nama.equals("") || alamat.equals("") || hobi.equals("")){
progressDialog.dismiss();
Toast.makeText(MainActivity.this, "Periksa kembali data yang anda masukkan !", Toast.LENGTH_SHORT).show();
}else {
kirimData();
}
}

Jika data – data seperti no. induk, nama,alamat, atau hobi kosong maka kita tidak akan mengeksekusi fungsi kirim data.

Membuat Fungsi Kirim Data

Pada fungsi ini, baru data akan dikirim / POST ke API server menggunakan library FAN yang sudah diinstal tadi.

Untuk melakukan Metode POST / GET pada FAN sangatlah mudah. Dapat dilihat pada fungsi berikut :

void kirimData(){
AndroidNetworking.post("http://192.168.168.11/api-funtechsy/tambahSiswa.php")
.addBodyParameter("noinduk",""+noinduk)
.addBodyParameter("nama",""+nama)
.addBodyParameter("alamat",""+alamat)
.addBodyParameter("hobi",""+hobi)
.setPriority(Priority.MEDIUM)
.setTag("Tambah Data")
.build()
.getAsJSONObject(new JSONObjectRequestListener() {
@Override
public void onResponse(JSONObject response) {
progressDialog.dismiss();
Log.d("Status",""+response);
try {
Boolean status = response.getBoolean("status");
String pesan = response.getString("result");
Toast.makeText(MainActivity.this, ""+pesan, Toast.LENGTH_SHORT).show();
Log.d("status",""+status);
if(status){
new AlertDialog.Builder(MainActivity.this)
.setMessage("Berhasil Menambahkan Data !")
.setCancelable(false)
.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
et_noinduk.getText().clear();
et_nama.getText().clear();
et_alamat.getText().clear();
et_hobi.getText().clear();
}
})
.show();
}
else{
new AlertDialog.Builder(MainActivity.this)
.setMessage("Gagal Menambahkan Data !")
.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
})
.setCancelable(false)
.show();
}
}catch (Exception e){
e.printStackTrace();
}

}

@Override
public void onError(ANError anError) {
Log.d("ErrorTambahData",""+anError.getErrorBody());
}
});
}

Di fungsi tersebut, kita mengirimkan noinduk,nama,alamat,dan hobi ke API Server. Kemudian, di kodingan tersebut ada kondisi yang mana apabila respon status yang kita dapat bernilai true maka akan muncul dialog Berhasil begitupun sebaliknya.

Membuat Button Click Listener

Setelah membuat fungsi – fungsi seperti di atas, saatnya kita membuat button listener untuk ‘mendengarkan’ saat button diclick.

btn_submit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
progressDialog.setMessage("Menambahkan Data...");
progressDialog.setCancelable(false);
progressDialog.show();

noinduk = et_noinduk.getText().toString();
nama = et_nama.getText().toString();
alamat = et_alamat.getText().toString();
hobi = et_hobi.getText().toString();

new Handler().postDelayed(new Runnable() {
@Override
public void run() {
validasiData();
}
},1000);
}
});

Full Code

Sehingga, MainActivity.java akan terlihat seperti berikut :

package com.example.pkl.funtechsy;

import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Handler;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.androidnetworking.AndroidNetworking;
import com.androidnetworking.common.Priority;
import com.androidnetworking.error.ANError;
import com.androidnetworking.interfaces.JSONObjectRequestListener;

import org.json.JSONObject;

public class MainActivity extends AppCompatActivity {

com.rengwuxian.materialedittext.MaterialEditText et_noinduk,et_nama,et_alamat,et_hobi;
String noinduk,nama,alamat,hobi;
Button btn_submit;
ProgressDialog progressDialog;

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

et_noinduk = findViewById(R.id.et_noinduk);
et_nama = findViewById(R.id.et_nama);
et_alamat = findViewById(R.id.et_alamat);
et_hobi = findViewById(R.id.et_hobi);
btn_submit = findViewById(R.id.btn_submit);

progressDialog = new ProgressDialog(this);

btn_submit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
progressDialog.setMessage("Menambahkan Data...");
progressDialog.setCancelable(false);
progressDialog.show();

noinduk = et_noinduk.getText().toString();
nama = et_nama.getText().toString();
alamat = et_alamat.getText().toString();
hobi = et_hobi.getText().toString();

new Handler().postDelayed(new Runnable() {
@Override
public void run() {
validasiData();
}
},1000);
}
});

}

void validasiData(){
if(noinduk.equals("") || nama.equals("") || alamat.equals("") || hobi.equals("")){
progressDialog.dismiss();
Toast.makeText(MainActivity.this, "Periksa kembali data yang anda masukkan !", Toast.LENGTH_SHORT).show();
}else {
kirimData();
}
}

void kirimData(){
AndroidNetworking.post("http://192.168.168.11/api-funtechsy/tambahSiswa.php")
.addBodyParameter("noinduk",""+noinduk)
.addBodyParameter("nama",""+nama)
.addBodyParameter("alamat",""+alamat)
.addBodyParameter("hobi",""+hobi)
.setPriority(Priority.MEDIUM)
.setTag("Tambah Data")
.build()
.getAsJSONObject(new JSONObjectRequestListener() {
@Override
public void onResponse(JSONObject response) {
progressDialog.dismiss();
Log.d("Status",""+response);
try {
Boolean status = response.getBoolean("status");
String pesan = response.getString("result");
Toast.makeText(MainActivity.this, ""+pesan, Toast.LENGTH_SHORT).show();
Log.d("status",""+status);
if(status){
new AlertDialog.Builder(MainActivity.this)
.setMessage("Berhasil Menambahkan Data !")
.setCancelable(false)
.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
et_noinduk.getText().clear();
et_nama.getText().clear();
et_alamat.getText().clear();
et_hobi.getText().clear();
}
})
.show();
}
else{
new AlertDialog.Builder(MainActivity.this)
.setMessage("Gagal Menambahkan Data !")
.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
})
.setCancelable(false)
.show();
}
}catch (Exception e){
e.printStackTrace();
}

}

@Override
public void onError(ANError anError) {
Log.d("ErrorTambahData",""+anError.getErrorBody());
}
});
}
}

Sampai sini kita telah berhasil membuat aplikasinya, jalankan aplikasi tersebut dan hasilnya akan seperti gambar di bawah :

Dannn, data berhasil di inputkan di database

Dengan menggunakan API untuk input data ke database , tentu akan jauh lebih efektif. Karena dengan menggunakan API, kita cukup merubah API dengan konfigurasi sesuai yang kita inginkan.

Kalau kalian merasa artikel ini bermanfaat, jangan lupa tinggalkan komentar ya.

Terima Kasih.

Cara Input Data Menggunakan API Server pada Android

Persiapan