Membuat Android Register Dan Login Mengunakan Aquery Dan Mysql

Oleh Pojok Guru

Rabu, 07 September 2016

Bagikan :

Tweet

Hai sobat, bersama lagi di artikel ihwal android, pada artikel kemarin yang berjudul Membuat Welcome Screen / Splash Screen pada aplikasi android, telah dijelaskan bagaimana cara menciptakan tampilan s[lash screen pada aplikasi android di mana tampilan tersebut mempunyai kegunaan untuk menahan sementara aplikasi ke activity utama. Dan pada artikel kali ini, akan dijelskan bagaimana cara menciptakan aplikasi login dan register memakai AQuery (Android Query) dan php MySQL sebagai servernya. Untuk membuatnya, berikut langkah-langkahya.

Dalam pembuatan aplikasi di dalam artikel ini, masih memakai project pada artikel sebelumnya yang berjudul Membuat Tampilan Splash Screen Android. Fugsinya yaitu untuk menahan sementara activity utama dan menampilkan merk dari apalikasi tersebut.

Membuat MySQL Database dan Script PHP

Pertama buat database baru, di sini aku memberi nama app_pesantren. Buat tabel gres dengan nama user, strukturnya menyerupai berikut ini.

Setelah menciptakan database baru, selanjutnya buat koneksinya memakai script php menyerupai di bawah ini

 <?php  $server ="localhost"; // server nya   $username   = "root";  //username nya   $password   ="";  //password nya     $database   ="app_pesantren";   //nama database   mysql_connect($server, $username, $password) or die("Koneksi tidak ada");    //untuk koneksi nya   mysql_select_db($database) or die("Database tidak ditemukan");  //memilih database ?> 

Jika koneksi telah kita buat, kemudian lanjut lagi menciptakan script untuk memasukkan data user gres ke dalam database. Kodenya menyerupai berikut ini

 <?php include 'db.php';  //memanggil file db.php   //mengecek variabel if(isset($_POST["email"]) && isset ($_POST["password"]))  {  $password = $_POST['password'];  $email= $_POST['email'];    //perintah SQL untuk memasukan data  $query = "INSERT INTO user (email,password) VALUES ('$email','$password')";  $hasil  = mysql_query($query);  if($hasil)   {       $response["result"]= true ;       $response["msg"]= "Register berhasil, silakan login";       echo json_encode($response);   }  else {      $response['result']= false ;      $response['msg']="maaf,terjadi kesalahan";      echo json_encode($response);   } }else{     $response['result']= false ;     $response['msg']="maaf, data salah";     echo json_encode($response); } ?> 

Jika script untuk memasukkan user ke dalam database selesai, selanjutnya yaitu menciptakan script untuk login user. Kodenya menyerupai berikut ini

 <?php include "db.php";  //memanggil fungsi koneksi di file db.php   //deklarasi $email =$_POST['email']; $password=$_POST['password']; $passwordd = md5($password); $response = array();   //perintah SQL untuk meampilkan data $query = "SELECT * FROM user WHERE email ='$email' AND password='$password'"; $hasil = mysql_query($query);   //jika data nya ada atau lebih dari 0 if(mysql_num_rows($hasil)> 0){     $response['result']= true ;     $response['msg']="login berhasil";     echo json_encode($response);   } else {    $response['result']= false ;     $response['msg']="maaf,terjadi kesalahan";     echo json_encode($response);     echo $email, $password; } ?> 

Ketiga file tadi disimpan dan di masukkan ke dalam folder dengan nama app_pesantren, dan folder tadi dimasukkan ke dalam folder server lokal atau htdoccs (local server)
Jika semuanya sudah, maka struktur filenya menyerupai berikut ini

maaf sob, itu nama folder sedikit salah, maklum project usang 😅

Membuat Project Android

Di artikel kali ini akan memakai project pada artikel sebelumnya, bila sahabat belum menciptakan sebelumnya, sahabat dapat membuka artikel sebelumnya di sini.

Dalam menciptakan tampilan register dan login, di sini memakai Material EditText, untuk dapat menggunakannya, kita harus mengistal library dependencies - nya terlebih dahulu. Buka build:grandle (module) dan masukkan arahan di bawah ini

 compile 'com.rengwuxian.materialedittext:library:2.1.4' 

tambahkan dua activity gres dengan nama RegisterActivity dan LoginActivity. Lalu pada tampilan layoutnya, buat tampilanya menyerupai berikut ini

 <?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"     xmlns:app="http://schemas.android.com/apk/res-auto"     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=".Activity.RegisterActivity">      <ImageView         android:layout_width="100dp"         android:layout_height="100dp"         android:src="@drawable/logo"         android:layout_centerHorizontal="true"         android:id="@+id/bglogo"         android:layout_marginTop="20dp"/>      <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Login User"         android:textSize="26dp"         android:layout_below="@id/bglogo"         android:layout_centerHorizontal="true"         android:id="@+id/textView"/>      <com.rengwuxian.materialedittext.MaterialEditText         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:hint="Email"         app:met_baseColor="#2e8ece"         app:met_primaryColor="#fc1e94"         app:met_errorColor="#f22a37"         app:met_floatingLabel="highlight"         app:met_iconLeft="@mipmap/ic_email"         android:layout_below="@id/textView"         android:layout_marginTop="55dp"         android:id="@+id/regtxtEmail"/>      <com.rengwuxian.materialedittext.MaterialEditText         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:hint="Password"         app:met_baseColor="#2e8ece"         app:met_primaryColor="#fc1e94"         app:met_errorColor="#f22a37"         app:met_floatingLabel="highlight"         app:met_iconLeft="@mipmap/ic_password"         android:layout_below="@id/regtxtEmail"         android:layout_marginTop="1dp"         android:id="@+id/regtxtPassword1"/>      <com.rengwuxian.materialedittext.MaterialEditText         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:hint="Password"         app:met_baseColor="#2e8ece"         app:met_primaryColor="#fc1e94"         app:met_errorColor="#f22a37"         app:met_floatingLabel="highlight"         app:met_iconLeft="@mipmap/ic_password"         android:layout_below="@id/regtxtPassword1"         android:layout_marginTop="1dp"         android:id="@+id/regtxtPassword2"/>      <Button         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:text="Register"         android:layout_below="@id/regtxtPassword2"         android:layout_marginTop="10dp"         android:id="@+id/regbtnRegister"/>      <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_below="@id/regbtnRegister"         android:text="Login"         android:layout_alignParentRight="true"         android:textSize="20sp"         android:layout_marginTop="20dp"         android:id="@+id/reglblLogin"/>  </RelativeLayout> 

 <?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"     xmlns:app="http://schemas.android.com/apk/res-auto"     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=".Activity.LoginActivity">      <ImageView         android:layout_width="100dp"         android:layout_height="100dp"         android:src="@drawable/logo"         android:layout_centerHorizontal="true"         android:id="@+id/bglogo"         android:layout_marginTop="20dp"/>      <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Login User"         android:textSize="26dp"         android:layout_below="@id/bglogo"         android:layout_centerHorizontal="true"         android:id="@+id/textView"/>      <com.rengwuxian.materialedittext.MaterialEditText         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:hint="Email"         app:met_baseColor="#2e8ece"         app:met_primaryColor="#fc1e94"         app:met_errorColor="#f22a37"         app:met_floatingLabel="highlight"         app:met_iconLeft="@mipmap/ic_email"         android:layout_below="@id/textView"         android:layout_marginTop="70dp"         android:id="@+id/logtxtEmail"/>      <com.rengwuxian.materialedittext.MaterialEditText         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:hint="Password"         app:met_baseColor="#2e8ece"         app:met_primaryColor="#fc1e94"         app:met_errorColor="#f22a37"         app:met_floatingLabel="highlight"         app:met_iconLeft="@mipmap/ic_password"         android:layout_below="@id/logtxtEmail"         android:layout_marginTop="1dp"         android:id="@+id/logtxtPassword"/>      <Button         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:text="Login"         android:layout_below="@id/logtxtPassword"         android:layout_marginTop="10dp"         android:id="@+id/logbtnLogin"/>      <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_below="@id/logbtnLogin"         android:text="Register"         android:layout_alignParentRight="true"         android:textSize="20sp"         android:layout_marginTop="20dp"         android:id="@+id/loglblRegister"/>  </RelativeLayout> 

Pada dua tampilan tersebut, untuk texkbox memakai Material EditText semoga tampilanya lebih sesuai standar model material design. Untuk klarifikasi lebih ihwal material edittext dapat sahabat baca di sini.

Mengistal Library

Karena dalam project ini memakai AQuery untuk berinteraksi dengan server maka harus terlebih dahulu mengistal librarynya. Pertama sahabat download terlebih dahulu librarynya di sini.

Selanjutnya sahabat salin library tersebut kemudian masuk ke dalam project.

Di dalam hidangan jendela project, sahabat ganti dari Android ke Project. Cari directory lib dan tempel library tadi ke dalam directory library.

Setelah melekat library tadi, selanjutnya klik kanan pada linrary dan pilih Add as Library.

Pengistalan lbrary AQuery berhasil, kini lanjut ke tahap berikutnya.

Membuat Activity

Selanjutnya buat class gres dengan nama BaseApp, fungsinya sebagai penyimpan pengaturan objek atau method yang sering dipakai dalam class lain sehinga nantinya tidak perlu deklarasi di tiap-tiap class Untuk kodenya sperti berikut ini

 package com.blogsetyaaji.pesantrenidn;  import android.content.Context; import android.os.Bundle; import android.os.PersistableBundle; import android.support.annotation.Nullable; import android.support.v7.app.AppCompatActivity; import android.view.animation.AlphaAnimation;  import com.androidquery.AQuery;  /**  * Created by AJISETYA  */ public class BaseApp extends AppCompatActivity {     public Context context;     public AQuery aQuery;     public AlphaAnimation BtnAnimasi = new AlphaAnimation(1F, 0.1F);      @Override     protected void onCreate(@Nullable Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         context = this;         aQuery = new AQuery(context);     } } 

Selanjutnya, buat package gres dengan nama Helser dan buat class gres di dalamnya dengan nama Helper. Fungsi dari class ini yaitu untuk menampung fungsi yang nantinya akan dipakai di banyak activity. Dalam class helper, akan dimasukkan beberapa fungsi menyerupai fungsi untuk menampilkan toast, fungsi mengecek email, fungsi mengecek kesamaan password dan lainya. Untuk kodenya menyerupai berikut ini

 package com.blogsetyaaji.pesantrenidn.Helper;  import android.content.Context; import android.widget.EditText; import android.widget.Toast;  import com.blogsetyaaji.pesantrenidn.BaseApp;  import java.util.regex.Matcher; import java.util.regex.Pattern;  /**  * Created by AJISETYA  */ public class Helper extends BaseApp {      /*alamat utama, silahkan diubahsuaikan dgn ip sahabat dan nama folder sobat*/     public static String BASE_URL = "http://192.168.154.2/app_pesantren/";      /*fungsi cek kesamaan text*/     public static boolean isCompare(EditText et1, EditText et2){         String a = et1.getText().toString();         String b = et2.getText().toString();         /*jika a sama dengan b*/         if (a.equals(b)){             return false;         }else{             return true;         }     }      /*fungsi untuk menampilkan pesan*/     public static void pesan (Context c, String msg){         Toast.makeText(c,msg,Toast.LENGTH_LONG).show();     }      /*fungsi untuk mengecek apakah isian kosong*/     public static boolean isEmpty(EditText editText){         /*jika banyak aksara lebih dari 0*/         if (editText.getText().toString().trim().length() > 0){             /*tidak dikembalikan*/             return false;         }else {             /*kembalikan*/             return true;         }     }      // validasi untuk inputan email     public static boolean isEmailValid(EditText email) {         boolean isValid = false;         String expression = "^[\\w\\.-]+@([\\w\\-]+\\.)+[A-Z]{2,4}$";         CharSequence inputStr = email.getText().toString();          Pattern pattern = Pattern.compile(expression, Pattern.CASE_INSENSITIVE);         Matcher matcher = pattern.matcher(inputStr);          if (matcher.matches()) {             isValid = true;         }         return isValid;     } } 

Seteah menciptakan class helper, selanjutnya menciptakan activity. Buat package gres dengan nama activity dan masukkan semua activity ke dalam package activity. Lalu buka SplashScreen.java dan ubah tujuan intent ke LoginActivity.class, untuk lebih jelasnya dapat sahabat lihat arahan di bawah ini

 package com.blogsetyaaji.pesantrenidn.Activity;  import android.content.Intent; import android.os.Handler; import android.support.v7.app.AppCompatActivity; import android.os.Bundle;  import com.blogsetyaaji.pesantrenidn.R;  public class SplashScreen extends AppCompatActivity {      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_splash_screen);          /*handler untuk menahan activity sementara*/         Handler handler = new Handler();         handler.postDelayed(new Runnable() {             @Override             public void run() {                 /*mulai activity ke MainActivity sesudah 5 detik*/                 startActivity(new Intent(getApplicationContext(),LoginActivity.class));                 finish();             }             /*durasi 5000ms*/         },5000);     }      @Override     public void onBackPressed() {         return;     } } 

