Dokumen tersebut memberikan panduan lengkap untuk membuat aplikasi login Android menggunakan Volley dengan backend PHP dan MySQL. Langkah-langkahnya meliputi persiapan database di server, membuat script PHP untuk login, mendesain antarmuka pengguna di Android, dan mengimplementasikan request login menggunakan Volley.
2. Belajar Android PHP MySQL Login dengan Volley
Agus Haryanto
agus.superwriter@gmail.com
http://agusharyanto.net
Anda adalah pengguna Aplikasi Android seperti Gojek, Lazada. kalau ia tentunya untuk
menggunakan aplikasi tersebut anda harus mendaftar dulu dan kemudian Login untuk
menggunakan aplikasi tersebut. Tidak hanya Gojek aplikasi facebook, instagram, traveloka pun ada
proses loginnya. Yang suka belanja online dengan Aplikasi Lazada, TokoPedia, Bli,bli, elevenia,
buka lapak mengharuskan anda untuk login agar bisa bertransaksi.
Jadi timbul pertanyaan nih, kenapa harus pakai login ?. Silahkan dijawab adik-adik mahasiswaku
yang pintar-pintar, cantik dan ganteng, serta menjadi kebanggaan orang tua.
Buat yang penasaran ingin tahu pembuatan Aplikasi android yang ada loginnya. Anda berada
ditempat yang tepat karena materi belajar android kita kali ini akan membahas tentang Login
dengan Volley tentu saja disisi servernya mengguanakan Apache sebagai webservernya, php sebagai
server side scriptnya dan MySQL sebagai databasenya. Untuk itu pastikan di PC atau laptop anda
sudah terinstall semuanya.
Persiapan disisi Server
1. Pertama buka phpmyadmin lalu buat database dengan nama “dbcourse”
2. Pilih “dbcourse” lalu buat table dengan nama “users”
CREATE TABLE IF NOT EXISTS `users` (
`id` int(4) NOT NULL,
`username` varchar(32) NOT NULL,
`password` varchar(64) NOT NULL,
`email` varchar(32) NOT NULL,
`accountname` varchar(32) NOT NULL,
`status` int(4) NOT NULL DEFAULT '1'
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;
ALTER TABLE `users`
ADD PRIMARY KEY (`id`);
INSERT INTO `users` (`id`, `username`, `password`, `email`, `accountname`, `status`) VALUES
(1, 'admin', 'abcd1234', 'admin@agusharyanto.net', 'Admin', 1);
3. Buat script php untuk login simpan dengan nama “login.php”
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB','dbcourse');
$con = mysqli_connect(HOST,USER,PASS,DB) or die('Unable to Connect');
if($_SERVER['REQUEST_METHOD']=='POST'){
//Getting values
$username = $_POST['email'];
$password = $_POST['password'];
//Creating sql query
$sql = "SELECT * FROM users WHERE email='$username' AND password='$password'";
//executing query
$result = mysqli_query($con,$sql);
//fetching result
$check = mysqli_fetch_array($result);
//if we got some result
if(isset($check)){
3. //displaying success
echo "success";
}else{
//displaying failure
echo "failure";
}
mysqli_close($con);
}
?>
Pengerjaan disisi Android
1. Sekarang mari kita buat project dengan nama “LoginWithVolley”
2. Klik Next lalu pada pilihan Activity pilih “EmptyActivity”
Klik Next sampai Finish. Setelah finish maka otomatis project terbuat.
3. Selanjutnya kita tambahkan library Volley pada dependencies bulid.gradle (modul:app).
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
4. testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.2.0'
compile 'com.android.support:design:23.2.0'
compile 'com.mcxiaoke.volley:library-aar:1.0.0'
}
Library Volley ini membantu kita dalam urusan komunikasi ke server. Sebelumnya kita perlu
membuat Assynctask untuk komunikasi ke server. Dengan Volley tidak lagi karena sudah diurus
oleh Volley.
4. Sekarang kita urus layout untuk loginnya, untuk itu buka activity_main.xml lalu ketikkan kode
berikut
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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"
android:orientation="vertical"
tools:context="net.agusharyanto.loginwithvolley.MainActivity">
<ImageView
android:background="@mipmap/ic_launcher"
android:layout_gravity="center_horizontal"
android:layout_width="150dp"
android:layout_height="150dp" />
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp">
<EditText android:id="@+id/editTextEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="Email" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp">
<EditText android:id="@+id/editTextPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="Password"/>
</android.support.design.widget.TextInputLayout>
<android.support.v7.widget.AppCompatButton
android:id="@+id/buttonLogin"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:textColor="@android:color/white"
5. android:layout_marginTop="24dp"
android:layout_marginBottom="24dp"
android:padding="12dp"
android:text="Login"/>
</LinearLayout>
5. Buat class baru dengan nama AppVar lalu ketikan kode berikut
package net.agusharyanto.loginwithvolley;
/**
* Created by agus on 3/23/16.
*/
public class AppVar {
//URL to our login.php file, url bisa diganti sesuai dengan alamat server
kita
public static final String LOGIN_URL =
"http://192.168.0.101/course/login.php";
//Keys for email and password as defined in our $_POST['key'] in login.php
public static final String KEY_EMAIL = "email";
public static final String KEY_PASSWORD = "password";
//If server response is equal to this that means login is successful
public static final String LOGIN_SUCCESS = "success";
}
6. Sekarang mari kita buka MainActivity.java lalu ketikan kode berikut
package net.agusharyanto.loginwithvolley;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.AppCompatButton;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
import com.android.volley.AuthFailureError;
import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.android.volley.toolbox.Volley;
import java.util.HashMap;
import java.util.Map;
public class MainActivity extends AppCompatActivity {
//Defining views
private EditText editTextEmail;
private EditText editTextPassword;
private Context context;
private AppCompatButton buttonLogin;
private ProgressDialog pDialog;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
7. });
//editTextEmail.setText("admin@agusharyanto.net");
//editTextPassword.setText("abcd1234");
}
private void login() {
//Getting values from edit texts
final String email = editTextEmail.getText().toString().trim();
final String password = editTextPassword.getText().toString().trim();
pDialog.setMessage("Login Process...");
showDialog();
//Creating a string request
StringRequest stringRequest = new StringRequest(Request.Method.POST,
AppVar.LOGIN_URL,
new Response.Listener<String>() {
@Override
public void onResponse(String response) {
//If we are getting success from server
if (response.contains(AppVar.LOGIN_SUCCESS)) {
hideDialog();
gotoCourseActivity();
} else {
hideDialog();
//Displaying an error message on toast
Toast.makeText(context, "Invalid username or
password", Toast.LENGTH_LONG).show();
}
}
},
new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
//You can handle error here if you want
hideDialog();
Toast.makeText(context, "The server unreachable",
Toast.LENGTH_LONG).show();
}
}) {
@Override
protected Map<String, String> getParams() throws AuthFailureError {
Map<String, String> params = new HashMap<>();
//Adding parameters to request
params.put(AppVar.KEY_EMAIL, email);
params.put(AppVar.KEY_PASSWORD, password);
//returning parameter
return params;
}
};
//Adding the string request to the queue
Volley.newRequestQueue(this).add(stringRequest);
}
private void gotoCourseActivity() {
Intent intent = new Intent(context, CourseActivity.class);
startActivity(intent);
finish();
}
private void showDialog() {
if (!pDialog.isShowing())
pDialog.show();
8. }
private void hideDialog() {
if (pDialog.isShowing())
pDialog.dismiss();
}
}
Wah kok masih ada error dibagian code yang ada CourseActivity.class tenang itu terjadi
karena kita belum mebuat Activity CourseActivity. Pada code diatas setelah kita sentuh tombol
login maka username/email dan password kita akan dikirim ke server untuk dicek apakah benar
tidak jika benar maka server akan mengirimkan response “success”. Jika login success makan akan
membuka Activty CourseActivty.
7. Buat Activity Baru dengan nama CourseActivity. Caranya klik kanan package
net.agusharyanto.loginwithvolley lalu pilih New > Activity > Empty Activity seperti gambar
dibawah ini.
Isi Activity Name dengan CourseActivity lalu klik Finish. Ini ototamatis juga membuat Layout
activity_course.xml dan langsung terdaftar di AndroidManifest.xml
8. Edit activity_course.xml lalu ketikan kode berikut
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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=".CourseActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
9. android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="@drawable/agusharyantonet" />
</RelativeLayout>
Kalau ada yang error di android:src="@drawable/agusharyantonet" bisa menggantinya
dengan android:src="@mipmap/ic_launcher"
9. Jangan lupa tambahkan permission Internet pada AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="net.agusharyanto.loginwithvolley">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".CourseActivity"
android:label="agusharyanto.net"></activity>
</application>
</manifest>
10. Sekarang mari kita run projectnya.
10. Isi email dengan admin@agusharyanto.net dan
password dengan abcd1234
Bagaimana enakan pakai Volley. Tinggal masukkan address dan parameternya, kita tinggal tangkap
responsenya, kalau ada error tempat response error juga sudah disediakan.
Untuk source codenya bisa dilihat di https://github.com/jatisari/LoginWithVolley
sumber:
https://www.simplifiedcoding.net/
http://androidhive.info