RSS

Membuat Login di Android menggunakan JSON

05 Dec

Persyaratan (mengerti php, mysql, terinstall eclipse dan android SDK)

JavaScript Object Notation (JSON) merupakan sebuah sintaks yang digunakan untuk menyimpan serta mengirimkan informasi dalam bentuk teks. JSON memiliki beberapa keunggulan, antara lain:

  • Ringan
  • Tidak terpaku pada salah satu bahasa pemrograman
  • Dapat dimengerti oleh manusia.

Berikut merupakan contoh sebuah object JSON

{
“stokBarang”: [
{ “namaBarang”:”Pensil” , “jumlahBarang”:1 }, 
{ “namaBarang”:”Penggaris” , “jumlahBarang”:3 }
]
}

Terdapat objek stokBarang, sebuah array yang mempunyai indeks asosiatif, yaitu namaBarang dan jumlahBarang. Untuk mengakses nama barang yang pertama $objekJSON->namaBarang[0], dst.

Alur program login kali ini adalah:

  • Tampilan layar login di android (client)
  • Kirim data ke server (client)
  • Terima request dari client (server)
  • Cocokkan dengan database (server)
  • Kembalikan hasil dalam bentuk JSON (server)
  • Terima hasil dari server (client)
  • Parsing dari JSON (client)

Kode untuk server, menggunakan database mysql, tabel ‘user’ dengan field id, user, password, status untuk alamatnya terdapat di http://localhost/droid/get.php

Connection.php

<?php

$hostname_localhost =”localhost:3306″;

$database_localhost =”droid”;

$username_localhost =”root”;

$password_localhost =””;

$con = mysql_connect($hostname_localhost,$username_localhost,$password_localhost)

or

trigger_error(mysql_error(),E_USER_ERROR);

?>

Get.php

<?php

    require_once(‘connection.php’);

    mysql_select_db($database_localhost,$con);

    $query_search = “select * from user where user = ‘”.$_POST[‘user’].”‘ and password = ‘”.$_POST[‘password’].”‘ “;

    $query_exec = mysql_query($query_search) or die(mysql_error());

    if (mysql_errno()) {

     header(“HTTP/1.1 500 Internal Server Error”);

     echo $query.’\n’;

     echo mysql_error();

} else {

        if(mysql_num_rows($query_exec) != 0){

                $output=mysql_fetch_object($query_exec);

            print(json_encode($output));

        } else {echo “No Data”; }

        mysql_close();

    }

?>

Pada kode di atas, hasil dari query dijadikan sebuah object dengan method mysql_fetch_object dan menjadikannya sebuah object json dengan memanggil method json_encode.

Login.html (untuk ujicoba)

<html>

<form action=”get.php” method=”POST”>

<input type=”text” name=”user”/>

<br>

<input type=”text” name=”password”/>

<input type=”submit” value=”login”/>

</form>

</html>

Setelah dicoba dengan form html sederhana, maka didapatkan output:

{“id”:”1″,”user”:”admin”,”password”:”admin”,”status”:”admin”}

Sedangkan jika login salah, maka didapatkan output: No Data

Setelah server siap, kita beralih ke aplikasi android, buatlah sebuah project baru di eclipse.

Kode untuk tampilan utama:

<RelativeLayout
xmlns:android=http://schemas.android.com/apk/res/android&#8221;


xmlns:tools=http://schemas.android.com/tools&#8221;


android:layout_width=“fill_parent”


android:layout_height=“fill_parent”


android:orientation=“horizontal”>


<TextView


android:id=“@+id/textView1”


android:layout_width=“wrap_content”


android:layout_height=“wrap_content”


android:layout_centerHorizontal=“true”



android:text=“username : “


/>


<EditText


android:id=“@+id/etUsername”


android:layout_width=“wrap_content”


android:layout_height=“wrap_content”


android:layout_centerHorizontal=“true”


android:layout_below=“@id/textView1”


android:ems=“20”


android:hint=“username”


android:inputType=“text”


>


<requestFocus />


</EditText>


<TextView


android:id=“@+id/TextViewPassword”


android:layout_width=“wrap_content”


android:layout_height=“wrap_content”


android:layout_centerHorizontal=“true”


android:layout_below=“@id/etUsername”


android:text=“Password:”
/>


<EditText


android:id=“@+id/etPassword”


android:layout_width=“wrap_content”


android:layout_height=“wrap_content”


android:layout_centerHorizontal=“true”


android:layout_below=“@id/TextViewPassword”


android:ems=“20”


android:hint=“password”


android:inputType=“textPassword”


/>


<Button
android:id=“@+id/btnLogin”


android:text=“Login!”


android:layout_width=“wrap_content”


android:layout_height=“wrap_content”


android:layout_alignRight=“@id/etPassword”


android:layout_below=“@id/etPassword”
/>

</RelativeLayout>

Kemudian kode untuk memroses login, kita buat sebuah kelas baru untuk menangani JSON. Method login digunakan ketika user menekan tombol login di tampilan

//kelas
json helper, untuk
pemrosesan
json
dari server

public
class JSONHelper {

    //untuk
proses
kirim data login ke server, kemudian
melihat
balikan

    public LoginDetails login(String username, String password)

