[Tutorial] Cara Login Dan Register Menggunakan Retrofit2 Dan API Server Di Android

Assalamualaikum Warahmatullah..  

Halo temen-temen, kembali lagi bersama saya Ramadhany si programmer ganteng.. Ok temen-temen, sekarang saya mau membagi ilmu lagi yaitu tentang "Cara Login Dan Register Menggunakan Retrofit2 Dan API Server Di Android". Isi dari tutorial ini adalah jadi si user ini bisa login dan juga register yang data nya itu akan di simpan di server. Didalam Retrofit2 ini kalian bisa request ke API dengan method POST, GET, DELETE, UPDATE dan lain-lain. Dan kalo misalkan kalian masih bingung tentang retrofit, kalian bisa mengunjungi situs resmi retrofit nya   Situs Retrofit.... Oke langsung aja kita mulai saja

Pertama

Langkah yang pertama adalah siapkan dulu API Login dan registernya. Apabila kalian belum punya API nya, kalian bisa kunjingi tutorial ini terlebih dahulu..  Membuat API Login dan Register Dengan PHP MySQL

Kedua 

Buka Android Studio kalian, lalu buat lah project baru sesuai dengan keinginan kalian. Sebagai contoh saya memberi nama project saya dengan "Latihan1"

Ketiga

Buat EmptyActivity Seperti biasa, Lalu buat MainActivity.java nya. Lalu tekan Finish.

Keempat

Lalu langkah selanjut nya adalah buatlah sturktur seperti di bawah ini.

Kelima

Bukalah AndroidManifests.xml nya lalu tambahkan user permission Internet nya seperti di bawah ini

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

Keenam

Buka layout activity_daftar.xml lalu tambahkan widget-widget seperti di bawah ini

'<TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Register Activity"
        android:textSize="30sp"
        tools:layout_editor_absoluteX="102dp"
        android:textStyle="bold"
        tools:layout_editor_absoluteY="28dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp" />


    <LinearLayout
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="16dp"
        android:orientation="vertical"
        tools:layout_editor_absoluteY="90dp"
        tools:layout_editor_absoluteX="8dp"
        android:id="@+id/linearLayout">


        <EditText
            android:id="@+id/etNama"
            android:layout_marginTop="8dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Nama"
            android:padding="8dp"
            android:inputType="textEmailAddress"
            android:textColor="#000"/>

        <EditText
            android:id="@+id/etEmail"
            android:layout_marginTop="8dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email"
            android:padding="8dp"
            android:inputType="textEmailAddress"
            android:textColor="#000"/>

        <EditText
            android:id="@+id/etPassword"
            android:layout_marginTop="8dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword"
            android:padding="8dp"
            android:textColor="#000"/>


        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:id="@+id/btnRegister"
            android:text="Register" />



    </LinearLayout>

    <TextView
        android:id="@+id/txtLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Alreadey have an account ? Login here "
        android:textColor="#0011ff"
        android:layout_below="@+id/linearLayout"
        android:layout_alignParentStart="true"
        android:layout_marginTop="53dp" />'

Ketujuh

Setelah di buat, langkah selanjutnya buka layout activity_login.xml.. Lalu tambahkan komponen-komponen seperti di bawah ini

'<TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Login Activity"
            android:textSize="30sp"
            tools:layout_editor_absoluteX="102dp"
            android:textStyle="bold"
            tools:layout_editor_absoluteY="28dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="40dp" />


        <LinearLayout
            android:layout_width="368dp"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:padding="16dp"
            android:orientation="vertical"
            tools:layout_editor_absoluteY="90dp"
            tools:layout_editor_absoluteX="8dp">


            <EditText
                android:id="@+id/etEmail"
                android:layout_marginTop="8dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Email"
                android:padding="8dp"
                android:inputType="textEmailAddress"
                android:textColor="#000"/>

            <EditText
                android:id="@+id/etPassword"
                android:layout_marginTop="8dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password"
                android:inputType="textPassword"
                android:padding="8dp"
                android:textColor="#000"/>

            <Button
                android:id="@+id/btnLogin"
                android:layout_marginTop="16dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="LOG IN"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:id="@+id/btnRegister"
                android:text="Register"
                />


        </LinearLayout>'

Kedelapan

Tambahkan library-library berikut ini.. Lalu copy di gradle:app

compile 'com.squareup.retrofit2:retrofit:2.0.2'
compile 'com.squareup.retrofit2:converter-gson:2.0.2'
compile 'com.squareup.okhttp3:logging-interceptor:3.4.1'

Kesembilan

Buka class java RetrofitClient.java yang sudah kalian bikin sebelumnya. Lalu tambahkan code berikut ini

'private static Retrofit retrofit = null;

    public static Retrofit getClient(String baseUrl){
        HttpLoggingInterceptor interceptor = new HttpLoggingInterceptor();
        interceptor.setLevel(HttpLoggingInterceptor.Level.BODY);
        OkHttpClient client = new OkHttpClient.Builder().addInterceptor(interceptor).build();

        if (retrofit == null){
            retrofit = new Retrofit.Builder()
                    .baseUrl(baseUrl)
                    .addConverterFactory(GsonConverterFactory.create())
                    .client(client)
                    .build();
        }
        return retrofit;
    }'

Kesepuluh

Buka class Interface ApiService.java. Class ini berfungsi untuk mengisi perintah-perintah apa saja yang diperlukan untuk berkomunikasi dengan API. Seperti GET,POST,UPDATE, DELETE.

'// Fungsi ini untuk memanggil API http://192.168.88.20/latihan1/login.php
 // penamaan link sesuai dengan localhost masing-masing
    @FormUrlEncoded
    @POST("login.php")
    Call<ResponseBody> loginRequest(@Field("email") String email,
                                    @Field("password") String password);

    // Fungsi ini untuk memanggil API http://192.168.88.20/latihan1/register.php

    @FormUrlEncoded
    @POST("register.php")
    Call<ResponseBody> registerRequest(@Field("nama") String nama,
                                       @Field("email") String email,
                                       @Field("password") String password);
}'

Kesebelas

Buka Class UtilsApi.java . Class ini berfungsi untuk menggabungkan class RetrofitClient dan juga meng-deklarasikan class interface BaseApiService .

' // 10.0.2.2 ini adalah localhost.
    // bisa juga di masukan dengan IP address kalian
    public static final String BASE_URL_API =
            "http://192.168.88.20/latihan1/";

    // Mendeklarasikan Interface BaseApiService
    public static ApiService getAPIService(){
        return RetrofitClient.getClient(BASE_URL_API).create(ApiService.class);
    }'

Keduabelas

Selanjutnya adalah buka Activity LoginActivity.java .  Kita Deklarasikan terlebih dahulu komponen-komponen yang ada di dalam layout activity_login.xml . 

    'EditText etEmail;
    EditText etPassword;
    Button btnLogin;
    Button btnRegister;
    ProgressDialog loading;

    Context mContext;
    ApiService mApiService;
'

Di dalam method onCreate, tambahkan code ini

'mContext = this;
        mApiService = UtilsApi.getAPIService(); // meng-init yang ada di package apihelper
        initComponents();'

Setelah membuat method initComponents(); lalu tambahkan code berikut

' etEmail = (EditText) findViewById(R.id.etEmail);
        etPassword = (EditText) findViewById(R.id.etPassword);
        btnLogin = (Button) findViewById(R.id.btnLogin);
        btnRegister = (Button) findViewById(R.id.btnRegister);

        btnLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                loading = ProgressDialog.show(mContext, null, "Harap Tunggu...", true, false);
                requestLogin();
            }
        });

        btnRegister.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(mContext, DaftarActivity.class));
            }
        });'

Setelah itu buat methode requestLogin(); lalu tambahkan kode seperti di bawah ini

'mApiService.loginRequest(etEmail.getText().toString(), etPassword.getText().toString())
                    .enqueue(new Callback<ResponseBody>() {
                        @Override
                        public void onResponse(Call<ResponseBody> call, Response<ResponseBody> response) {
                            if (response.isSuccessful()){
                                loading.dismiss();
                                try {
                                    JSONObject jsonRESULTS = new JSONObject(response.body().string());
                                    if (jsonRESULTS.getString("error").equals("false")){
                                        // Jika login berhasil maka data nama yang ada di response API
                                        // akan diparsing ke activity selanjutnya.
                                        Toast.makeText(mContext, "BERHASIL LOGIN", Toast.LENGTH_SHORT).show();
                                        String nama = jsonRESULTS.getJSONObject("user").getString("nama");
                                        Intent intent = new Intent(mContext, MainActivity.class);
                                        intent.putExtra("result_nama", nama);
                                        startActivity(intent);
                                    } else {
                                        // Jika login gagal
                                        String error_message = jsonRESULTS.getString("error_msg");
                                        Toast.makeText(mContext, error_message, Toast.LENGTH_SHORT).show();
                                    }
                                } catch (JSONException e) {
                                    e.printStackTrace();
                                } catch (IOException e) {
                                    e.printStackTrace();
                                }
                            } else {
                                loading.dismiss();
                            }
                        }

                        @Override
                        public void onFailure(Call<ResponseBody> call, Throwable t) {
                            Log.e("debug", "onFailure: ERROR > " + t.toString());
                            loading.dismiss();
                        }
                    });'

Keempatbelas

Buka Activity DaftarActivity.java . Lalu tambahkan code berikut ini

   'EditText etNama;
    EditText etEmail;
    EditText etPassword;
    Button btnRegister;
    TextView txtLogin;
    ProgressDialog loading;

    Context mContext;
    ApiService mApiService;'

Selanjutnya adalah tambahkan lagi code berikut di dalam method onCreate

'mContext = this;
        mApiService = UtilsApi.getAPIService();
        // methode ini berfungsi untuk mendeklarasikan widget yang ada
        // di layout activity_daftar
        initComponents();'

