[ MODUL MOBILE PROGRAMMING (11) ]

MEMBUAT FORM LOGIN DENGAN DATABASE MYSQL

Modul Ini Disusun Untuk Membantu Proses Pembelajaran Bagi Mahasiswa

DOSEN : CEPI RAHMAT HIDAYAT, M.KOM

STMIK TASIKMALAYA
SEKOLAH TINGGI MANAJEMEN INFORMATIKA
DAN KOMPUTER
A. TUJUAN
- Mahasiswa mamahami Request Network.
- Mahasiswa mampu mengunakan library Networking
- Mahasiswa mampu menggunakan database Mysql untuk membuat API.
- Mahasiswa memahami pembuatan Fasilitas Login

B. TEORI SINGKAT
1. FAN (Fast Android Networking)
FAN merupakan sebuah library yang sangan powerful untuk melakukan semua
tipe request network di android yang dibuat diatas lapisan jaringan OkHttp.

Selain powerfull dan mudah digunakan, perbedaan mendasar dari FAN ini dengan
library lainnya adalah dari segi fitur, berikut fitur-fitur yang ditawarkan oleh FAN
1. Berbeda dengan library lain, FAN mendukung semua jenis request
HTTP/HTTPS seperti GET, POST, DELETE, HEAD, PUT, PATCH.
2. Koneksi lebih cepat karena menggunakan OkHttp dan Okio
3. Support untuk download, upload, dan multipart
4. Support Parsing JSON ke Java Object dan mendukung Jackson Parser
5. Manajemen Caching yang dapat mengurangi penggunaan bandwith
6. Kode simple dan mudah digunakan
7. Support RxJava

2. Cara Menggunakan FAN

Termasuk dalam fitur dari FAN ini yaitu kode yang simple dan mudah digunakan,
sebelum menggunakan library ini, pertama kalian harus menambahkan library ini
ke project kalian, tambahkan baris kode ini di file build.gradle
implementation 'com.amitshekhar.android:android-networking:1.0.2'

Lalu tambahkan permission untuk akses ke Internet di AndroidManifest.xml

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

 Lalu inisialisasikan di Activity dengan menambah baris kode berikut

AndroidNetworking.initialize(getApplicationContext());

Jika semua persyaratan diatas sudah terpenuhi, berikut contoh beberapa request
yang bisa digunakan dengan Fast Android Networking ini :

 Membuat Request GET

