Mobile Programming

Membuat Form Daftar dan Login dengan PHP MySQL #2

1 minggu ago
0 5 minutes read

Hai semua. Dalam tutorial kali ini kita akan melanjutkan artikel sebelumnya, yaitu tentang Membuat Form Daftar dan Login dengan PHP MySQL #1. Dimana dalam tutorial ini kita akan focus membuat tampilannya menggunakan Android Studio. Tapi sebelum lanjut, saya ingatkan kembali bahwa dalam Membuat Form Daftar dan Login dengan PHP MySQL #2 ini membutuhkan server, baik itu local maupun tidak dan juga pastikan kalian sudah membuat API yang kita butuhkan diartikel sebelumnya.

Tampilan

Ada 3 jenis tampilan yang akan kita buat, yaitu :

  1. Formulir Pendaftaran Android – Pengguna dapat mendaftar menggunakan Nama, Email, Usia dan Jenis Kelamin. Pada pendaftaran yang berhasil, kredensial pengguna akan disimpan pada DB yang dibuat di server backend kalian. Akan ada tautan ke Layar Masuk Android untuk pengguna yang sudah terdaftar.
  2. Layar Login Android – Pengguna yang sudah terdaftar dapat login di sini. Data yang dimasukkan pengguna akan diverifikasi terhadap data yang disimpan di server backend sebelum berhasil masuk. Akan ada tautan ke formulir pendaftaran android jika pengguna belum terdaftar.
  3. Aktivitas pengguna – Setelah pengguna memasukkan email dan kata sandi yang benar di layar Login Android, ia akan dibawa ke aktivitas ini dan ditampilkan pesan selamat datang beserta namanya.

Membuat Project Baru

  1. Buka File → New → New Project dan masukkan Nama Aplikasi kalian.
  2. Masukkan Domain Perusahaan, ini digunakan untuk mengidentifikasi secara unik paket Aplikasi Anda di seluruh dunia.
  3. Pilih lokasi proyek dan SDK minimum, dan pada layar berikutnya pilih Empty Activity, karena kita akan menambahkan sebagian besar kode itu sendiri. Kemudian Klik Next.
  4. Pilih Activity Name. Pastikan centang Generate Layout File, Jika tidak, kita harus membuatnya sendiri. Kemudian klik Selesai. Kami menggunakan Activity Name sebagai LoginActivity . Ini mewakili layar Android Login untuk aplikasi yang akan kita buat.
  5. Gradle akan mengonfigurasi proyek Anda dan menyelesaikan dependensi, Setelah selesai, lanjutkan ke langkah selanjutnya.
  6. Untuk menambahkan Volley ke proyek Anda, tambahkan dependensi berikut dalam file build.gradle App kalian .
compile 'com.android.volley:volley:1.0.0'

Menambahkan Andoid Internet Permission

Tambahkan kode berikut ke AndroidManifest.xml kalian :

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

Membuat Tampilan Layar Login

Buat file activity_login.xml dan tambahkan kode berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:background="@color/bg_login"
    android:gravity="center"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scrollbars="vertical"
    android:fillViewport="true"
    android:paddingLeft="20dp"
    android:paddingRight="20dp" >
    <android.support.design.widget.TextInputLayout
        android:id="@+id/login_input_layout_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/login_input_email"
            android:textColor="#000000"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            android:hint="@string/hint_email" />
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/login_input_layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/login_input_password"
            android:textColor="#000000"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="@string/hint_password" />
    </android.support.design.widget.TextInputLayout>
    <Button android:id="@+id/btn_login"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn_login"
        android:background="@color/login_button_background"
        android:layout_marginTop="20dp"
        android:textColor="@android:color/white"/>
    <Button android:id="@+id/btn_link_signup"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn_link_signup"
        android:background="@null"
        android:layout_marginTop="3dp"
        android:textColor="@android:color/black"/>
</LinearLayout>

Membuat LoginActivity.java

Buka LoginActivity.java dan tambahkan kode berikut.

package com.gubugcoding.androidlogin;
 
import android.app.ProgressDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Button;
import android.widget.EditText;
import android.content.Intent;
import android.view.View;
import android.widget.Toast;
import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.HashMap;
import java.util.Map;
 
 
public class LoginActivity extends AppCompatActivity {
 
    private static final String TAG = "LoginActivity";
    private static final String URL_FOR_LOGIN = "https://XXX.XXX.X.XX/android_login_example/login.php";
    ProgressDialog progressDialog;
    private EditText loginInputEmail, loginInputPassword;
    private Button btnlogin;
    private Button btnLinkSignup;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        loginInputEmail = (EditText) findViewById(R.id.login_input_email);
        loginInputPassword = (EditText) findViewById(R.id.login_input_password);
        btnlogin = (Button) findViewById(R.id.btn_login);
        btnLinkSignup = (Button) findViewById(R.id.btn_link_signup);
        // Progress dialog
        progressDialog = new ProgressDialog(this);
        progressDialog.setCancelable(false);
 
        btnlogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                loginUser(loginInputEmail.getText().toString(),
                        loginInputPassword.getText().toString());
            }
        });
 
        btnLinkSignup.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent i = new Intent(getApplicationContext(), RegisterActivity.class);
                startActivity(i);
 
            }
        });
    }
 
    private void loginUser( final String email, final String password) {
        // Tag used to cancel the request
        String cancel_req_tag = "login";
        progressDialog.setMessage("Logging you in...");
        showDialog();
        StringRequest strReq = new StringRequest(Request.Method.POST,
                URL_FOR_LOGIN, new Response.Listener<String>() {
 
            @Override
            public void onResponse(String response) {
                Log.d(TAG, "Register Response: " + response.toString());
                hideDialog();
                try {
                    JSONObject jObj = new JSONObject(response);
                    boolean error = jObj.getBoolean("error");
 
                    if (!error) {
                        String user = jObj.getJSONObject("user").getString("name");
                        // Launch User activity
                        Intent intent = new Intent(
                                LoginActivity.this,
                                UserActivity.class);
                        intent.putExtra("username", user);
                        startActivity(intent);
                        finish();
                    } else {
 
                        String errorMsg = jObj.getString("error_msg");
                        Toast.makeText(getApplicationContext(),
                                errorMsg, Toast.LENGTH_LONG).show();
                    }
                } catch (JSONException e) {
                    e.printStackTrace();
                }
 
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                Log.e(TAG, "Login Error: " + error.getMessage());
                Toast.makeText(getApplicationContext(),
                        error.getMessage(), Toast.LENGTH_LONG).show();
                hideDialog();
            }
        }) {
           @Override
            protected Map<String, String> getParams() {
                // Posting params to login url
                Map<String, String> params = new HashMap<String, String>();
                params.put("email", email);
                params.put("password", password);
                return params;
            }
        };
        // Adding request to request queue
        AppSingleton.getInstance(getApplicationContext()).addToRequestQueue(strReq,cancel_req_tag);
    }
 
    private void showDialog() {
        if (!progressDialog.isShowing())
            progressDialog.show();
    }
    private void hideDialog() {
        if (progressDialog.isShowing())
            progressDialog.dismiss();
    }
}

Membuat Form Daftar

Buat file activity_register.xml dan tambahkan kode berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="10dp" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:paddingLeft="20dp"
        android:paddingRight="20dp" >
        <android.support.design.widget.TextInputLayout
            android:id="@+id/signup_input_layout_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp">
            <EditText
                android:id="@+id/signup_input_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ems="10"
                android:hint="Name"/>
        </android.support.design.widget.TextInputLayout>
        <android.support.design.widget.TextInputLayout
            android:id="@+id/signup_input_layout_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp">
            <EditText
                android:id="@+id/signup_input_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ems="10"
                android:inputType="textEmailAddress"
                android:hint="Email" />
        </android.support.design.widget.TextInputLayout>
        <android.support.design.widget.TextInputLayout
            android:id="@+id/signup_input_layout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp">
            <EditText
                android:id="@+id/signup_input_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ems="10"
                android:inputType="textPassword"
                android:hint="@string/hint_password" />
        </android.support.design.widget.TextInputLayout>
        <android.support.design.widget.TextInputLayout
            android:id="@+id/signup_input_layout_age"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp">
            <EditText
                android:id="@+id/signup_input_age"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ems="10"
                android:hint="@string/hint_dob"/>
        </android.support.design.widget.TextInputLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="20dp">
            <TextView
                android:id="@+id/gender_textview"
                android:paddingRight="15dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/hint_gender"
                android:fontFeatureSettings="@string/hint_password"
                android:textSize="20dp"
                android:fontFamily="@string/hint_password"/>
            <RadioGroup
                android:id="@+id/gender_radio_group"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/gender_textview"
                android:orientation="horizontal">
                <RadioButton
                    android:id="@+id/male_radio_btn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/male"
                    android:checked="true"
                    />
                <RadioButton
                    android:id="@+id/female_radio_btn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text = "@string/female"
                    />
            </RadioGroup>
        </RelativeLayout>
        <Button android:id="@+id/btn_signup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/btn_sign_up"
            android:background="@color/login_button_background"
            android:layout_marginTop="40dp"
            android:textColor="@android:color/white"/>
        <Button android:id="@+id/btn_link_login"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/btn_link_login"
            android:background="@null"
            android:layout_marginTop="3dp"
            android:textColor="@android:color/black"/>
    </LinearLayout>
</LinearLayout>
[artikel number=5 tag=”android” ]

Membuat RegisterActivity.java

Buka RegisterActivity.java dan tambahkan kode berikut.

package com.gubugcoding.androidlogin;
 
import android.app.ProgressDialog;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioGroup;
import android.widget.Toast;
import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.HashMap;
import java.util.Map;
 
public class RegisterActivity extends AppCompatActivity {
 
    private static final String TAG = "RegisterActivity";
    private static final String URL_FOR_REGISTRATION = "https://XXX.XXX.X.XX/android_login_example/register.php";
    ProgressDialog progressDialog;
 