Setelah mengubah activity SplasScreen, buka RegisterActivity.java dan buat kodenya menyerupai berikut ini

 package com.blogsetyaaji.pesantrenidn.Activity;  import android.app.ProgressDialog; import android.content.Intent; import android.os.PersistableBundle; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.TextView;  import com.androidquery.callback.AjaxCallback; import com.androidquery.callback.AjaxStatus; import com.blogsetyaaji.pesantrenidn.BaseApp; import com.blogsetyaaji.pesantrenidn.Helper.Helper; import com.blogsetyaaji.pesantrenidn.R; import com.rengwuxian.materialedittext.MaterialEditText;  import org.json.JSONException; import org.json.JSONObject; import org.w3c.dom.Text;  import java.util.HashMap; import java.util.Map;  public class RegisterActivity extends BaseApp {      private MaterialEditText regtxtEmail, regtxtPassword1, regtxtPassword2;     private TextView reglblLogin;     private Button regbtnRegister;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_register);         setupView();         reglblLogin.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View view) {                 view.startAnimation(BtnAnimasi);                 startActivity(new Intent(context, LoginActivity.class));             }         });         regbtnRegister.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View view) {                 registerUser();             }         });     }      private void registerUser() {         regtxtEmail.setError(null);         regtxtPassword1.setError(null);         regtxtPassword2.setError(null);         /*check keberadaan teks*/         if (Helper.isEmpty(regtxtEmail)) {             regtxtEmail.setError("Email masih kosong");             regtxtEmail.requestFocus();         } else if (Helper.isEmailValid(regtxtEmail)) {             regtxtEmail.setError("Format email salah");             regtxtEmail.requestFocus();         } else if (Helper.isEmpty(regtxtPassword1)) {             regtxtPassword1.setError("Password masih kosong");             regtxtPassword1.requestFocus();         } else if (Helper.isEmpty(regtxtPassword2)) {             regtxtPassword2.setError("Konfirmasi password masih kosong");             regtxtPassword2.requestFocus();             /*check kesamaan password*/         } else if (Helper.isCompare(regtxtPassword1, regtxtPassword2)) {             regtxtPassword2.setError("Password tidak cocok");             regtxtPassword2.requestFocus();         } else {             /*kirim data ke server*/              /*alamat url http://192.168.154.2/app_pesantren/register.php*/             String URL = Helper.BASE_URL + "register.php";              /*menampung nilai*/             Map<String, String> param = new HashMap<>();             param.put("email", regtxtEmail.getText().toString());             param.put("password", regtxtPassword1.getText().toString());              /*menampilkan progressbar dikala mengirim data*/             ProgressDialog pd = new ProgressDialog(context);             pd.setIndeterminate(true);             pd.setCancelable(false);             pd.setInverseBackgroundForced(false);             pd.setCanceledOnTouchOutside(false);             pd.setTitle("Info");             pd.setMessage("Sedang menambah data");             pd.show();              try {                 /*format ambil data*/                 aQuery.progress(pd).ajax(URL, param, String.class, new AjaxCallback<String>() {                     @Override                     public void callback(String url, String object, AjaxStatus status) {                         /*jika objek tidak kosong*/                         if (object != null) {                             try {                                 JSONObject jsonObject = new JSONObject(object);                                 String result = jsonObject.getString("result");                                 String msg = jsonObject.getString("msg");                                  /*jika result yaitu benar, maka pindah ke activity login dan menampilkan pesan dari server,                                 serta mematikan activity*/                                 if (result.equalsIgnoreCase("true")) {                                     startActivity(new Intent(context, LoginActivity.class));                                     Helper.pesan(context, msg);                                     finish();                                 } else {                                     Helper.pesan(context, msg);                                 }                              } catch (JSONException e) {                                 Helper.pesan(context, "Error convert data json");                             }                         }                     }                 });             } catch (Exception e) {                 Helper.pesan(context, "Gagal mengambil data");             }         }     }      /*pengenalan objek*/     private void setupView() {         regtxtEmail = (MaterialEditText) findViewById(R.id.regtxtEmail);         regtxtPassword1 = (MaterialEditText) findViewById(R.id.regtxtPassword1);         regtxtPassword2 = (MaterialEditText) findViewById(R.id.regtxtPassword2);         regbtnRegister = (Button) findViewById(R.id.regbtnRegister);         reglblLogin = (TextView) findViewById(R.id.reglblLogin);     }  } 

Selanjutnya buka LoginActivity.java dan buat kodenya menyerupai berikut ini

 package com.blogsetyaaji.pesantrenidn.Activity;  import android.app.ProgressDialog; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.WindowManager; import android.widget.Button; import android.widget.TextView;  import com.androidquery.callback.AjaxCallback; import com.androidquery.callback.AjaxStatus; import com.blogsetyaaji.pesantrenidn.BaseApp; import com.blogsetyaaji.pesantrenidn.Helper.Helper; import com.blogsetyaaji.pesantrenidn.R; import com.rengwuxian.materialedittext.MaterialEditText;  import org.json.JSONException; import org.json.JSONObject;  import java.util.HashMap; import java.util.Map;  public class LoginActivity extends BaseApp {      private MaterialEditText logtxtEmail, logtxtPassword;     private TextView loglblRegister;     private Button logbtnLogin;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_login);         setupView();         loglblRegister.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View view) {                 view.startAnimation(BtnAnimasi);                 startActivity(new Intent(getApplicationContext(), RegisterActivity.class));             }         });          logbtnLogin.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View view) {                 loginUser();             }         });     }      private void loginUser() {         logtxtEmail.setError(null);         logtxtPassword.setError(null);         /*check kebaradan teks*/         if (Helper.isEmpty(logtxtEmail)) {             logtxtEmail.setError("Email masih kosong");             logtxtEmail.requestFocus();         } else if (Helper.isEmpty(logtxtPassword)) {             logtxtPassword.setError("Password masih kosong");             logtxtPassword.requestFocus();         } else {             /*kirim data ke server*/             String URL = Helper.BASE_URL + "login.php";             Map<String, String> param = new HashMap<>();             param.put("email", logtxtEmail.getText().toString());             param.put("password", logtxtPassword.getText().toString());              /*menampilkan progressbar dikala mengirim data*/             ProgressDialog pd = new ProgressDialog(context);             pd.setIndeterminate(true);             pd.setCancelable(false);             pd.setInverseBackgroundForced(false);             pd.setCanceledOnTouchOutside(false);             pd.setTitle("Info");             pd.setMessage("Login");             pd.show();              try {                 /*format ambil data*/                 aQuery.progress(pd).ajax(URL, param, String.class, new AjaxCallback<String>() {                     @Override                     public void callback(String url, String object, AjaxStatus status) {                         /*jika objek tidak kosong*/                         if (object != null) {                             try {                                 JSONObject jsonObject = new JSONObject(object);                                 String result = jsonObject.getString("result");                                 String msg = jsonObject.getString("msg");                                 if (result.equalsIgnoreCase("true")) {                                     startActivity(new Intent(context, MainActivity.class));                                     Helper.pesan(context, msg);                                     finish();                                 } else {                                     Helper.pesan(context, msg);                                 }                             } catch (JSONException e) {                                 Helper.pesan(context, "Error convert data json");                             }                         }                     }                 });             } catch (Exception e) {                 Helper.pesan(context, "Gagal mengambil data");             }         }     }      private void setupView() {         logtxtEmail = (MaterialEditText) findViewById(R.id.logtxtEmail);         logtxtPassword = (MaterialEditText) findViewById(R.id.logtxtPassword);         logbtnLogin = (Button) findViewById(R.id.logbtnLogin);         loglblRegister = (TextView) findViewById(R.id.loglblRegister);     } } 

Pada ke dua class ia atas, mengunakan konsep yang sama yaitu mengecek terlebih dahulu keberadaan teks, kemudian menghubungkan dan menampung variable dengan server, selanjutnya mengirim nilai ke server. Jika result atau respon yaitu benar, maka pindah activity dan proses interaksi dengan server berhasil.

Memberikan Izin Mengakses Internet

Kerena aplikasi mengambil data dari server internet, maka aplikasi membuatuhkan izin untuk mengakses internet. Untuk menambahkan izin, kita ubah pada file Android Manifest.xml. Silahkan tambahkan arahan berikut di atas tag <application>

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

Menjalankan Program

Jika sudah, aplikasi dapat dijalankan dengan menentukan hidangan Run ‘app’. Tampilan spalsh screen akan tampil pertama kali selama 5 detik, selanjutnya masuk ke activity Login. Jika user belum ada, pilih rester dan masukkan data user untuk proses login selanjutnya.

Untuk artikel selanjutnya, akan dijelaskan pembuatan aplikasi CRUD memakai PHP danMySQL sebagai sisi servernya. Sekian artikel tentang menciptakan aplikasi Register dan Login Android Menggunakan AQuery dan PHP MySQL sebagai Servernya.

Silahkan share dan ikuti blog ini bila sahabat suka dengan artikel ini. Dan juga apabila sahabat mempunyai pertanyaan, kritik, saran, dan komentar, silahkan tulis di kolom komentar. Sampai jumpa di tutorial selanjutnya, hingga jumpa...

Tag : Pemrograman, Pemrograman Android