68

Modul

8
Database External
Tujuan
Praktikan diharapkan dapat menggunakan Android Studio untuk membuat program sederhana pada
smartphone/ emulator. Di akhir praktikum ini, praktikan diharapkan dapat:

• Membuat koneksi database pada Android Studio

• Menerapkan koneksi database external pada Android Studio

Persiapan
1. Buku ajar (jika ada)/diktat kuliah/materi dari sumber lain
2. Alat tulis
3. Kertas Buram
4. Lembar jawaban
5. Lembar penilaian (disiapkan oleh asisten)
6. Komputer yang sudah di-install Android Studio & Emulator didalamnya
7. Android Smartphone (Jika tidak menginstall emulator)

Materi Pokok
Praktikum ini mengasumsikan bahwa praktikan telah mempelajari materi tentang Database
External pada Android. Praktikan juga diharapkan sudah memahami materi tentang CRUD database
dengan Java. Agar praktikan dapat mencapai tujuan dalam pertemuan praktikum kedelapan ini,
praktikan harus aktif melihat-lihat contoh program, bertanya, dan mencoba mempraktekkan tugas
dan latihan dalam praktikum delapan yang berisi materi tentang Database External ini.
 69

Proses
Langkah pertama bacalah dulu materi tentang implementasi database MySQL selama 10
menit. Kemudian catatlah kegunaan XAMPP dalam mendukung implementasi tersebut dalam waktu
5 menit. Sebagai percobaan buatlah database sederhana untuk menampilkan nama, NRP, dan kelas
dengan menggunakan waktu tidak lebih dari 10 menit. Setelah itu lanjutkan dengan membuat project
baru untuk mencoba menghubungkan koneksi database ke perangkat android anda. Diskusikan
selama 15 menit tentang cara kerja project yang sudah Anda buat, terutama tentang program dan cara
kerjanya. Berikutnya kerjakan projek aplikasi pada aktifitas (kerjakan dan diskusikan dengan teman
Anda dalam 25 menit). Kerjakan latihan dalam waktu 25 menit.

Aktivitas
1. Praktikan membaca buku ajar (jika ada)/ diktat kuliah/materi dari sumber lain tentang Database
External Android sebagai materi bab kedelapan. Temukan bagian penting dalam topik ini,
kemudian tulis sebagai ringkasan hasil belajar.

2. Praktikan berdiskusi tentang Database External Android serta menerapkannya dalam sebuah
program aplikasi android.

● Install aplikasi XAMPP dan jalankan service Apache dan MySQL

● Buka http://localhost/phpmyadmin/ dimana kita akan menyiapkan database kita terlebih

dahulu.
● Buat database bernama “users_database” dan buat tabel bernama “users_table” dan
sesuaikan field nya menjadi seperti berikut.
 70

● Buat sebuah user dengan data sebagai berikut.

Karena kita menggunakan auto increment pada field “ID”, maka saat pengisian data, field
“ID” tidak perlu di-isi.

● Setelah database siap, sekarang kita siapkan 2 file .php yaitu,

1. conn.php
2. login.php

conn.php

<?php

$db_name = "users_database";

$username = "root";

$password = "";

$servername = "localhost";

$conn = mysqli_connect($servername ,$username ,$password ,$db_name );

mysqli_set_charset($conn ,"utf-8");

?>

login.php

<?php

require "conn.php";

$email = $_POST["email"];

$password = $_POST["psw"];

$isValidEmail = filter_var($email, FILTER_VALIDATE_EMAIL);