            throws ClientProtocolException, IOException{

        InputStream is;

        String result = “”;

        LoginDetails details = null;

        JSONObject jsonObject = null;

        //sebagai
ganti
localhost
di
php, menggunakan 10.0.2.2

        String url = http://10.0.2.2/droid/get.php&#8221;;

        

        //untuk
akses
http
di server

        HttpClient httpClient = new DefaultHttpClient();

        HttpPost httpPost = new HttpPost(url);

        

        //menambahkan data post untuk user dan password

List<NameValuePair> nameValuePairs = new ArrayList<NameValuePair>(2);

nameValuePairs.add(new BasicNameValuePair(“user”, username));

nameValuePairs.add(new BasicNameValuePair(“password”, password));

httpPost.setEntity(new UrlEncodedFormEntity(nameValuePairs));


//melihat
hasil
dari
alamat + data post tadi

        HttpResponse response = httpClient.execute(httpPost);

        //mengambil entity dari
hasil
tadi

        HttpEntity entity = response.getEntity();

        //mengambil input stream dari
hasil
respon

        is = entity.getContent();

//melihat
teks
dari input stream

        result = convertInputtoString(is);

        Log.v(“resut”, result);

        //kalau
hasilnya no data atau null, mengembalikan null, login tak
berhasil

        if(result.equalsIgnoreCase(“No Data”) || result == null){

            return
null;

        }else{

            try {

                //membuat object json
dari string yang
diterima

                jsonObject = new JSONObject(result);

                details = new LoginDetails();

                //mengambil user dan status dari object json

                details.setUsername(jsonObject.getString(“user”));

                details.setStatus(jsonObject.getString(“status”));

                return details;

            } catch (JSONException e) {

                Log.v(“error”, e.getMessage());

            }

        }

        return
null;

    }

Kelas login details untuk menyimpan detail

public
class LoginDetails {

    private String username;

    private String status;

    

    public String getUsername() {

        return
username;

    }

    public
void setUsername(String username) {

        this.username = username;

    }

    public String getStatus() {

        return
status;

    }

    public
void setStatus(String status) {

        this.status = status;

    }

}

Berikut adalah kode yang dipanggil ketika tombol login ditekan

public
void onClick(View v) {

        if(v.getId() == R.id.btnLogin){

            EditText user = (EditText)findViewById(R.id.etUsername);

            EditText password = (EditText)findViewById(R.id.etPassword);

            //jika
masih
kosong, harus
diisi
terlebih
dahulu

            if(user.getText().toString().length() == 0 ||

                    password.getText().toString().length() == 0){

                Toast.makeText(getBaseContext(),

                        “You must fill in username and password”, Toast.LENGTH_SHORT).show();

            }else{

                setProgressBarIndeterminateVisibility(true);

                progress = ProgressDialog.show(this, “Logging in”, “Please wait”);

                LoginDetails details = null;

                try {

                    details =                             jsonHelper.login(user.getText().toString(),

        user.getText().toString());

                } catch (ClientProtocolException e) {

                    Log.v(“error”, e.getMessage());

                } catch (IOException e) {

                    Log.v(“error”, e.getMessage());

                }

                setProgressBarIndeterminateVisibility(false);

                progress.dismiss();

                

                if(details == null){

                    Toast.makeText(getBaseContext(),

                            “Login failed”, Toast.LENGTH_SHORT).show();

                }else{

                    Toast.makeText(getBaseContext(),

                            “Login succeed as “+details.getUsername(),

                            Toast.LENGTH_SHORT).show();

                }

            }

Dimana intinya adalah pemanggilan method login dari kelas JSONHelper, serta memberitahukan pengguna apakah login mereka berhasil atau tidak.

Dalam tutorial ini data login dikirim tanpa menggunakan koneksi yang aman, dalam implementasi login, diharapkan menggunakan SSL maupun koneksi melalui HTTPS. Untuk contoh pengiriman data dalam bentuk array maupun pengiriman data dari client ke server dalam bentuk JSON dapat dilihat pada referensi di bawah.

Haritz Cahya Nugraha @ 2012

Referensi:

http://www.instropy.com/2010/06/14/reading-a-json-login-response-with-android-sdk/

http://appinventor.blogspot.com/2011/09/android-mysql-connectivity-via-json.html

http://fahmirahman.wordpress.com/2011/04/21/connection-between-php-server-and-android-client-using-http-and-json/

http://p-xr.com/android-tutorial-how-to-parse-read-json-data-into-a-android-listview/

 
4 Comments

Posted by on December 5, 2012 in Uncategorized

 

4 responses to “Membuat Login di Android menggunakan JSON

  1. Ervan

    January 17, 2013 at 2:19 pm

    yg code tombol login di tempatkan dimana mas ?

     
  2. cincau

    June 6, 2013 at 6:53 pm

    ad yg error nih,,, boleh mnta sourc codenya ga?

     
  3. heri009

    April 11, 2016 at 9:47 pm

    Tanya dong. apakah ini script login untuk sekali login? maksudnya gini. misal pertama kali kita jalankan aplikasi, apakah pada saat kita menjalankan aplikasi untuk yang berikutnya harus melakukan login lagi?

     
  4. IRiT24

    May 20, 2016 at 1:52 pm

    bang ini gimna kok ga bisa di run

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: