Membuat Form Daftar dan Login dengan PHP MySQL #2
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.
Daftar Isi :
Tampilan
Ada 3 jenis tampilan yang akan kita buat, yaitu :
- 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.
- 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.
- 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
- Buka File → New → New Project dan masukkan Nama Aplikasi kalian.
- Masukkan Domain Perusahaan, ini digunakan untuk mengidentifikasi secara unik paket Aplikasi Anda di seluruh dunia.
- 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.
- 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.
- Gradle akan mengonfigurasi proyek Anda dan menyelesaikan dependensi, Setelah selesai, lanjutkan ke langkah selanjutnya.
- 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