if($conn){

if( $isValidEmail === false){

echo "This Email is not valid";

}else{
 71

$sqlCheckEmail = "SELECT * FROM users_table WHERE email LIKE

'$email'";

$usernameQuery = mysqli_query($conn,$sqlCheckEmail);

if(mysqli_num_rows($usernameQuery) > 0){

$sqlLogin = "SELECT * FROM users_table WHERE email LIKE

'$email' AND password LIKE '$password'";

$loginQuery = mysqli_query($conn,$sqlLogin);

if(mysqli_num_rows($loginQuery) > 0){

echo "Login Success";

}else{

echo "Wrong Password";

}else{

echo "This Email is not registered";

}else{

echo "Connection Error";

} ?>

Setelah itu simpan 2 file .php tersebut di dalam didalam folder C:\xampp\htdocs\

● Buka file app/gradle dan tambahkan dependency berikut

Dependency baru:

implementation 'com.android.volley:volley:1.2.0'
implementation 'com.rengwuxian.materialedittext:library:2.1.4'

● Kemudian buka AndroidManifest.xml dan tambahkan beberapa permissions berikut

Permissions baru:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

● Sekarang buka colors.xml yang ada didalam folder res/values/ dan sesuaikan kodenya
seperti berikut ini
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
 72

<color name="white">#FFFFFFFF</color>
<color name="colorPrimary">#000000</color>
<color name="colorPrimaryDark">#000000</color>
<color name="colorAccent">#000000</color>
</resources>

● Lalu buka themes.xml yang ada pada folder res/values/themes/ dan sesuaikan kodenya
seperti berikut
themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.LatihanDbExternal"
parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor"
tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>

<style name="menustyle"
parent="Theme.AppCompat.Light">

<item name="android:background">@android:color/white</item>
</style>
</resources>

● Setelah itu buka file strings.xml pada folder res/values/ dan tambahkan kode berikut
didalamnya.
strings.xml
<string name="prefStatus">loggedin</string>

● Sekarang buat empty activity dan beri nama AppStartActivity

● Lalu buka layout activity_app_start.xml yang telah degenerate secara otomatis dan
sesuaikan kodenya seperti berikut
activity_app_start.xml
<?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"
tools:context=".AppStartActivity"
android:orientation="vertical"
>
<include
android:id="@+id/toolbar"
layout="@layout/bar_layout"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Welcome to App Start Activity"
android:textColor="@color/colorPrimaryDark"
 73

android:layout_gravity="center_vertical"
android:gravity="center"
android:layout_marginTop="200dp"
android:textSize="40sp"
android:textStyle="bold"/>

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Log out"
android:textAllCaps="false"
android:id="@+id/logout"
android:textColor="@android:color/white"
android:background="@color/colorPrimaryDark"
android:layout_marginTop="50dp"/>

</LinearLayout>

● Buka AppStartActivity.java dan sesuaikan kodenya seperti ini

AppStartActivity.java
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;

public class AppStartActivity extends AppCompatActivity {

Button logout;
SharedPreferences sharedPreferences;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_app_start);
logout = findViewById(R.id.logout);
sharedPreferences = getSharedPreferences("UserInfo",
Context.MODE_PRIVATE);
logout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

SharedPreferences.Editor editor = sharedPreferences.edit();

editor.putString(getResources()
.getString(R.string.prefStatus),"logout");
editor.apply();
startActivity(new Intent(AppStartActivity
.this,MainActivity.class));
finish();
}
});
}
}

● Setelah itu, buat class baru bernama MySingleton.java dan isikan kodenya seperti berikut
MySingleton.java
import android.content.Context;
import com.android.volley.Cache;
import com.android.volley.Network;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
 74

import com.android.volley.toolbox.BasicNetwork;
import com.android.volley.toolbox.DiskBasedCache;
import com.android.volley.toolbox.HurlStack;
import com.android.volley.toolbox.Volley;

public class MySingleton {

private static MySingleton mInstance;
private RequestQueue mRequestQueue;
private Context mCtx;

public MySingleton(Context mCtx) {

this.mCtx = mCtx;
mRequestQueue = getmRequestQueue();
}

public RequestQueue getmRequestQueue(){

if(mRequestQueue == null){
Cache cache = new DiskBasedCache(mCtx.getCacheDir(),
1024*1024);
Network network = new BasicNetwork(new HurlStack());
mRequestQueue = new RequestQueue(cache,network);
mRequestQueue = Volley
.newRequestQueue(mCtx.getApplicationContext());
}
return mRequestQueue;
}

public static synchronized MySingleton getmInstance(Context context){

if (mInstance == null){
mInstance = new MySingleton(context);
}
return mInstance;
}

public<T> void addToRequestQueue(Request<T> request){

mRequestQueue.add(request);

}
}

● Sekarang buka layout activity_main.xml dan ubah kodenya menjadi seperti ini
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_centerVertical="true" >

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Login"
 75

android:textSize="30sp"
android:textStyle="bold"
android:layout_marginTop="10dp"
android:textColor="@color/colorPrimary" />

<com.rengwuxian.materialedittext.MaterialEditText
android:id="@+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="50dp"
app:met_floatingLabel="normal"
android:background="@android:color/white"
android:hint="Email Address"
android:inputType="textEmailAddress"/>
<com.rengwuxian.materialedittext.MaterialEditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
app:met_floatingLabel="normal"
android:layout_marginTop="10dp"
android:background="@android:color/white"
android:hint="Password"
android:inputType="textPassword"/>

<androidx.appcompat.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Keep Me Logged In"
android:buttonTint="@color/colorPrimaryDark"
android:textColor="@color/colorPrimaryDark"
android:layout_gravity="center"
android:id="@+id/checkbox"
android:layout_marginTop="10dp"/>

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:text="Login"
android:textColor="@android:color/white"
android:textAllCaps="false"
android:id="@+id/login"
android:background="@color/colorPrimaryDark"/>

</LinearLayout>

</RelativeLayout>