    private EditText signupInputName, signupInputEmail, signupInputPassword, signupInputAge;
    private Button btnSignUp;
    private Button btnLinkLogin;
    private RadioGroup genderRadioGroup;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);
 
        // Progress dialog
        progressDialog = new ProgressDialog(this);
        progressDialog.setCancelable(false);
 
        signupInputName = (EditText) findViewById(R.id.signup_input_name);
        signupInputEmail = (EditText) findViewById(R.id.signup_input_email);
        signupInputPassword = (EditText) findViewById(R.id.signup_input_password);
        signupInputAge = (EditText) findViewById(R.id.signup_input_age);
 
        btnSignUp = (Button) findViewById(R.id.btn_signup);
        btnLinkLogin = (Button) findViewById(R.id.btn_link_login);
 
        genderRadioGroup = (RadioGroup) findViewById(R.id.gender_radio_group);
        btnSignUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                submitForm();
            }
        });
        btnLinkLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
 
                Intent i = new Intent(getApplicationContext(),LoginActivity.class);
                startActivity(i);
            }
        });
    }
 
    private void submitForm() {
 
        int selectedId = genderRadioGroup.getCheckedRadioButtonId();
        String gender;
        if(selectedId == R.id.female_radio_btn)
            gender = "Female";
        else
            gender = "Male";
 
        registerUser(signupInputName.getText().toString(),
                     signupInputEmail.getText().toString(),
                     signupInputPassword.getText().toString(),
                     gender,
                     signupInputAge.getText().toString());
    }
 
    private void registerUser(final String name,  final String email, final String password,
                              final String gender, final String dob) {
        // Tag used to cancel the request
        String cancel_req_tag = "register";
 
        progressDialog.setMessage("Adding you ...");
        showDialog();
 
        StringRequest strReq = new StringRequest(Request.Method.POST,
                URL_FOR_REGISTRATION, new Response.Listener<String>() {
 
            @Override
            public void onResponse(String response) {
                Log.d(TAG, "Register Response: " + response.toString());
                hideDialog();
 
                try {
                    JSONObject jObj = new JSONObject(response);
                    boolean error = jObj.getBoolean("error");
 
                    if (!error) {
                        String user = jObj.getJSONObject("user").getString("name");
                        Toast.makeText(getApplicationContext(), "Hi " + user +", You are successfully Added!", Toast.LENGTH_SHORT).show();
 
                        // Launch login activity
                        Intent intent = new Intent(
                                RegisterActivity.this,
                                LoginActivity.class);
                        startActivity(intent);
                        finish();
                    } else {
 
                        String errorMsg = jObj.getString("error_msg");
                        Toast.makeText(getApplicationContext(),
                                errorMsg, Toast.LENGTH_LONG).show();
                    }
                } catch (JSONException e) {
                    e.printStackTrace();
                }
 
            }
        }, new Response.ErrorListener() {
 
            @Override
            public void onErrorResponse(VolleyError error) {
                Log.e(TAG, "Registration Error: " + error.getMessage());
                Toast.makeText(getApplicationContext(),
                        error.getMessage(), Toast.LENGTH_LONG).show();
                hideDialog();
            }
        }) {
            @Override
            protected Map<String, String> getParams() {
                // Posting params to register url
                Map<String, String> params = new HashMap<String, String>();
                params.put("name", name);
                params.put("email", email);
                params.put("password", password);
                params.put("gender", gender);
                params.put("age", dob);
                return params;
            }
        };
        // Adding request to request queue
        AppSingleton.getInstance(getApplicationContext()).addToRequestQueue(strReq, cancel_req_tag);
    }
 
    private void showDialog() {
        if (!progressDialog.isShowing())
            progressDialog.show();
    }
 
    private void hideDialog() {
        if (progressDialog.isShowing())
            progressDialog.dismiss();
    }
}

Selanjutnya kalian tambahkan entri untuk RegisterActivity dan UserActivity di file AndroidManifest.xml . Lihat kode dibawah :

AndroidMainfest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.gubugcoding.androidlogin" >
    <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=".LoginActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".RegisterActivity"/>
        <activity android:name=".UserActivity" />
    </application>
</manifest>

Catatan : Terakhir, ubah https://XXX.XXX.X.XX/ dengan server kita, jika menggunakan localhost kita bisa ubah dengan http://127.0.0.1.

Sekian dulu artikel tentang Membuat Form Daftar dan Login dengan PHP MySQL #2 , jika kalian menemui masalah coba tanyakan dikolom komentar, dan jika kalian bingung dengan source codenya, silahkan download full codenya di Download Area. Login dengan username : gratis@gubugcoding.com, pass : gratis

Download Full Code

1 minggu ago
0 5 minutes read
Photo of Mr. K

Mr. K

Related Articles

Membuat Form Daftar dan Login dengan PHP MySQL #1

2 minggu ago

Membuat Aplikasi WebView di Android Studio

1 minggu ago
Android SharedPreferences Kotlin

Android SharedPreferences Kotlin

1 minggu ago

Membuat Game Suit Android Sederhana

1 minggu ago

Tinggalkan Balasan

Back to top button