January 2020 ~ IKWAN - 161021450062

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

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.

IKWAN - 161021450062

Tampilan menu utama e-Faktur

fitur diskon Member

Fitur Report dengan Ms. Word

Fitur Report dengan Ms. Excel

Fitur Tanggal semi Otomatis

Tuesday, January 7, 2020

Membuat Aplikasi Toko Baju Online Sederhana Dari Blog menjadi Aplikasi Android

Blog Archive

Blogger templates

About Me

Labels

Blog Archive

Categories

Labels

Blogroll

About

IKWAN - 161021450062

Tampilan menu utama e-Faktur

fitur diskon Member

Fitur Report dengan Ms. Word

Fitur Report dengan Ms. Excel

Fitur Tanggal semi Otomatis

Tuesday, January 7, 2020

Membuat Aplikasi Toko Baju Online Sederhana Dari Blog menjadi Aplikasi Android

Social Profiles

Blog Archive

Blogger templates

About Me

Labels

Blog Archive

Categories

Labels

Blogroll

About