● Lalu buka class MainActivity.java dan sesuaikan kodenya menjadi seperti berikut
 76

MainActivity.java
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.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.Toast;

import com.android.volley.AuthFailureError;
import com.android.volley.DefaultRetryPolicy;
import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.rengwuxian.materialedittext.MaterialEditText;

import java.util.HashMap;
import java.util.Map;
import java.util.Objects;

public class MainActivity extends AppCompatActivity {

MaterialEditText email,password;
Button login;
CheckBox checkedStatus;

SharedPreferences sharedPreferences;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
email = findViewById(R.id.email);
password = findViewById(R.id.password);
checkedStatus = findViewById(R.id.checkbox);
sharedPreferences = getSharedPreferences("UserInfo",
Context.MODE_PRIVATE);
String loginStatus = sharedPreferences
.getString(getResources().getString(R.string.prefStatus),"");
if (loginStatus.equals("loggedin")){
startActivity(new Intent(MainActivity.
this,AppStartActivity.class));
finish();
}

login = findViewById(R.id.login);
login.setOnClickListener(v -> {
String tex_email = Objects
.requireNonNull(email.getText()).toString();
String tex_password = Objects
.requireNonNull(password.getText()).toString();
if (TextUtils.isEmpty(tex_email) || TextUtils.isEmpty(tex_password)){
Toast.makeText(MainActivity.this,
"All Fields Required", Toast.LENGTH_SHORT).show();
}
else{
login(tex_email,tex_password);
}
});
}

private void login(final String email, final String password){

final ProgressDialog progressDialog = new ProgressDialog(
MainActivity.this);
progressDialog.setTitle("Registering your account");
progressDialog.setCancelable(false);
progressDialog.setCanceledOnTouchOutside(false);
 77

progressDialog.setIndeterminate(false);
progressDialog.show();
String uRl = "http://192.168.0.7/login.php";
StringRequest request = new StringRequest(Request.Method.POST,
uRl,
(String response) -> {

if (response.equals("Login Success")){
Toast.makeText(MainActivity.this,
response, Toast.LENGTH_SHORT).show();
SharedPreferences.Editor editor = sharedPreferences.edit();
if (checkedStatus.isChecked()){
editor.putString(getResources()
.getString(R.string.prefStatus),"loggedin");
}
else{
editor.putString(getResources()
.getString(R.string.prefStatus),"loggedout");
}
editor.apply();
startActivity(new Intent(MainActivity
.this,AppStartActivity.class));
progressDialog.dismiss();
finish();
}
else {
Toast.makeText(MainActivity.this,
response, Toast.LENGTH_SHORT).show();
progressDialog.dismiss();
}
}, error -> {
Toast.makeText(MainActivity.this,
error.toString(), Toast.LENGTH_SHORT).show();
progressDialog.dismiss();
}){
@Override
protected Map<String, String> getParams() {
HashMap<String,String> param = new HashMap<>();
param.put("email",email);
param.put("psw",password);
return param;

}
};

request.setRetryPolicy(
new DefaultRetryPolicy(30000,
DefaultRetryPolicy.DEFAULT_MAX_RETRIES,
DefaultRetryPolicy.DEFAULT_BACKOFF_MULT));
MySingleton.getmInstance(MainActivity.this).
addToRequestQueue(request);
}
}

Pada bagian variabel String uRl, pastikan untuk mengubah alamat IP menjadi IP dari
komputer kita, jangan memakai http://localhost/.
Lalu jika kita menggunakan android, maka komputer dan perangkat android yang akan
digunakkan harus didalam 1 network yang sama, contoh :
IP Address Komputer:
1. Cek IP Address pada komputer melalui CMD, dan ketikkan “ipconfig”
2. Lalu lihat pada bagian Wireless LAN Adapter Wireless Network Connection, bagian
IPv4 Address.
 78

maka String uRl = "http://192.168.0.7/login.php"

3. Hubungkan juga perangkat android ke network yang sama agar bisa terhubung
databasenya.
Contoh IP Address android : " 192.168.0.XX "

● Terakhir, buat sebuah layour bernama bar_layout.xml dan isikan kodenya seperti ini
bar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimaryDark"
style="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/menustyle"
android:id="@+id/toolbar">

</androidx.appcompat.widget.Toolbar>
 79

● Setelah semua kode telah disesuaikan, jalankan projek aplikasi dan hasilnya
adalah sebagai berikut.

Latihan
Kembangkan aplikasi yang telah dibuat didalam aktivitas dengan menambahkan fitur register user
baru!

Penutup
Tugas
Kembangkan lagi aplikasi yang telah dibuat pada Aktivitas dan Latihan dengan menampilkan
sebuah dashboard setelah melakukan login pada aplikasi tersebut!