Assalamualaikum wr.wb
Salam sejahtera bagi kita semua, pada kesempatan kali ini saya akan menunjukan hasil project aplikasi android sederhana saya, yang saya beri nama " Aplikasi Online Shop Sederhana". Dalam rangka memenuhi nilai Ujian Akhir Semester mata kuliah Mobile Programming STMIK Eresha.
Baiklah, tanpa berlama-lama langsung ke prosedurnya.
1. Deskripsi Project
Project ini yaitu berupa aplikasi online shop pakaian berbasis android dengan menggunakan web view dan database SQLite sebagai penyimpanan data dari akun yang akan masuk ke aplikasi atau yang akan mendaft akun login. Dimana Form utama dari aplikasi ini yaitu web atau blog dari online shop pakaian milik saya dan team yaitu "STARTUP". Yang nantinya akan muncul apabila telah berhasil login.
2. Bukti Foto Lembar Jawaban mengikuti kegiatan Ujian Tatap Muka di Kampus
B. Pembasan dan Program Aplikasi
Disini saya menggunakan android studio sebagai software pembuatan aplikasi nya.
Saya anggap disini kita sudah buka android studionya dan sudah membuat project baru nya ya.
Dibawah ini langkah-langkah pembuatannya
1.Membuat activity_login.xml
 |
| screen shoot desain form login |
SOURCE CODE - activity_login.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:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg" android:gravity="center_horizontal" android:orientation="vertical" tools:context="com.ikwan.loginregister.LoginActivity">
<ImageView android:layout_width="wrap_content" android:layout_height="127dp" android:layout_marginTop="50dp" app:srcCompat="@drawable/logo" />
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:foreground="@android:color/transparent" android:gravity="center_horizontal" android:orientation="vertical">
<EditText android:id="@+id/edittext_username" android:layout_width="190dp" android:layout_height="40dp" android:layout_marginTop="10dp" android:background="#ffffff" android:drawableLeft="@drawable/username" android:hint="Nama Pengguna" android:paddingLeft="2dp" />
<EditText android:id="@+id/edittext_password" android:layout_width="190dp" android:layout_height="40dp" android:layout_marginTop="20dp" android:background="#ffffff" android:drawableLeft="@drawable/password" android:hint="Kata Sandi" android:inputType="textPassword" />
</LinearLayout>
<Button android:id="@+id/button_login" android:layout_width="190dp" android:layout_height="40dp" android:layout_marginTop="20dp" android:background="#04ea00" android:text="MASUK" android:textColor="#ffffff" />
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:orientation="horizontal">
<TextView android:layout_width="wrap_content" android:layout_height="35dp" android:background="@android:color/holo_orange_light" android:text="Belum Punya Akun ?" android:textColor="@color/colorPrimary" />
<TextView android:id="@+id/textview_register" android:layout_width="wrap_content" android:layout_height="35dp" android:background="@android:color/holo_green_light" android:paddingLeft="10dp" android:text="DAFTAR" android:textColor="@color/colorPrimary" android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
2.
activity_register.xml :
 |
| screen shoot desain form register / pendaftaran akun |
SOURCE CODE - activity_register.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" android:background="@drawable/bg" android:orientation="vertical" android:gravity="center_horizontal" tools:context="com.ikwan.loginregister.RegisterActivity">
<ImageView android:layout_width="wrap_content" android:layout_height="127dp" android:layout_marginTop="50dp" app:srcCompat="@drawable/logo"/>
<EditText android:id="@+id/edittext_username" android:layout_width="206dp" android:layout_height="40dp" android:layout_marginTop="10dp" android:background="#ffffff" android:drawableLeft="@drawable/username" android:hint="Nama Pengguna" android:paddingLeft="2dp" />
<EditText android:id="@+id/edittext_password" android:layout_width="206dp" android:layout_height="40dp" android:layout_marginTop="20dp" android:background="#ffffff" android:drawableLeft="@drawable/password" android:hint="Kata Sandi" android:inputType="textPassword" />
android:hint="@string/password"/>
<EditText android:id="@+id/edittext_cnf_password" android:layout_width="206dp" android:layout_height="40dp" android:layout_marginTop="20dp" android:background="#ffffff" android:drawableLeft="@drawable/password" android:hint="Konfirmasi Kata Sandi" android:inputType="textPassword" />
android:hint="@string/confirm_password"/>
<Button android:id="@+id/button_register" android:layout_width="206dp" android:layout_height="40dp" android:layout_marginTop="20dp" android:background="#04ea00" android:text="DAFTAR" android:textColor="#ffffff" />
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginTop="10dp">
<TextView android:layout_width="wrap_content" android:layout_height="35dp" android:background="@android:color/holo_orange_dark" android:text="Sudah Punya Akun ?" android:textColor="@color/colorPrimary" />
<TextView android:id="@+id/textview_login" android:layout_width="wrap_content" android:layout_height="35dp" android:background="@android:color/holo_green_light" android:paddingLeft="10dp" android:text="MASUK" android:textColor="@android:color/background_light" android:textSize="16sp" android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
3.
web_activity.xml :
 |
| screen shoot desain form utama dengan web view |
SOURCE CODE - web_activity.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".WebActivity">
<WebView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:id="@+id/webView"
/>
<ProgressBar style="?android:attr/progressBarStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="110dp" android:id="@+id/progressBar2" />
</RelativeLayout>
3.
progress_bar.xml :
 |
| screen shoot desain progres bar / tampilan sat menunggu web terbuka |
SOURCE CODE - progress_bar.xml :
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/relativeLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00060606">
<ProgressBar android:id="@+id/progressBar1" android:layout_width="60dp" android:layout_height="60dp" android:layout_centerInParent="true" android:indeterminateDrawable="@drawable/logo" />
</RelativeLayout>
Selanjutnya menambahkan permission internet seperti ini
<uses-permission android:name="android.permission.INTERNET"/> pada file manifest agar aplikasi bisa terhubung ke internet
3.
manifest.xml :
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.ikwan.loginregister">
<uses-permission android:name="android.permission.INTERNET"/>
<application android:usesCleartextTraffic="true" android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="UAS IKWAN 161021450062" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme">
<activity android:name=".WebActivity" />
<activity android:name=".RegisterActivity" />
<activity android:name=".LoginActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Setelah semua file xml telah dibuat, maka selanjutnya membuat file activity java nya.
1. LoginActivity.java :
 |
| screen shoot source code login.java |
SOURCE CODE LoginActivity.java
package com.ikwan.loginregister;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
public class LoginActivity extends AppCompatActivity {
EditText mTextUsername;
EditText mTextPassword;
Button mButtonLogin;
TextView mTextViewRegister;
DatabaseHelper db;
ViewGroup progressView;
protected boolean isProgressShowing = false;
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
db = new DatabaseHelper(this);
mTextUsername = (EditText)findViewById(R.id.edittext_username);
mTextPassword = (EditText)findViewById(R.id.edittext_password);
mButtonLogin = (Button)findViewById(R.id.button_login);
mTextViewRegister = (TextView)findViewById(R.id.textview_register);
mTextViewRegister.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View view) {
Intent registerIntent = new Intent(LoginActivity.this,RegisterActivity.class);
startActivity(registerIntent);
}
});
mButtonLogin.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View view) {
String user = mTextUsername.getText().toString().trim();
String pwd = mTextPassword.getText().toString().trim();
Boolean res = db.checkUser(user, pwd);
if(res == true)
{
Intent HomePage = new Intent(LoginActivity.this,MyEresha.class);
startActivity(HomePage);
}
else {
Toast.makeText(LoginActivity.this,"Login Error",Toast.LENGTH_SHORT).show();
}
}
});
}
public void showProgressingView() {
if (!isProgressShowing) {
View view=findViewById(R.id.progressBar1);
view.bringToFront();
}
}
public void hideProgressingView() {
View v = this.findViewById(android.R.id.content).getRootView();
ViewGroup viewGroup = (ViewGroup) v;
viewGroup.removeView(progressView);
isProgressShowing = false;
}
}
2. RegisterActivity.java
 |
