ANDROID APPS TUTORIAL Register dan Login Apps Menggunakan JSONParser, Async Task dan MySQL Database Server “Oleh Rahmat H Slamet - D42112251 (
[email protected]) ”
Dalam Tutorial membuat aplikasi android register/login kali ini, terdapat beberapa langkah yang akan dilakukan, antara lain : 1. Persiapan Tools (Pra-Coding) 2. Membuat database 3. Membuat PHP untuk handle request 4. Membuat projek Android 5. Membuat Tampilan Web PHP Sederhana untuk tampil data.
A. Persiapan Tools (Pra-Coding) Untuk membuat aplikasi sederhana ini, yang hanya diperlukan adalah 2 aplikasi utama. Yakni, Android Studio dan MySQL Databases. A.1. Android Studio dan Android SDK Dalam merancang antarmuka Android Apps, kita membutuhkan sebuah IDE yang berfungsi sebagai antarmuka familiar dalam membangun rancangan. Android Studio merupakan satu dari berbagai aplikasi yang paling sering digunakan oleh developer android. Tentunya dalam membangun Android Apps, tidak terlepas dari paket Android SDK yang digunakan sebagai peralatan(kit) dalam merancang android. Kedua Tools ini, dikembangkan oleh Google.Inc dan diberikan secara gratis dan terbuka (open source) kepada developer. Silahkan Unduh di https://developer.android.com/. Disitus ini pula terdapat cara instal dan konfigurasi SDK sehingga pada tutorial kali ini, kita anggap bahwa penginstalan Android Studio dan SDK telah selesai dan siap pakai. Sekedar informasi, bahwa Android Studio yang saya pakai adalah versi Android Studio 0.9.9 dan pada Android SDK sudah terinstal hampir semua paket dan jenis Android dari 2.2 sampai Lolipop 5.0. Tetapi pada tutorial kali ini, yang perlu diperhatikan adalah sebagai berikut : Minimum SDK : API 8: Android 2.2 (Froyo) Target SDK : API 21: Android 5.0 (Lollipop) Android Studio : 0.9.9 Gradle Version : 2.1 A.2. MySQL Databases Merupakan Databases Management System (DBMS) yang paling populer dan digunakan oleh developper dalam penggunaan aplikasi atau web server sederhana. Dalam MySQL Databases ini, terdapat fitur PHPMyAdmin yang akan kita gunakan sebagai tempat pembuatan databases. Penginstalan hanya perlu dilakukan via localhost. Silahkan unduh pada www.mysql.com/downloads/ , di situs ini pula terdapat tata cara konfigurasi pada localhost sehingga penulis anggap penginstalan MySQL telah selesai dilakukan dan siap pakai.
B. Membuat Databases Silahkan buka http://localhost/phpmyadmin/ . Buatlah database dengan nama “login” dan buatlah tabel “user”. Adapun struktur tabel user sebagai berikut ini.
C. PHP Untuk Handle Request Ada 3 file PHP yang kita akan buat untuk Handle Request, yaitu koneksi.php, register.php dan login.php dan simpan di direktori xampp/htdocs dengan folder “login”. - File koneksi.php
- File register.php
- File login.php
D. Membuat Project Android - Membuat projek Android dengan klik File > New > Android Application Project, kemudian konfigurasi untuk penamaan package, icon, dan file xml. - Membuat file xml di folder res layout. Sebelum membahas kodenya, saya ingin menunjukkan struktur file di folder res sebagai berikut
- Akunku.xml
- register.xml
- login.xml
Pada xml diatas, kita menggunakan file dimes.xml dan string.xml sebagai data text.
Buka kedua file tersebut dan pastikan datanya terisi sebagai berikut : - dimens.xml
-string.xml
Ketiga File diatas akan memiliki tampilan depan seperti berikut : - akunku.xml
- register.xml
- login.xml
It's Time to Coding :D. saatnya kita membuat 3 layout diatas berjalan sebagaimana fungsinya. File java terdiri atas 6 file java seperti terlihat pada gambar berikut.
- Akunku.java /** * Created by arhen on 04/03/15. */ package com.example.arhen.tugasrplii; import import import import import import import import import import import import
android.app.Activity; android.app.ProgressDialog; android.content.Intent; android.os.Bundle; android.text.Html; android.view.View; android.widget.Button; android.widget.ListView; android.widget.TextView; android.widget.Toast; org.json.JSONArray; java.util.HashMap;
public class Akunku extends Activity { Button logout; SessionManager session; ListView lv; ProgressDialog pDialog; JSONArray contacts = null; String username, first_name; @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.akunku); //membuat session untuk user session = new SessionManager(getApplicationContext()); Toast.makeText(getApplicationContext(), "User Login Status:" + session.isLoggedIn(), Toast.LENGTH_LONG).show(); session.checkLogin(); HashMap
user = session.getUserDetails(); username = user.get(SessionManager.KEY_USERNAME); first_name = user.get(SessionManager.KEY_FIRST_NAME); TextView status = (TextView)findViewById(R.id.status); status.setText(Html.fromHtml("Welcome,"+first_name+"")); //inisiasi tombol Logout dan memberi fungsi klik
logout = (Button)findViewById(R.id.btn_logout); logout.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { session.logoutUser(); finish(); } }); } @Override public void onBackPressed(){ Intent i = new Intent(getApplicationContext(), Login.class); i.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(i); finish(); } }
- AlertDialogManager.java /** * Created by arhen on 04/03/15. */ package com.example.arhen.tugasrplii; import android.app.AlertDialog; import android.content.Context; import android.content.DialogInterface; public class AlertDialogManager { @SuppressWarnings("deprecation") public void showAlertDialog(Context context, String title, String message, Boolean status){ AlertDialog alertDialog = new AlertDialog.Builder(context).create(); //setting Doalog Title alertDialog.setTitle(title); //setting Dialog Message alertDialog.setMessage(message); //setting OK Button alertDialog.setButton("OK",new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { } });
//showing alert message alertDialog.show(); } }
- JSONParser.java /** * Created by arhen on 04/03/15. */ package com.example.arhen.tugasrplii; import android.util.Log; import import import import import import import import import import import import import import import import import
org.apache.http.HttpEntity; org.apache.http.HttpResponse; org.apache.http.NameValuePair; org.apache.http.client.ClientProtocolException; org.apache.http.client.entity.UrlEncodedFormEntity; org.apache.http.client.methods.HttpGet; org.apache.http.client.methods.HttpPost; org.apache.http.client.utils.URLEncodedUtils; org.apache.http.impl.client.DefaultHttpClient; org.json.JSONException; org.json.JSONObject; java.io.BufferedReader; java.io.IOException; java.io.InputStream; java.io.InputStreamReader; java.io.UnsupportedEncodingException; java.util.List;
public class JSONParser { static InputStream is = null; static JSONObject jObj = null; static String json = ""; // constructor public JSONParser() { } public JSONObject getJSONFromUrl(String url) { // Making HTTP request try { // defaultHttpClient DefaultHttpClient httpClient = new DefaultHttpClient(); HttpPost httpPost = new HttpPost(url); HttpResponse httpResponse = httpClient.execute(httpPost); HttpEntity httpEntity = httpResponse.getEntity(); is = httpEntity.getContent(); } catch (UnsupportedEncodingException e) {
//
//
// // // //
//
e.printStackTrace(); } catch (ClientProtocolException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } try { BufferedReader reader = new BufferedReader(new InputStreamReader( is, "iso-8859-1"), 8); StringBuilder sb = new StringBuilder(); String line = null; while ((line = reader.readLine()) != null) { sb.append(line + "\n"); } is.close(); json = sb.toString(); } catch (Exception e) { Log.e("Buffer Error", "Error converting result " + e.toString()); } try parse the string to a JSON object try { jObj = new JSONObject(json); } catch (JSONException e) { Log.e("JSON Parser", "Error parsing data " + e.toString()); } return JSON String return jObj; } public JSONObject makeHttpRequest(String url, String method, List params) { Making HTTP request try { check for request method if (method == "POST") { request method is POST defaultHttpClient DefaultHttpClient httpClient = new DefaultHttpClient(); HttpPost httpPost = new HttpPost(url); httpPost.setEntity(new UrlEncodedFormEntity(params)); HttpResponse httpResponse = httpClient.execute(httpPost); HttpEntity httpEntity = httpResponse.getEntity(); is = httpEntity.getContent(); } else if (method == "GET") { request method is GET DefaultHttpClient httpClient = new DefaultHttpClient(); String paramString =
URLEncodedUtils.format(params, "utf-8"); url += "?" + paramString; HttpGet httpGet = new HttpGet(url); HttpResponse httpResponse = httpClient.execute(httpGet); HttpEntity httpEntity = httpResponse.getEntity(); is = httpEntity.getContent(); } } catch (UnsupportedEncodingException e) { e.printStackTrace(); } catch (ClientProtocolException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } try { BufferedReader reader = new BufferedReader(new InputStreamReader( is, "iso-8859-1"), 8); StringBuilder sb = new StringBuilder(); String line = null; while ((line = reader.readLine()) != null) { sb.append(line + "\n"); } is.close(); json = sb.toString(); } catch (Exception e) { Log.e("Buffer Error", "Error converting result " + e.toString()); } // try parse the string to a JSON object try { jObj = new JSONObject(json); } catch (JSONException e) { Log.e("JSON Parser", "Error parsing data " + e.toString()); } // return JSON String return jObj; } }
- Login.java /** * Created by arhen on 04/03/15. */ package com.example.arhen.tugasrplii; import android.app.Activity;
import import import import import import import import import import import import import import
android.app.ProgressDialog; android.content.Intent; android.os.AsyncTask; android.os.Bundle; android.util.Log; android.view.View; android.widget.Button; android.widget.EditText; android.widget.TextView; android.widget.Toast; org.json.JSONArray; org.json.JSONObject; java.util.ArrayList; java.util.HashMap;
public class Login extends Activity{ Button login; Intent a; EditText username, password; TextView verify; String url, success; SessionManager session; AlertDialogManager alert = new AlertDialogManager(); @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState) ; setContentView(R.layout.login); session = new SessionManager(getApplicationContext()); Toast.makeText(getApplicationContext(),"user Login session.isLoggedIn(), Toast.LENGTH_LONG).show(); login = (Button)findViewById(R.id.btn_login); username = (EditText)findViewById(R.id.fld_username); password = (EditText)findViewById(R.id.fld_pwd); verify = (TextView)findViewById(R.id.verify);
Status:"
login.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { url="http://192.168.122.1/login/login.php?" + "username=" + username.getText().toString() + "&password=" + password.getText().toString(); if(username.getText().toString().trim().length()>0 && password.getText().toString().trim().length()>0){ new AmbilData().execute(); }else{ alert.showAlertDialog(Login.this,"Login Failed...!", "Silahkan isi username dan password",false);
+
} } }); verify.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { a = new Intent(Login.this, Register.class); startActivity(a); } }); } public class AmbilData extends AsyncTask { ArrayList> contactList = new ArrayList< HashMap>(); ProgressDialog pDialog; @Override protected void onPreExecute() { super.onPreExecute(); pDialog = new ProgressDialog(Login.this); pDialog.setMessage("Loading Data..."); pDialog.setIndeterminate(false); pDialog.show(); }
@Override protected String doInBackground(String... arg0) { JSONParser jParser = new JSONParser(); JSONObject json = jParser.getJSONFromUrl(url); try { success = json.getString("success"); Log.e("error", "nilai sukses=" + success); JSONArray hasil = json.getJSONArray("login"); if (success.equals("1")) { for (int i = 0; i < hasil.length(); i++) { JSONObject c = hasil.getJSONObject(i); //Storing each json item in variable String username = c.getString("username").trim(); String email = c.getString("email").trim(); session.createLoginSession(username, email); Log.e("ok", "ambil data"); } } else { Log.e("Error", "tidak bisa ambil data 0"); }
} catch (Exception e) { Log.e("Error", "Tidak bisa ambil data 1"); } return null; } @Override protected void onPostExecute(String result) { super.onPostExecute(result); pDialog.dismiss(); if(success.equals("1")){ a = new Intent(Login.this, Akunku.class); startActivity(a); finish(); }else{ Toast.makeText(getBaseContext(), "Username/password incorrect!!", Toast.LENGTH_SHORT).show(); alert.showAlertDialog(Login.this, "Login Failed..", "Username/Password is incorrect",false); } } } }
- Register.java package com.example.arhen.tugasrplii; import import import import import import import import import import
android.app.Activity; android.app.ProgressDialog; android.content.Intent; android.os.AsyncTask; android.os.Bundle; android.view.View; android.widget.Button; android.widget.EditText; android.widget.TextView; android.widget.Toast;
import org.apache.http.NameValuePair; import org.apache.http.message.BasicNameValuePair; import org.json.JSONObject; import java.util.ArrayList; import java.util.List; /** * Created by arhen on 05/03/15. */ public class Register extends Activity{
ProgressDialog pDialog; JSONParser jsonParser = new JSONParser(); EditText first_name,last_name,email,username,password; Intent a;
private static String url = "http://192.168.122.1/login/register.php"; Button register; TextView verify; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.register); register verify first_name last_name email username password
= = = = = = =
(Button)findViewById(R.id.btn_register); (TextView)findViewById(R.id.verify); (EditText)findViewById(R.id.fld_first); (EditText)findViewById(R.id.fld_last); (EditText)findViewById(R.id.fld_email); (EditText)findViewById(R.id.fld_username); (EditText)findViewById(R.id.fld_pwd);
register.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub new InputData().execute(); } }); verify.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { a = new Intent(Register.this, Login.class); startActivity(a); } }); } public class InputData extends AsyncTask{ String success; @Override protected void onPreExecute() { super.onPreExecute(); pDialog = new ProgressDialog(Register.this); pDialog.setMessage("Registering Account..."); pDialog.setIndeterminate(false); pDialog.show();
} @Override protected String doInBackground(String... args) { String String String String String
strfirst_name strlast_name stremail strusername strpassword
= = = = =
first_name.getText().toString(); last_name.getText().toString(); email.getText().toString(); username.getText().toString(); password.getText().toString();
List params = new ArrayList(); params.add(new BasicNameValuePair("first_name",strfirst_name)); params.add(new BasicNameValuePair("last_name",strlast_name)); params.add(new BasicNameValuePair("email",stremail)); params.add(new BasicNameValuePair("username",strusername)); params.add(new BasicNameValuePair("password",strpassword)); JSONObject json = jsonParser.makeHttpRequest(url, "POST", params); try { success = json.getString("success"); } catch (Exception e) { runOnUiThread(new Runnable() { public void run() { Toast.makeText(getApplicationContext(), "Error", Toast.LENGTH_SHORT).show(); } }); } return null; } protected void onPostExecute(String file_url) { // dismiss the dialog once done pDialog.dismiss(); if (success.equals("1")) { Toast.makeText(getApplicationContext(),"Registration Succesfully",Toast.LENGTH_LONG).show(); }else{ Toast.makeText(getApplicationContext(),"Registration Failed",Toast.LENGTH_LONG).show(); } } } @Override public void onBackPressed(){ Intent i = new Intent(getApplicationContext(),Login.class); i.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(i);
finish(); } }
- SessionManager.java package com.example.arhen.tugasrplii; import import import import import
android.annotation.SuppressLint; android.content.Context; android.content.Intent; android.content.SharedPreferences; android.content.SharedPreferences.Editor;
import java.util.HashMap; /** * Created by arhen on 05/03/15. */ @SuppressLint("CommitPrefEdits") public class SessionManager { //Shared Preferences SharedPreferences pref; //Editor for Shared preferences Editor editor; //context Context _context; //shared pref mode int PRIVATE_MODE = 0; //nama sharepreference private static final String PREF_NAME = "Sesi"; // All Shared Preferences Keys private static final String IS_LOGIN = "IsLoggedIn"; public static final String KEY_USERNAME = "username"; public static final String KEY_FIRST_NAME = "first_name"; //constructor public SessionManager(Context context){ this._context = context; pref = _context.getSharedPreferences(PREF_NAME, PRIVATE_MODE); editor = pref.edit(); } //Create Login Session
public void createLoginSession(String username, String first_name){ //Storing Login value as TRUE editor.putBoolean(IS_LOGIN, true); editor.putString(KEY_USERNAME, username); editor.putString(KEY_FIRST_NAME, first_name); editor.commit(); } /** * Check Login method wil check user Login status * If false it will redirect user to Login page * Else won't do anything * */
public void checkLogin(){ // Check Login status if(!this.isLoggedIn()){ Intent i = new Intent(_context, Login.class); i.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); i.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); _context.startActivity(i); } } /** * Get stored session data * */ public HashMapgetUserDetails(){ HashMap user = new HashMap(); user.put(KEY_USERNAME, pref.getString(KEY_USERNAME, null)); user.put(KEY_FIRST_NAME, pref.getString(KEY_FIRST_NAME, null)); return user; } /** * Clear session details * */ public void logoutUser(){ // Clearing all data from Shared Preferences editor.clear(); editor.commit(); Intent i = new Intent(_context, Login.class); i.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); i.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); _context.startActivity(i); } public boolean isLoggedIn(){ return pref.getBoolean(IS_LOGIN, false); } }
Untuk memastikan project android berjalan dengan lancar saat di run nanti. Pastikan pada bagian AndroidManifest.xml terisi kode seperti berikut. Jika tidak ada, maka tambahkanlah.
Anda telah selesai membuat projek Register dan Login. Klik kanan projek dan pilih Run As – Android Application Project. Atau Klik tombol run dan pilih Device Android.
- Ketika program dijalankan, Activity yang berjalan pertama kali adalah login.xml - Karena kita belum memiliki data apapun pada database, maka pindah ke register.xml dengan memilih “ Register Here “ . - Kemudian isi data sesuai kemauan anda. Setelah itu tekan tombol “ Register Account “. Maka Data anda telah tersimpan pada Databases. Tekan tombol back untuk kembali. - Kemudian login dengan username dan password anda,
berikut tampilan saat anda berhasil login dan data yang tersimpan pada database
5. Membuat Tampilan Web PHP Sederhana untuk tampil data. Kadang dalam aplikasi Client Server seperti ini, perlu pula data yang tersimpan untuk diakses dan dilihat melalui tampilan web. Untuk Melakukan hal ini, buatlah sebuah file tampil.php pada direktori xampp/htdocs/login/. ( Berada satu folder dengan file php login.php dll ). kemudian ketik kode berikut : - tampil.php
Isilah beberapa data tambahan pada database “login” anda. Anda dapat melakukannya lewat Androip Apps yang telah anda buat atau via phpmyamin. Untuk mengakses File Web ini, ketik pada browser anda dengan alamat “ http://localhost/login/tampil.php “ . Berikut Tampilan dari Website Tampil data yang dibuat.
