Make Login in Android App use MySQL Database - Android Studio

Login in Android App use MySQL Database - Android Studio 

Daftar isi :

• Create Database in MySQL
• Koneksi ke Database
• Membuat Tampilan Login
• Proses Login in Android Studio
• Proses Login in PHP

Assalamu'alaikum Wr. Wb.

Salam untuk kita semua, Jumpa lagi di di blog Mr. Brohid kali ini saya akan berbagi ilmu kepada kalian tentang Cara Membuat Login di Android Studio dengan MySQL Database ( Make Login in Android App use MySQL Database - Android Studio ).  Untuk materi dari artikel ini sudah saya sebuatkan dalam daftar isi di atas. Untuk lebih jelasnya kalian langsung saja masuk ke dalam proses pertama.

1. Create Database in MySQL

Untuk proses pertama ini kita akan membuat database untuk menampung data-data yang akan kita gunakan dalam membuat Login di Aplikasi Android Studio nya. Kalian bisa menggunakan server lokal seperti xampp, wamp, lamp, dll. Di sini saya akan menggunakan xampp sebagai server local saya. Ok setelah kalian jalankan xampp, kita buat database di PHPMyAdmin dengan nama yang sesuai anda ingin kan. Di sini saya akan kasih contoh nama db_android, dan tabelnya terdiri dari sebagai berikut.

Setelah kita membuat database kita buat folder untuk menyimpan data proses login.php nya, kita akan taruh pada xampp.

2. Koneksi ke Database

Di proses ke dua ini kita akan membuat koneksi untuk menghubungakan antara proses PHP bisa masuk ke dalam Android Studio. 

<?php

$server = "localhost";

$username = "root";

$password = "";

$name_db = "db_android";

$conn = mysqli_connect($server, $username, $password, $name_db);

?>

3. Membuat Tampilan Login

Di proses ke tiga ini kita akan membuat tampilan login di aplikasi Android yang kita buat sekarang, Untuk membuat tampilan kita buka dahulu activity_login.xml dan kalian bisa design sessuai keinginan kalian dan sesuka kalian dan di sini saya akan memberi contoh sederhana design tampilan dari Login di bawah ini.

Example :

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.lenovo.myapplication.WelcomeActivity">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="33dp"
        app:srcCompat="@drawable/gambar"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Form Login"
        android:textSize="20dp"
        android:textStyle="bold"
        android:textAlignment="center"
        android:textColor="@color/colorPrimary"
        android:id="@+id/textView4"
        android:layout_below="@+id/imageView2"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="18dp" />

    <EditText
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="19dp"
        android:hint="Username"
        android:textSize="15dp"
        android:textColor="@color/colorPrimary"
        android:textColorHint="@color/colorPrimary"
        android:layout_below="@+id/textView4"
        android:layout_centerHorizontal="true"
        android:id="@+id/editText" />

    <EditText
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:textSize="15dp"
        android:textColor="@color/colorPrimary"
        android:textColorHint="@color/colorPrimary"
        android:layout_below="@+id/editText"
        android:layout_alignStart="@+id/editText"
        android:layout_marginTop="10dp"
        android:id="@+id/editText2" />

    <Button
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="14dp"
        android:hint="Sign In"
        android:background="@color/colorPrimary"
        android:textColorHint="#fff"
        android:textStyle="bold"
        android:layout_below="@+id/editText2"
        android:layout_alignStart="@+id/editText2"
        android:id="@+id/button" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:text="You need account ? Sign up."
        android:layout_below="@+id/button"
        android:layout_alignParentStart="true"
        android:layout_marginTop="20dp" />


</RelativeLayout>

Setelah kita membuat tampilan untuk login sekarang kita akan langsung ke proses selanjutnya.

4. Proses Login di Android Studio

Di proses ke empat kali ini kita akan membuat proses login pada Android Studio. Untuk pembuatannya kita akan menambahkan class baru sebagai wadah untuk proses Login. dan kalian bisa kasih nama proses sesuai yang anda inginkan dan anda sukai. Di sini saya akan kasih nama proses_login.java, di class proses login ini akan menampung proses untuk memproses data supaya bisa mengambil data dari database. oke di bawah ini script proses_login.java. 

Example:

public class proses_login extends AsyncTask<String,Void, String> {

    private String url_proses_login = "http://ip-kalian/proses_android/proses_login.php"; // link proses login di php

    Context context;
    ProgressDialog progressDialog;
    Activity activity;
    AlertDialog.Builder builder;

    public proses_crud(Context context) {
        this.context = context;
        activity = (Activity) context;
    }

    @Override
    protected void onPreExecute() {
        super.onPreExecute();
        builder = new AlertDialog.Builder(activity);
        progressDialog = new ProgressDialog(context);
        progressDialog.setMessage("Koneksi ke server...");
        progressDialog.setIndeterminate(true);
        progressDialog.setCancelable(false);
        progressDialog.show();
    }