Setelah itu adalah, tambahkan kembali code berikut di dalam method initComponents(); 

'etNama = (EditText) findViewById(R.id.etNama);
        etEmail = (EditText) findViewById(R.id.etEmail);
        etPassword = (EditText) findViewById(R.id.etPassword);
        btnRegister = (Button) findViewById(R.id.btnRegister);
        txtLogin = (TextView) findViewById(R.id.txtLogin);


        btnRegister.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                loading = ProgressDialog.show(mContext, null, "Harap Tunggu...", true, false);
                requestRegister();
            }
        });

        txtLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(getApplicationContext(), LoginActivity.class));
            }
        });'

Selanjutnya adalah tambahkan code berikut di dalam method requestRegister(); 

' mApiService.registerRequest(etNama.getText().toString(),
                    etEmail.getText().toString(),
                    etPassword.getText().toString())
                    .enqueue(new Callback<ResponseBody>() {
                        @Override
                        public void onResponse(Call<ResponseBody> call, Response<ResponseBody> response) {
                            if (response.isSuccessful()){
                                Log.i("debug", "onResponse: Berhasil");
                                loading.dismiss();
                                try {
                                    JSONObject jsonRESULTS = new JSONObject(response.body().string());
                                    if (jsonRESULTS.getString("error").equals("false")){
                                        Toast.makeText(mContext, "Anda Berhasil Registrasi", Toast.LENGTH_SHORT).show();
                                        startActivity(new Intent(mContext, LoginActivity.class));
                                    } else {
                                        String error_message = jsonRESULTS.getString("error_msg");
                                        Toast.makeText(mContext, error_message, Toast.LENGTH_SHORT).show();
                                    }
                                } catch (JSONException e) {
                                    e.printStackTrace();
                                } catch (IOException e) {
                                    e.printStackTrace();
                                }
                            } else {
                                Log.i("debug", "onResponse: Tidak Berhasil");
                                loading.dismiss();
                            }
                        }

                        @Override
                        public void onFailure(Call<ResponseBody> call, Throwable t) {
                            Log.e("debug", "onFailure: ERROR > " + t.getMessage());
                            Toast.makeText(mContext, "Koneksi Internet Bermasalah", Toast.LENGTH_SHORT).show();
                        }
                    });'

Buka Activity MainActivity.java . Activity ini nanti nya akan mucul setelah nantu kita berhasil login.

Keenambelas

Buka layout activity_main.xml lalu tambahkan komponen-komponen di bawah ini

'<TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="49dp"
        android:text="Main Activity"
        android:textSize="35sp"
        tools:layout_editor_absoluteX="163dp"
        tools:layout_editor_absoluteY="52dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Main Activity"
        android:textSize="25sp"
        tools:layout_editor_absoluteX="163dp"
        tools:layout_editor_absoluteY="52dp"
        android:layout_gravity="center"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/textView3" />


    <TextView
        android:id="@+id/txtResultNama"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Text Result Nama"
        android:textSize="15sp"
        android:layout_below="@+id/textView3"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="35dp" />'

Ketujuhbelas

Buka Activity MainActivity.java lalu tambahkan kode seperti di bawah ini

TextView txtResultNama;String resultNama;

Lalu tambahkan code di dalam methode onCreate();

' initComponents();

        // untuk mendapatkan data dari activity sebelumnya, yaitu activity login.
        Bundle extras = getIntent().getExtras();
        if (extras != null)
            resultNama = extras.getString("result_nama");
            txtResultNama.setText(resultNama);
    }

    private void initComponents() {
        txtResultNama = (TextView) findViewById(R.id.txtResultNama);
    }'

Kedelapabelas

Jangan lupa untuk mengganti mengubah inten filter ke dalam activity Register. Supaya ketika aplikasi di jalankan, yang akan muncul pertama adalah Activity Register. Buka AndroidManifests.xml lalu pindahkan inten filter ke dalam activity Register, yang sebelumnya inten filter ini berada di dalam Activity MainActivity

'<activity android:name=".View.DaftarActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".View.LoginActivity"></activity>'

Kesembilanbelas

Langkah terakir adalah menjalankan aplikasinya. Berikut adalah screen aplikasi yang sudah berhasil register dan juga login

Screen DaftarActivity

Akan Muncul Toast ketika sudah berhasil Register

Screen LoginActivity

Akan Muncul Toast dan membawa nama ketika sudah berhasil Login

Berikut ini adalah Demo Aplikasinya

 

Ok Temen-temen, gimana tutorial kali ini. Mungkin cukup sekian tutorial dari saya. Apabila ada kesalahan dari saya itu datang nya dari syaitan dan kebenaran itu datang nya dari Allah. Semoga tutorial ini bermanfaat bagi kita semua. Bila ada yang ingin di tanyakan ke saya bisa DM saya via FB, Instagram, Google Hangout dan WA : 081322579702

Wassalamualaikum Warahmatullah