Hai sobat, bersama lagi di artikel tentang android, pada artikel kemarin yang berjudul Membuat Welcome Screen / Splash Screen pada aplikasi android, telah dijelaskan bagaimana cara membuat tampilan s[lash screen pada aplikasi android di mana tampilan tersebut berguna untuk menahan sementara aplikasi ke activity utama. Dan pada artikel kali ini, akan dijelskan bagaimana cara membuat aplikasi login dan register menggunakan AQuery (Android Query) dan php MySQL sebagai servernya. Untuk membuatnya, berikut langkah-langkahya.
Dalam pembuatan aplikasi di dalam artikel ini, masih menggunakan project pada artikel sebelumnya yang berjudul Membuat Tampilan Splash Screen Android. Fugsinya adalah untuk menahan sementara activity utama dan menampilkan brand dari apalikasi tersebut.
Membuat MySQL Database dan Script PHP
Pertama buat database baru, di sini saya memberi nama app_pesantren. Buat tabel baru dengan nama user, strukturnya seperti berikut ini.
Setelah membuat database baru, selanjutnya buat koneksinya menggunakan script php seperti 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 membuat script untuk memasukkan data user baru ke dalam database. Kodenya seperti 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 adalah membuat script untuk login user. Kodenya seperti 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 seperti berikut ini
maaf sob, itu nama folder sedikit salah, maklum project lama 😅
Membuat Project Android
Di artikel kali ini akan menggunakan project pada artikel sebelumnya, jika sobat belum membuat sebelumnya, sobat bisa membuka artikel sebelumnya di sini.
Dalam membuat tampilan register dan login, di sini menggunakan Material EditText, untuk bisa menggunakannya, kita harus mengistal library dependencies - nya terlebih dahulu. Buka build:grandle (module) dan masukkan kode di bawah ini
compile 'com.rengwuxian.materialedittext:library:2.1.4'
tambahkan dua activity baru dengan nama RegisterActivity dan LoginActivity. Lalu pada tampilan layoutnya, buat tampilanya seperti 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 menggunakan Material EditText agar tampilanya lebih sesuai standar model material design. Untuk penjelasan lebih tentang material edittext bisa sobat baca di sini.
Mengistal Library
Karena dalam project ini menggunakan AQuery untuk berinteraksi dengan server maka harus terlebih dahulu mengistal librarynya. Pertama sobat download terlebih dahulu librarynya di sini.
Selanjutnya sobat salin library tersebut lalu masuk ke dalam project.
Di dalam menu jendela project, sobat ganti dari Android ke Project. Cari directory lib dan tempel library tadi ke dalam directory library.
Setelah menempel library tadi, selanjutnya klik kanan pada linrary dan pilih Add as Library.
Pengistalan lbrary AQuery berhasil, sekarang lanjut ke tahap berikutnya.
Membuat Activity
Selanjutnya buat class baru dengan nama BaseApp, fungsinya sebagai penyimpan pengaturan objek atau method yang sering digunakan 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 baru dengan nama Helser dan buat class baru di dalamnya dengan nama Helper. Fungsi dari class ini adalah untuk menampung fungsi yang nantinya akan digunakan di banyak activity. Dalam class helper, akan dimasukkan beberapa fungsi seperti fungsi untuk menampilkan toast, fungsi mengecek email, fungsi mengecek kesamaan password dan lainya. Untuk kodenya seperti 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 disesuaikan dgn ip sobat 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 huruf 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 membuat class helper, selanjutnya membuat activity. Buat package baru 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 bisa sobat lihat kode 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 setelah 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 seperti 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 saat 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 adalah 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 seperti 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 saat 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 dia atas, mengunakan konsep yang sama yaitu mengecek terlebih dahulu keberadaan teks, lalu menghubungkan dan menampung variable dengan server, selanjutnya mengirim nilai ke server. Jika result atau respon adalah 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 kode berikut di atas tag <application>
<uses-permission android:name="android.permission.INTERNET"/>
Menjalankan Program
Jika sudah, aplikasi bisa dijalankan dengan memilih menu 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 menggunakan PHP danMySQL sebagai sisi servernya. Sekian artikel tentang membuat aplikasi Register dan Login Android Menggunakan AQuery dan PHP MySQL sebagai Servernya.
Silahkan share dan ikuti blog ini jika sobat suka dengan artikel ini. Dan juga apabila sobat memiliki pertanyaan, kritik, saran, dan komentar, silahkan tulis di kolom komentar. Sampai jumpa di tutorial selanjutnya, sampai jumpa...
Ingin berbagi ilmu yang telah dipelajari dan dimiliki agar dapat menjadi ilmu yang bermafaat bagi orang lain. Keep learning and sharing