| screen shoot source code register.java |
SOURCE CODE - RegisterActivity.java
package com.ikwan.loginregister;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
public class RegisterActivity extends AppCompatActivity {
DatabaseHelper db;
EditText mTextUsername;
EditText mTextPassword;
EditText mTextCnfPassword;
Button mButtonRegister;
TextView mTextViewLogin;
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_register);
db = new DatabaseHelper(this);
mTextUsername = (EditText)findViewById(R.id.edittext_username);
mTextPassword = (EditText)findViewById(R.id.edittext_password);
mTextCnfPassword = (EditText)findViewById(R.id.edittext_cnf_password);
mButtonRegister = (Button)findViewById(R.id.button_register);
mTextViewLogin = (TextView)findViewById(R.id.textview_login);
mTextViewLogin.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View view) {
Intent LoginIntent = new Intent(RegisterActivity.this,LoginActivity.class);
startActivity(LoginIntent);
}
});
mButtonRegister.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View view) {
String user = mTextUsername.getText().toString().trim();
String pwd = mTextPassword.getText().toString().trim();
String cnf_pwd = mTextCnfPassword.getText().toString().trim();
if(pwd.equals(cnf_pwd)){
long val = db.addUser(user,pwd);
if(val > 0){
Toast.makeText(RegisterActivity.this,"You have registered",Toast.LENGTH_SHORT).show();
Intent moveToLogin = new Intent(RegisterActivity.this,LoginActivity.class);
startActivity(moveToLogin);
}
else{
Toast.makeText(RegisterActivity.this,"Registeration Error",Toast.LENGTH_SHORT).show();
}
}
else{
Toast.makeText(RegisterActivity.this,"Password is not matching",Toast.LENGTH_SHORT).show();
}
}
});
}
}
Kemudian kita buat DatabaseHelper sebagai penghubung sekaligus membuat database yang akan di pakai oleh aplikasi ini.
3. DatabaseHelper.java :
package com.ikwan.loginregister;
import android.content.ContentValues;
import android.content.Context;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;
public class DatabaseHelper extends SQLiteOpenHelper{
public static final String DATABASE_NAME ="register.db";
public static final String TABLE_NAME ="registeruser";
public static final String COL_1 ="ID";
public static final String COL_2 ="username";
public static final String COL_3 ="password";
public DatabaseHelper(Context context) {
super(context, DATABASE_NAME, null, 1);
}
@Override public void onCreate(SQLiteDatabase sqLiteDatabase) {
sqLiteDatabase.execSQL("CREATE TABLE registeruser (ID INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT, password TEXT)");
}
@Override public void onUpgrade(SQLiteDatabase sqLiteDatabase, int i, int i1) {
sqLiteDatabase.execSQL(" DROP TABLE IF EXISTS " + TABLE_NAME);
onCreate(sqLiteDatabase);
}
public long addUser(String user, String password){
SQLiteDatabase db = this.getWritableDatabase();
ContentValues contentValues = new ContentValues();
contentValues.put("username",user);
contentValues.put("password",password);
long res = db.insert("registeruser",null,contentValues);
db.close();
return res;
}
public boolean checkUser(String username, String password){
String[] columns = { COL_1 };
SQLiteDatabase db = getReadableDatabase();
String selection = COL_2 + "=?" + " and " + COL_3 + "=?";
String[] selectionArgs = { username, password };
Cursor cursor = db.query(TABLE_NAME,columns,selection,selectionArgs,null,null,null);
int count = cursor.getCount();
cursor.close();
db.close();
if(count>0)
return true;
else return false;
}
}
Selanjutnya buat activity baru dengan nama WebActivity, dimana activity ini akan ditambahkan menu web view yang nantinya akan menampilkan halaman web dari toko baju "STARTUP"..
4. WebActivity.java :
 |
| screen shoot source code web.java |
SOURCE CODE - WebActivity.java
package com.ikwan.loginregister;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
import androidx.appcompat.app.AppCompatActivity;
public class WebActivity extends AppCompatActivity {
WebView webView;
ProgressBar bar;
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.web_activity);
webView = (WebView) findViewById(R.id.webView);
bar=(ProgressBar) findViewById(R.id.progressBar2);
webView.setWebViewClient(new myWebclient());
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://startup-store.blogspot.com/");
}
public class myWebclient extends WebViewClient{
@Override public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
bar.setVisibility(View.GONE);
}
@Override public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
@Override public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return super.shouldOverrideUrlLoading(view, url);
}
}
@Override public boolean onKeyDown(int keyCode, KeyEvent event) {
if((keyCode==KeyEvent.KEYCODE_BACK) && webView.canGoBack()){
webView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
}
Setelah semua selesai maka coba Run aplikasi nya, jika tidak terdapat error maka tampilannya akan seperti hasil screen shoot dibawah ini, dengan langsung diinstall ke HP android :
 |
| TAMPILAN FORM LOGIN |
 |
| TAMPILAN FORM REGISTER |
 |
| LOGIN DENGAN AKUN BELUM TERDAFTAR |
 |
| FORM REGISTER JIKA MEMASUKAN KONFIRMASI KATA SANDI YANG TIDAK SAMA |
 |
JIKA BERHASIL MENDAFTAR
|
 |
SETELAH BERHASIL LOGIN DAN MENGGU TAMPILAN WEB
|
 |
| TAMPILAN WEB UTAMA TOKO BAJU "STARTUP" |
Agar lebih jelas melihat penggunaan aplikasi ini silahkan tonton video berikut ini :
Untuk icon-icon di desain aplikasinya bisa disesuaikan dengan keinginan dan kebutahan masing-masing.
Sekian rangkaian pembuatan Aplikasi Toko Baju Online ini telah selesai. Kurang dan salahnya mohon dimaafkan. Terimakasih telah mampir di blog sederhana ini.
Wassalamuaikum wr.wb
Sampai jumpa di project-projetc berikutnya.
