Belajar Android PHP MySQL Login dengan Volley

Anda adalah pengguna Aplikasi Android seperti Gojek, 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)){
 //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'])
    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"
        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);
        context = MainActivity.this;

        //Initializing views
        pDialog = new ProgressDialog(context);
        editTextEmail = (EditText) findViewById(R.id.editTextEmail);
        editTextPassword = (EditText) findViewById(R.id.editTextPassword);

        buttonLogin = (AppCompatButton) findViewById(R.id.buttonLogin);

        //Adding click listener
        buttonLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                login();
            }
        });
        //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();
    }

    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"
        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.

Isi email dengan admin@agusharyanto.net dan password dengan abcd1234 lalu klik login

Jika login sukses maka akan menutup MainActivity dan membuka CourseActivity

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

Yang ingin download dalam bentuk pdf

sumber :

https://www.simplifiedcoding.net/

Android App Development Tutorials