AndroidNetworking.get("https://fierce-cove
29863.herokuapp.com/getAllUsers/{pageNumber}")
.addPathParameter("pageNumber", "0")
.addQueryParameter("limit", "3")
.addHeaders("token", "1234")
.setTag("test")
.setPriority(Priority.LOW)
.build()
.getAsJSONArray(new JSONArrayRequestListener() {
@Override
public void onResponse(JSONArray response) {
// do anything with response
}
@Override
public void onError(ANError error) {
// handle error
}
});

 Membuat Request POST

AndroidNetworking.post("https://fierce-cove-29863.herokuapp.com/createAnUser")
.addBodyParameter("firstname", "Amit")
.addBodyParameter("lastname", "Shekhar")
.setTag("test")
.setPriority(Priority.MEDIUM)
.build()
.getAsJSONObject(new JSONObjectRequestListener() {
@Override
public void onResponse(JSONObject response) {
// do anything with response
}
@Override
public void onError(ANError error) {
// handle error
}
});

Kalian juga dapat memposting objek java, json, file, dll dalam permintaan POST
seperti ini.
 User user = new User();
user.firstname = "Amit";
user.lastname = "Shekhar";

AndroidNetworking.post("https://fierce-cove-
29863.herokuapp.com/createUser")
.addBodyParameter(user) // posting java object
.setTag("test")
.setPriority(Priority.MEDIUM)
.build()
.getAsJSONArray(new JSONArrayRequestListener() {
@Override
public void onResponse(JSONArray response) {
// do anything with response
}
@Override
public void onError(ANError error) {
// handle error
}
});

JSONObject jsonObject = new JSONObject();

try {
jsonObject.put("firstname", "Amit");
jsonObject.put("lastname", "Shekhar");
} catch (JSONException e) {
e.printStackTrace();
}

AndroidNetworking.post("https://fierce-cove-
29863.herokuapp.com/createUser")
.addJSONObjectBody(jsonObject) // posting json
.setTag("test")
.setPriority(Priority.MEDIUM)
.build()
.getAsJSONArray(new JSONArrayRequestListener() {
@Override
public void onResponse(JSONArray response) {
// do anything with response
}
@Override
public void onError(ANError error) {
// handle error
}
});

AndroidNetworking.post("https://fierce-cove-
29863.herokuapp.com/postFile")
.addFileBody(file) // posting any type of file
.setTag("test")
.setPriority(Priority.MEDIUM)
.build()
.getAsJSONObject(new JSONObjectRequestListener() {
@Override
public void onResponse(JSONObject response) {
// do anything with response
}
@Override
public void onError(ANError error) {
// handle error
}
});
  Download File dari Server

AndroidNetworking.download(url,dirPath,fileName)
.setTag("downloadTest")
.setPriority(Priority.MEDIUM)
.build()
.setDownloadProgressListener(new DownloadProgressListener() {
@Override
public void onProgress(long bytesDownloaded, long totalBytes) {
// do anything with progress
}
})
.startDownload(new DownloadListener() {
@Override
public void onDownloadComplete() {
// do anything after completion
}
@Override
public void onError(ANError error) {
// handle error
}
});

 Upload File dari Server

AndroidNetworking.upload(url)
.addMultipartFile("image",file)
.addMultipartParameter("key","value")
.setTag("uploadTest")
.setPriority(Priority.HIGH)
.build()
.setUploadProgressListener(new UploadProgressListener() {
@Override
public void onProgress(long bytesUploaded, long totalBytes) {
// do anything with progress
}
})
.getAsJSONObject(new JSONObjectRequestListener() {
@Override
public void onResponse(JSONObject response) {
// do anything with response
}
@Override
public void onError(ANError error) {
// handle error
}
});

Dan masih banyak lagi yang lainnya untuk dokumentasi lengkapnya silahkan bisa
anda kunjungi website : https://amitshekhar.me/
C. PRAKTIKUM MEMBUAT FORM LOGIN

1. Buatlah Database dengan nama : dbpos

2. Buatlah Tabel dengan nama : t_pengguna

Kode SQL :

CREATE TABLE `t_pengguna` (

`id_pengguna` int(11) NOT NULL,
`nama_pengguna` varchar(45) NOT NULL,
`username` varchar(35) NOT NULL,
`password` varchar(100) NOT NULL,
`level` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `t_pengguna` (`id_pengguna`, `nama_pengguna`, `username`,

`password`, `level`) VALUES
(1, 'Administrator', 'admin', '827ccb0eea8a706c4c34a16891f84e7b',
'admin'),
(2, 'Kasir', 'kasir', '01cfcd4f6b8770febfb40cb906715822', 'kasir');

ALTER TABLE `t_pengguna`

ADD PRIMARY KEY (`id_pengguna`),
ADD UNIQUE KEY `username` (`username`);

ALTER TABLE `t_pengguna`

MODIFY `id_pengguna` int(11) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=3;COMMIT;

Data password dienkripsi dengan MD5

3. Buatlah folder “api “ di directory root webserver baik local ataupun hosting
4. Buatlah Halaman PHP untuk koneksi database : koneksi.php
 Kode Lengkap :

<?php
$host="localhost";
$user="root";
$pass="";
$database="dbpos";
$koneksi= new mysqli($host,$user,$pass,$database);
if(mysqli_connect_errno()){
trigger_error("Koneksi ke database gagal : ".
mysqli_connect_error(), E_USER_ERROR);
}
?>

5. Buatlah Halaman PHP untuk request API server : login.php

Kode Lengkap :

<?php
include "koneksi.php";

//inisialisasi data
$username=mysqli_real_escape_string($koneksi,$_POST['username']);
$password=mysqli_real_escape_string($koneksi,md5($_POST['password']));

//Menyiapkan array untuk json

$result = array();
$tampil=mysqli_query($koneksi,"SELECT * FROM t_pengguna WHERE
username='$username' AND password='$password' ");
$data=mysqli_fetch_array($tampil);

// Jika data ditemukan

if(!empty($data['id_pengguna'])){

// Masukan data kedalam format array

array_push($result, array(
'id_pengguna'=>"$data[id_pengguna]",
'nama_pengguna'=>"$data[nama_pengguna]",
'username'=>"$data[username]",
'password'=>"$data[password]",
'level'=>"$data[level]",
'status'=>1,
'pesan'=>"Berhasil Login"));
} else{
array_push($result, array(
'id_pengguna'=>null,
'nama_pengguna'=>null,
'username'=>null,
 'password'=>null,
'level'=>null,
'status'=>0,
'pesan'=>"Gagal Login"));

// Mengubah format array kedalam format json

die(json_encode($result));

mysqli_close($koneksi);

?>

6. Buatlah sebuah project aplikasi baru lalu atur seperti berikut

a. Nama Project <nama masing-masing> Praktikum 11
b. Package ganti dengan com.nama masing-masing.ptk11
c. Language : Java
d. API Level : API 21 : Android 5.0 (Lollipop)
e. Jenis Activity : blank/empty activity
f. Siapkan 2 file gambar pada drawable

Settingan yang lainnya silahkan disesuaikan.

7. Tambahkan library FAN ( Fast Android Networking) salah satu Library yang bisa
digunakan untuk keperluan request ke network/internet
Tambahkan pada file build.gradle.

implementation 'com.amitshekhar.android:android-networking:1.0.
8. Atur izin menggunakan jaringan pada file AndroidManifest.xml
Untuk penggunaan izin network pada tingkatan android versi yang teratas anda
harus menggunakan jenis protocol HTTPS

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

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

9. Buatlah activity baru pilih Empty Activity dengan nama Login

- Ceklis Generate Layout File
- Ceklis Launcher Activity (Sebagai yang pertama dijalankan)
- Klik finish
10. layout activitiy_login.xml

Kode Lengkap :

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
 android:paddingBottom="20dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="20dp"
android:orientation="vertical"
tools:context=".Login">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">

<ImageView
android:id="@+id/Logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Form Login"
android:textSize="30sp"
android:textStyle="bold"
android:layout_below="@id/Logo"
android:layout_marginTop="24dp" />

</RelativeLayout>

<EditText
android:id="@+id/text_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:ems="10"
android:hint="Username"
android:padding="10dp"
android:textColorHint="#757575"
android:background="#E0E0E0"
android:inputType="textPersonName" />

<EditText
android:id="@+id/text_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPassword"
android:hint="Password"
android:textColorHint="#757575"
android:padding="10dp"
android:background="#E0E0E0"
android:layout_marginTop="10dp" />

<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="23dp"
android:text="Log In"
android:textColor="#FFF"
android:background="#FF5252" />

</LinearLayout>
11. Login.java
Kode Lengkap :

package com.cepi.ptk11;

import androidx.appcompat.app.AppCompatActivity;

import android.app.ProgressDialog;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import com.androidnetworking.AndroidNetworking;
import com.androidnetworking.common.Priority;
import com.androidnetworking.error.ANError;
import com.androidnetworking.interfaces.JSONArrayRequestListener;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

public class Login extends AppCompatActivity {

ProgressDialog pDialog;
Intent intent;
Button btn_login;
EditText txt_username, txt_password;
String id_pengguna,pesan,nama_pengguna,level;
Integer status;
SharedPreferences sharedpreferences;
Boolean session = false;

//Menyiapkan variabel publik untuk penyimpanan shared_preferences

public static final String my_shared_preferences = "my_shared_preferences";
public static final String session_status = "session_status";
public static final String session_id = "session_id";
public static final String session_nama = "session_nama";
public static final String session_level = "session_level";

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
btn_login = (Button) findViewById(R.id.btn_login);
txt_password = (EditText) findViewById(R.id.text_password);
txt_username = (EditText) findViewById(R.id.text_username);

//Mengecek nilai dari session dari data session_status apakah nilainya

true atau false
// True langsung menuju MainActivity artinya sudah berhasil login
sebelumnya
// false akan tetap di activity login artinya sebelumnya belum login
atau sudah login tapi gagal login
sharedpreferences = getSharedPreferences(my_shared_preferences,
Context.MODE_PRIVATE);
session = sharedpreferences.getBoolean(session_status, false);
 if (session) {
Intent intent = new Intent(Login.this, MainActivity.class);
finish();
startActivity(intent);
}

AndroidNetworking.initialize(getApplicationContext());
// Pada saat tombol login di klik
btn_login.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
String password = txt_password.getText().toString();
String username = txt_username.getText().toString();

// mengecek kolom yang kosong

if (password.trim().length() > 0) {
//apabila kolom sudah diisi semua panggil fungsi loginku
yang sebelumnya sudah dibuat
loginku(username, password);
} else {
// Tampilkan pesan peringatan
Toast.makeText(getApplicationContext() ,"Kolom tidak boleh
kosong", Toast.LENGTH_LONG).show();
}
}
});

//Buat fungsi login dengan 2 parameter inputan yaitu username dan password
public void loginku(String username,String password){
pDialog = new ProgressDialog(this);
pDialog.setCancelable(false);
pDialog.setMessage("Verifikasi ...");

showDialog();
//Alamat untuk request API server sesuaikan IP atau domain dengan yang
anda buat disini saya menggunkan localhost
AndroidNetworking.post("http://192.168.137.1:8080/api/login.php")
//mengirimkan data username dan password yang akan diisi oleh
user
.addBodyParameter("username",username)
.addBodyParameter("password",password)
.setPriority(Priority.MEDIUM)
.build()
.getAsJSONArray(new JSONArrayRequestListener() {
@Override
public void onResponse(JSONArray response) {
//Handle Response
hideDialog();

try {

//Menampilkan data json

for(int i=0;i<response.length();i++){
JSONObject data = response.getJSONObject(i);

//parsing data json ke variabel

id_pengguna= data.getString("id_pengguna");
nama_pengguna= data.getString("nama_pengguna");
 level= data.getString("level");
status= data.getInt("status");
pesan= data.getString("pesan");

}
// Jika status = 1 maka berhasil login
if(status==1){
Toast.makeText(getApplicationContext(), pesan,
Toast.LENGTH_SHORT).show();

// Menyimpan data pada SharedPreferences dari

parsing json ke variabel
SharedPreferences.Editor editor =
sharedpreferences.edit();
editor.putBoolean(session_status, true);
editor.putString(session_id,id_pengguna );
editor.putString(session_nama,nama_pengguna );
editor.putString(session_level,level );

editor.commit();

// Tampikan activity MainActivity

Intent intent = new Intent(Login.this,
MainActivity.class);
finish();
startActivity(intent);

}else {
//Apabila gagal login tampilkan pesan peringatan
dan kosongkan kolom input
Toast.makeText(getApplicationContext(), pesan,
Toast.LENGTH_SHORT).show();
txt_password.setText("");
txt_username.setText("");
hideDialog();
}

}catch (JSONException e) {
// JSON error
e.printStackTrace();
}

}
@Override
public void onError(ANError error) {

//memunculkan pesan saat tidak dapat terhubung ke server

misal dikarenakan koneksi jaringan
Toast.makeText(getApplicationContext(),"Gagal terhubung,
cobalah periksa koneksi internet anda", Toast.LENGTH_SHORT).show();
hideDialog();
}
});
}

private void showDialog() {

if (!pDialog.isShowing())
pDialog.show();
}

private void hideDialog() {

if (pDialog.isShowing())
pDialog.dismiss();
 }
}

12. layout activitiy_main.xml

Kode Lengkap :

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="20dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="70dp"
android:orientation="vertical"
android:layout_centerInParent="true"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"

android:gravity="center">

<ImageView
android:id="@+id/Logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/user" />

</RelativeLayout>
<TextView
android:id="@+id/text_welcome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:text="Selamat Datang"
android:textSize="15sp"
android:textStyle="bold"

android:layout_marginTop="24dp" />
<TextView
android:id="@+id/text_user"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:text="Name User Login"
android:textSize="25sp"
android:textStyle="bold"

android:layout_marginTop="4dp" />
 <Button
android:id="@+id/btn_logout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="23dp"
android:text="Log Out"
android:textColor="#FFFFFF"
android:background="#D500F9" />

</LinearLayout>

13. MainActivity.java
Kode Langkap :

package com.cepi.ptk11;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

import static com.cepi.ptk11.Login.my_shared_preferences;

import static com.cepi.ptk11.Login.session_nama;
import static com.cepi.ptk11.Login.session_status;

public class MainActivity extends AppCompatActivity {

TextView text_user;
SharedPreferences sharedpreferences;
Button btn_logout;
String nama;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
text_user =(TextView) findViewById(R.id.text_user);
btn_logout =(Button) findViewById(R.id.btn_logout);
//Mengambil data nama yang tersimpan di SharedPreferences kemudian
menampilkan pada text user
sharedpreferences = getSharedPreferences(my_shared_preferences,
Context.MODE_PRIVATE);
nama = sharedpreferences.getString(session_nama, null);
text_user.setText(nama);
 //Pada saat tombol logout di klik maka akan mengedit nilai
session_status dari true manjadi false
// Sehingga statusnya harus login kembali

btn_logout.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
SharedPreferences.Editor editor = sharedpreferences.edit();
editor.putBoolean(session_status, false);
editor.commit();
Toast.makeText(getApplicationContext(), "Anda telah keluar",
Toast.LENGTH_SHORT).show();

//Akan diarahkan ke activity Login

Intent intent = new Intent(MainActivity.this, Login.class);
finish();
startActivity(intent);
}
});
}
}

14. Agar tampilan Activity Login FullScreen kita buat pengaturan pada style.xml
Tambahkan :

<style name="FullScreen" parent="Theme.AppCompat.Light.NoActionBar">

<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

Kode Lengkap :
Apabila sudah dibuat sesuaikan pada AndroidManifest.xml tambahkan thema
pada activity login

android:theme="@style/FullScreen"

Tambahkan seperti berikut :

15. Hasil Akhir :