    @Override
    protected String doInBackground(String... params) {
        String method = params[0];
        if (method.equals("Login")){
            try {
                URL url = new URL(url_proses_login);
                HttpURLConnection connection = (HttpURLConnection) url.openConnection();
                connection.setRequestMethod("POST");
                connection.setDoOutput(true);
                connection.setDoInput(true);
                OutputStream outputStream = connection.getOutputStream();
                BufferedWriter bufferedWriter = new BufferedWriter(new OutputStreamWriter(outputStream, "UTF-8"));
                String username, password;
                username = params[1];
                password = params[2];

                String data_login = URLEncoder.encode("username", "UTF-8") + "=" + URLEncoder.encode(username, "UTF-8") + "&" +
                        URLEncoder.encode("password", "UTF-8") + "=" + URLEncoder.encode(password, "UTF-8");

                bufferedWriter.write(data_login);
                bufferedWriter.flush();
                bufferedWriter.close();
                outputStream.close();

                InputStream inputStream = connection.getInputStream();
                BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(inputStream));
                StringBuilder stringBuilder = new StringBuilder();
                String line = "";

                while ((line = bufferedReader.readLine()) != null){
                    stringBuilder.append(line + "\n");
                }

                connection.disconnect();
                Thread.sleep(10000);
                return stringBuilder.toString().trim();

            } catch (MalformedURLException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
        return null;
    }

    @Override
    protected void onPostExecute(String s) {
        super.onPostExecute(s);
        try {
            JSONObject jsonObject = new JSONObject(s);
            JSONArray jsonArray = jsonObject.getJSONArray("Server");
            JSONObject JO = jsonArray.getJSONObject(0);
            String code = JO.getString("code");
            String message = JO.getString("pesan");
            if (code.equals("login_true")){
                builder.setMessage(message);
                builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        progressDialog.dismiss();
                        context.startActivity(new Intent(context, HomeActivity.class));
                    }
                });
                AlertDialog alertDialog = builder.create();
                alertDialog.show();
            }else if (code.equals("login_false")){
                builder.setMessage(message);
                builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        progressDialog.dismiss();
                    }
                });
                AlertDialog alertDialog = builder.create();
                alertDialog.show();
            }
        } catch (JSONException e) {
            e.printStackTrace();
        }

    }
}

Setelah kalian selesai menulis script di atas, kalian masuk ke class proses login dan kita akan memanggil class proses login ini ke dalam class login. Masukkan kode script di bawah ini ke dalam class proses login untuk memanggil proses login yang kita buat tadi.

Example :

package com.example.lenovo.myapplication;

import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

import com.example.lenovo.myapplication.proses.proses_crud;

public class WelcomeActivity extends AppCompatActivity {

    EditText username, password;
    Button btn_login;
    TextView yuk;
    AlertDialog.Builder builder;

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

        username = (EditText) findViewById(R.id.editText);
        password = (EditText) findViewById(R.id.editText2);
        btn_login = (Button) findViewById(R.id.button);
        yuk = (TextView) findViewById(R.id.yuk_daftar);
        yuk.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(WelcomeActivity.this, FormRegister.class);
                startActivity(intent);
            }
        });
        btn_login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (username.getText().toString().equals("")||password.getText().toString().equals("")){
                    builder = new AlertDialog.Builder(WelcomeActivity.this);
                    builder.setTitle("Warning..!");
                    builder.setMessage("Your fill not input..!!");
                    builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialogInterface, int i) {
                            dialogInterface.dismiss();
                        }
                    });
                    AlertDialog alertDialog = builder.create();
                    alertDialog.show();
                }
                else {
                    proses_crud backgroundTask = new proses_crud(WelcomeActivity.this);
                    backgroundTask.execute("Login", username.getText().toString(),password.getText().toString());
                }
            }
        });

    }
}

Setelah kalian selesai pembuatan proses di androidnya kita akan membuat proses login pada script php nya pada proses ke lima.

4. Proses Login di Android Studio

Untuk proses ke lima ini kita akan membuat proses_login.php untuk membaca data dari android ke database. 

<?php

                    $nama = $_POST['username'];

                    $pass = $_POST['password'];

                    require "koneksi.php";

                    $query = "SELECT * from table_login where username = '$nama' AND password = '$pass';";

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

                    $row = mysqli_fetch_array($result);

                    if (mysqli_num_rows($result) > 0) {

                                         $response = array();

                                         $code = "login_true";

                                         $message = "Welcome to Apps My Application.";

                                         array_push($response, array("code"=>$code, "pesan"=>$message));

                                         echo json_encode(array("Server"=>$response));

                    }

                    else

                    {                  

                                         $response = array();

                                         $code = "login_false";

                                         $message = "Maaf data anda belum terdaftar..!";

                                         array_push($response, array("code"=>$code, "pesan"=>$message));

                                         echo json_encode(array("Server"=>$response));

                    }

?>

Setelah selesai untuk pembuatan proses login pada php kalian bisa coba jalankan di device kalian. Semoga berhasil dan bertambah ilmunya,

Sekian dari saya apabila ada salah kata atau tulisan saya mohon maaf dan terima kasih sudah mau berkunjiung di blok saya jangan lupa baca artikel lainnya.

Wassalamu'alaikum Wr Wb.