Cara Mengamankan Aplikasi Android dengan Proguard di Android Studio

Keamanan suatu aplikasi merupakan sebuah kebutuhan utama yang harus dipenuhi sebelum dapat dirilis ke public. Aplikasi dengan keamanan yang rendah akan mengundang banyak masalah dikemudian hari.

Salah satu kelemahan aplikasi android yang dibangun menggunakan Android Studio adalah proses decompile atau bahasa kasarnya membongkar apk yang sudah jadi sangat mudah. Bahkan orang awam dalam pemrograman sekalipun dapat melakukannya dikarenakan adanya tools yang menyediakan fitur decompile ini. Salah satu tools yang biasa digunakan adalah jadx (Harap tidak menggunakannya untuk merugikan orang lain).

Membuat aplikasi bebas dari proses decompile tidak bisa dihindari akan tetapi kita bisa melindungi kode hasil decompile agar tidak mudah dibaca oleh orang lain. Meskipun orang lain bisa membongkar aplikasi tersebut, mereka tidak akan mudah untuk melakukan modifikasi ataupun menemukan apa yang mereka cari. Alih alih menemukan apa yang dicari mereka akan merasa pusing dan membatalkan niatnya.

Tetapi hal ini tidak 100% berhasil untuk beberapa orang. Buktinya aplikasi besar seperti WhatsApp saja, memiliki banyak hasil modifikasi.

Setelah mengetahui hal diatas mari kita menggunakan Proguard di Android Studio agar aplikasi kita terhindar dari penyalahgunaan.

Cara Menggunakan Proguard di Android Studio

Cara menggunakan proguard sangatlah mudah anda hanya perlu membuka file "build.gradle (Module: app)" kemudian menambahkan kode dibawah ini.

 ...
 buildTypes {
        
        release {
            minifyEnabled true
            shrinkResources true
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }

Program akan membaca Proguard jika aplikasi di release. Selain membuat project nantinya sulit dibaca kode diatas juga membuat program aplikasi menjadi lebih singkat (menyusut) dan ukuran file APK menjadi lebih rendah. Dalam kasus saya sebelum ditambahkan kode diatas ukuran file 6,23 Mb setelah ditambahkan menyusut menjadi 2,45 Mb.

https://codingrakitan.blogspot.com/search?updated-max=2020-07-15T17:40:00-07:00&max-results=7

Read More

Cara Membuat Login dengan Akun Google di Android Studio - Coding Rakitan

Sebuah aplikasi yang menerapkan sistem level user tentunya membutuhkan aksi login agar user dapat mengakses akun mereka. Untuk mempermudah user dalam melakukan login kita bisa menerapkan login Authentication menggunakan email google yang sudah terdaftar di Android pengguna. Nantinya user ketika menekan tombol login akan di arahkan langsung untuk memilih akun email yang terdaftar.

Kelebihan dari sistem login ini, user tidak perlu khawatir akan pencurian akun oleh pemilik aplikasi sebab informasi yang bisa di ambil hanya seperti email, id akun, foto, nama, serta nomor hp.

Langkah awal untuk membuat login authentication dengan akun google adalah dengan membuat credential baru di API Console caranya seperti berikut.
1. Buka halaman https://console.developers.google.com/apis/credentials (Login dengan akun google anda).
2. Masuk ke menu Kredential dan klik tombol + Buat Kredensial -> Client ID OAuth.
3. Pilih jenis aplikasi (Android), kemudian masukkan nama aplikasi, kode SHA-1 (untuk mendapatkan kode silahkan baca disini) sesuaikan dengan kebutuhan anda misalnya jika anda hanya memerlukannya pada mode debug maka ambil SHA-1 debug bila ingin dirilis ambil SHA-1 release, dan terakhir nama package anda contoh disini "com.example.login_google" lalu klik buat.
4. Jika muncul dialog yang Klien OAuth dibuat, maka Kredensial anda berhasil dibuat.

Setelah membuat kredensial lanjut ke project Android Studio dengan menambahkan dependencies dibawah ini kedalam project android studio kemudian klik Sync Now.

dependencies {
    ...
    implementation 'com.google.android.gms:play-services-auth:17.0.0'
}

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.example.login_google"><uses-permission android:name="android.permission.INTERNET"/>    <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:roundIcon="@mipmap/ic_launcher_round"        android:supportsRtl="true"        android:theme="@style/AppTheme">        <activity android:name=".Home"></activity>        <activity android:name=".MainActivity">            <intent-filter>                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application>
</manifest>

Kemudian buat sebuah tampilan sederhana di layout activity_main.xml yang berisi tombol widget "". Silahkan ikuti tampilan di bawah.

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"    android:gravity="center"    tools:context=".MainActivity" >
    <com.google.android.gms.common.SignInButton        android:id="@+id/sign_in_button"        android:layout_width="200dp"        android:layout_height="wrap_content"/></RelativeLayout>

Untuk memberikan instruksi pada program silahkan edit file MainActivity.java seperti kode di bawah

MainActivity.java

package com.example.login_google;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;import android.os.Bundle;import android.util.Log;import android.view.View;import android.widget.Toast;
import com.google.android.gms.auth.api.signin.GoogleSignIn;import com.google.android.gms.auth.api.signin.GoogleSignInAccount;import com.google.android.gms.auth.api.signin.GoogleSignInClient;import com.google.android.gms.auth.api.signin.GoogleSignInOptions;import com.google.android.gms.common.SignInButton;import com.google.android.gms.common.api.ApiException;import com.google.android.gms.tasks.Task;
import java.util.Map;
public class MainActivity extends AppCompatActivity {

    private SignInButton login;    private GoogleSignInClient mGoogleSignInClient;    private int RC_SIGN_IN;    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        login = findViewById(R.id.sign_in_button);        GoogleSignInOptions gso = new GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
                .requestEmail()
                .build();        mGoogleSignInClient = GoogleSignIn.getClient(this, gso);        login.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                LoginGoogle();            }
        });    }

    private void LoginGoogle() {
        Intent signInIntent = mGoogleSignInClient.getSignInIntent();        startActivityForResult(signInIntent, RC_SIGN_IN);    }
    @Override    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);        if (requestCode == RC_SIGN_IN) {
            Task<GoogleSignInAccount> task = GoogleSignIn.getSignedInAccountFromIntent(data);            handleSignInResult(task);        }
    }
    private void handleSignInResult(Task<GoogleSignInAccount> completedTask) {
        try {
            final GoogleSignInAccount account = completedTask.getResult(ApiException.class);            if (!account.getId().equals("")&&!account.getId().equals(null)){
                Intent i = new Intent(MainActivity.this, Home.class);                startActivity(i);                finish();            }else{
                Toast.makeText(this, "Login Gagal", Toast.LENGTH_SHORT).show();            }
        } catch (ApiException e) {
            Log.d("error", ""+e);            Toast.makeText(this, "Login Gagal", Toast.LENGTH_SHORT).show();        }
    }

}

Pada saat aplikasi berhasil melakukan login program kita instruksikan untuk membuka activity baru dengan nama Home.java. Untuk itu silahkan buat activity baru dengan nama home dengan cara klik kanan pada root package -> New -> Activity -> Empty Activity hingga muncul kotak dialog baru seperti dibawah.

Isi activity name dengan nama Home, centang Generate Layout file (agar activity membuat layout otomatis). Layout name biasanya akan mengikuti nama activity name, silahkan rubah sesuai keinginan anda lalu tekan finish.

Edit file Home.java dan layout activity_home.xml seperti kode di bawah :

Home.java

 package com.example.login_google;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class Home extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
    }
}

activity_home.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"android:gravity="center"tools:context=".Home">
<TextView    android:id="@+id/textView"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="Login berhasil" /></RelativeLayout>

Langkah terakhir adalah pengetesan. Run aplikasi dengan emulator atau debug langsung ke Hp Android. Klik tombol login, jika berhasil maka tampilannya akan tampak seperti pada gambar.

https://codingrakitan.blogspot.com/search?updated-max=2020-07-15T17:40:00-07:00&max-results=7

Read More

Cara Membuat Date Picker di Android Studio - Coding Rakitan

Ada kalanya ketika membuat sebuah form diperlukan adanya pemilihan tanggal. Jika pada website kita mengenal tag "<input type='date' name='date' />" untuk menampilkan pemilihan tanggal maka beda halnya di Android. Kita bisa menggunakan kelas Date Picker yang telah disediakan.

Berikut Cara Membuat Date Picker di Android Studio.

1. Buat project baru dengan format seperti berikut

• Activity : Empty Activity
• Name : CobaDatePicker
• Package Name : com.codingrakitan.cobadatepicker
• Language : Java
• Minimum API Level : API 17 (Android 4.2 Jelly Bean)

2. Buat Kelas baru dengan nama DatePickerFragment.java lalu isi dengan kode seperti berikut :

 
package com.codingrakitan.cobadatepicker;
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.os.Bundle;
import android.widget.DatePicker;

import androidx.fragment.app.DialogFragment;

import java.util.Calendar;

public class DatePickerFragment extends DialogFragment {
    private onDateClickListener onDateClickListener;
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState){
        final Calendar calendar = Calendar.getInstance();
        int tahun = calendar.get(Calendar.YEAR);
        int bulan = calendar.get(Calendar.MONTH);
        int hari = calendar.get(Calendar.DAY_OF_MONTH);
        return new DatePickerDialog(getActivity(), new DatePickerDialog.OnDateSetListener() {
            @Override
            public void onDateSet(DatePicker datePicker, int i, int i1, int i2) {
                onDateClickListener.onDateSet(datePicker, i, i1, i2);
            }
        }, tahun, bulan, hari);
    }
    public void setOnDateClickListener(onDateClickListener onDateClickListener){
        if (onDateClickListener != null){
            this.onDateClickListener= onDateClickListener;
        }
    }
    public interface onDateClickListener{
        void onDateSet(DatePicker datePicker, int i, int i1, int i2);
    }

}

 

3. Edit MainActivity.java seperti kode di bawah :

 
package com.codingrakitan.cobadatepicker;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private Button button;
    private TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button = findViewById(R.id.button);
        textView = findViewById(R.id.textView);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                TampilTanggal();
            }
        });
    }
    public void TampilTanggal(){
        DatePickerFragment datePickerFragment = new DatePickerFragment();
        datePickerFragment.show(getSupportFragmentManager(), "data");
        datePickerFragment.setOnDateClickListener(new DatePickerFragment.onDateClickListener() {
            @Override
            public void onDateSet(DatePicker datePicker, int i, int i1, int i2) {
                String tahun = ""+datePicker.getYear();
                String bulan = ""+(datePicker.getMonth()+1);
                String hari = ""+datePicker.getDayOfMonth();
                String text = "Tanggal yang dipilih : "+hari+" - "+bulan+" - "+tahun;
                textView.setText(text);
            }
        });
    }
}

 

4. Edit layout activity_main.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:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Klik untuk menampilkan tanggal" />
</LinearLayout>
 

5. Jalankan menggunakan emulator atau device anda.

Keterangan : Ketika tombol di klik akan muncul tampilan Date Picker di layar, tampilan date picker ini berbeda-beda sesuai versi android anda. Pada tampilan di atas menggunakan android versi 9.

https://codingrakitan.blogspot.com/search?updated-max=2020-07-15T17:40:00-07:00&max-results=7

Read More

Cara Membuat Konfigurasi Ion Auth di Codeigniter 3 - Coding Rakitan

Hai sobat Coding Rakitan, kali ini kita akan membahas tentang Ion Auth yaitu sebuah library authentication (otentikasi) yang berfungsi untuk memudahkan programer dalam melakukan otentikasi terhadap user yang melakukan login. Otentikasi dimaksudkan untuk membatasi akses user, sehingga pada bagian tertentu dalam web hanya dapat diakses oleh orang tertentu.

Secara simplenya otentikasi diperlukan saat user melakukan aksi login, untuk mengetahui apakah akun yang dimasukkan terdaftar di database atau tidak. Otentikasi juga diperlukan untuk menghindari adanya SQL injection.

Berikut langkah-langkah Cara Membuat Konfigurasi Ion Auth di Codeigniter 3.

1. Download library Ion Auth DISINI.

2. Extract file yang telah di download. Ada beberapa folder yang perlu di perhatikan seperti config, controllers, libraries, models, dan Views. Silahkan pindahkan isi dalam masing-masing folder kedalam folder CI seperti:

• config/ion_auth.php pindahkan ke folder_codeigniter/aplication/config.
• controllers/Auth.php pindahkan ke folder_codeigniter/aplication/controllers.
• controllers/Auth.php pindahkan ke folder_codeigniter/aplication/controllers.
• libraries/ion_auth.php pindahkan ke folder_codeigniter/aplication/libraries.
• models/Ion_auth_model.php pindahkan ke folder_codeigniter/aplication/models.
• views/auth pindahkan ke folder_codeigniter/aplication/views.
• Pindahkan semua folder dalam language pindahkan ke folder_codeigniter/aplication/language.

3. Edit file autoload.php pada folder aplication/config/autoload.php di root codeigniter anda. Ubah kode $autoload['libraries'] = array(); menjadi $autoload['libraries'] = array('database', 'session', 'ion_auth'); kemudian save.



4. Langkah selanjutnya buat sebuah database dengan nama "coba" dan impor database yang ada di dalam folder library tadi sql/ion_auth.sql. Jika sukses akan muncul beberapa tabel database baru seperti berikut.

5. Jangan lupa mengatur database codeigniter pada folder aplication/config/database.php seperti berikut.

6. Jika konfigurasi sudah selesai silahkan buka localhost/nama_web/auth/ di browser anda maka otomatis di arahkan ke localhost/nama_web/auth/login. Tampilan nantinya akan tampak seperti berikut.

Untuk login masukkan akun default email : admin@admin.com dan password : password. Halaman setelah login akan tampak seperti berikut.

Ketikkan localhost/nama_web/auth/logout untuk melakukan logout.

https://codingrakitan.blogspot.com/search?updated-max=2020-07-15T17:40:00-07:00&max-results=7

Read More

Cara Penginstalan dan Konfigurasi MongoDB - Coding Rakitan

MongoDB merupakan salah satu jenis database NoSQL yang menyimpan datanya dalam bentuk json. MongoDB hadir dengan menyediakan skema database yang tidak kaku, artinya pengguna dapat dengan mudah menambahkan field dan isinya tanpa mendeklarasikan field terlebih dahulu.

Contohnya dalam MySQL untuk dapat menyimpan data terlebih dahulu harus membuat Tabel, kemudian mendeklarasikan isi field dalam tabel tersebut seperti nama field, panjang karakter, jenis karakter, sedangkan pada MongoDB hanya tinggal membuat nama databse lalu membuat tabel atau dalam hal ini disebut Collection. Setelah membuat Collection anda tinggal mengisinya dengan data yang di inginkan.

Karena bentuk penyimpanannya berupa JSON anda bebas menentukan nama dan isi data yang satu dengan yang lainnya. Contoh data yang akan disimpan dalam collection "user" seperti berikut.

 
[{
"nama" : "User 1",
"id" : 2,
"kota" : "Makassar"

},
{
 "nama": "User 2",
 "id": 3,
 "foto": null,
 "alamat":[{
  "kecamata": null,
  "kabupaten": null,
  "kota" : null
 }]
}
]

 

Pada contoh di atas bisa dilihat, meskipun berada dalam collection yang sama, akan tetapi field user1 dan user2 sedikit berbeda. Inilah yang menjadi salah satu keuntungan menggunakan MongoDB, yaitu bebas mendeklarasikan data tanpa harus mengikuti data yang sudah ada.

Untuk menggunakan MongoDB terlebih dahulu download aplikasi MongoDB di https://www.mongodb.com/. Klik tombol "Try Free" pada pojok kanan atas halaman web. Setelah itu akan muncul halaman baru silahkan klik "server seperti gambar di bawah" lalu pilih versio, OS, Package, sesuai kebutuhan anda, dan terakhir klik download.

Instal MongoDB

Setelah file berhasil di download silahkan klik dua kali pada file MongoDB tadi, trus lakukan penginstalan seperti pada umumnya.

Konfigurasi Path Database

Agar dapat menyimpan data, lakukan konfigurasi tempat penyimpanan database terlebih dahulu. Caranya, buat folder baru di "C:\data\db" atau silahkan buat sesuai keinginan anda.

Masuk ke folder bin MongoDB anda "C:\Program File\MongoDB\Server\4.0\bin" (Sesuaikan dengan folder MongoDB anda) kemudian pada address path silahkan ketikkan cmd sehingga nantinya cmd akan terbuka dengan direktori seperti gambar di bawah.

Selanjutnya pada layar cmd ketikkan perintah mongod.exe --dbpath "C:\data\db" lalu tekan enter dan tunggu hingga proses selesai. Folder "C:\data\db" adalah folder yang sudah dibuat sebelumnya. Setelah proses selesai, masih dalam tampilan cmd silahkan ketikkan perintah "mongo.exe". Jika muncul tampilan seperti gambar di bawah, tandanya MongoDB siap digunakan.

https://codingrakitan.blogspot.com/search?updated-max=2020-07-15T17:40:00-07:00&max-results=7

Read More

Cara Membuat Slide Page Menggunakan Tab Layout dan View Pager di Android Studio - Coding Rakitan

Pada tutorial kali ini kita akan membuat Slide Page yang dibuat menggunakan kombinasi antara tab layout dengan view pager. Slide Page ini sudah biasa kita lihat pada aplikasi-aplikasi terkenal seperti WhatsApp, Youtube, google adsense, dan masih banyak lagi.

Untuk membuat Slide Page kita bisa memanfaatkan widget yang disediakan Android Studio yaitu Tab Layout dan View Pager. Tampilan yang nantinya kita buat akan tampak seperti berikut :

Sebelum memulai ada baiknya anda mengetahui struktur class, layout, drawable yang akan kita buat nantinya. Terdapat 4 class yang akan dibuat, satu class utama atau activity dan tiga class fragment yang nantinya akan dipanggil kedalam activity. Layout yang dibutuhkan ada 4 yaitu layout utama (activity_main) dan tiga layout fragment. Didalam drawable kita juga menambahkan ikon back untuk yang akan dipasang pada toolbar aplikasi nantinya, untuk menambahkan icon ini anda bisa menggunakan Vector Asset yang disediakan Android Studio.

Lanjut ke tahap pembuatan project baru :

Sebelum memulai menambahkan dan mengedit file, edit terlebih dahulu dependencies pada file build.grandle (Module.app) dan tambahkan kode dibawah.

 
dependencies {
        ...
        implementation 'com.android.support:design:28.0.0'
        implementation 'com.android.support:support-v4:28.0.0'
 ...
}
 

Hal ini dimaksudkan untuk mengimport/mendownload library dari android studio sehingga widget Tab Layout dan View Pager dapat digunakan.

Buat FragmentSatu.java

 
public class FragmentSatu extends Fragment {
    public FragmentSatu(){

    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.fragment_satu, container, false);

        return view;
    }
}
 

Buat FragmentDua.java

 
public class FragmentDua extends Fragment {
    public FragmentDua(){

    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.fragment_dua, container, false);

        return view;
    }

}
 

Buat FragmentTiga.java

 
public class FragmentTiga extends Fragment {
    public FragmentTiga(){

    }
    @Override
    public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.fragment_tiga, container, false);
        return view;
    }
}
 

Buat Layout fragment_satu.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"
    android:background="@color/satu">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Ini dalah tampilan"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="FRAGMENT SATU"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold" />
    </LinearLayout>

</RelativeLayout>
 

Buat Layout fragment_dua.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"
    android:background="@color/dua">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Ini dalah tampilan"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="FRAGMENT DUA"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold" />
    </LinearLayout>

</RelativeLayout>
 

Buat Layout fragment_tiga.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="@color/tiga"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ini dalah tampilan"
        android:textColor="@color/white" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FRAGMENT TIGA"
        android:textColor="@color/white"
        android:textSize="18sp"
        android:textStyle="bold" />
</LinearLayout>
 

Edit activity_main.xml

 
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/biru">

            <android.support.v7.widget.Toolbar
                android:id="@+id/tol"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:theme="@style/ToolbarStyle"
                app:layout_scrollFlags="scroll|enterAlways"
                app:titleTextAppearance="@style/ToolbarStyle"></android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways"
                app:tabIndicatorColor="@android:color/white"
                app:tabMode="fixed"
                app:tabSelectedTextColor="@android:color/white"
                app:tabTextColor="@color/grey">

                <android.support.design.widget.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab1" />

                <android.support.design.widget.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab2" />

                <android.support.design.widget.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab3" />
            </android.support.design.widget.TabLayout>
        </android.support.design.widget.AppBarLayout>

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

            <android.support.v4.view.ViewPager
                android:id="@+id/view_pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>
 

Edit MainActivity.java

 
public class MainActivity extends AppCompatActivity {

    private TabLayout tab;
    private ViewPager viewPager;
    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tab = findViewById(R.id.tab);
        viewPager = findViewById(R.id.view_pager);
        toolbar = findViewById(R.id.tol);

        setSupportActionBar(toolbar);
        toolbar.setTitle(R.string.app_name);
        toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_back));


        tab.setupWithViewPager(viewPager);
        SetupViewPager();
        tab.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

    private void SetupViewPager() {
        MyViewPagerAdapter adapter = new MyViewPagerAdapter(getSupportFragmentManager());
        adapter.AddFragment(new FragmentSatu(), "Tab1");
        adapter.AddFragment(new FragmentDua(), "Tab2");
        adapter.AddFragment(new FragmentTiga(), "Tab3");
        viewPager.setAdapter(adapter);
    }

    private class MyViewPagerAdapter extends FragmentPagerAdapter {
        private List<Fragment> fr = new ArrayList<>();
        private List<String> title = new ArrayList<>();
        public MyViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        public void AddFragment(Fragment fragment, String jd) {
            fr.add(fragment);
            this.title.add(jd);
        }

        @Override
        public Fragment getItem(int position){
            return fr.get(position);
        }

        @Override
        public CharSequence getPageTitle(int position){
            return title.get(position);
        }

        @Override
        public int getCount() {
            return 3;
        }
    }
}

 

Edit colors.xml

 
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="biru">#0056FF</color>
    <color name="grey">#DDDDDD</color>
    <color name="white">#FFFFFF</color>
    <color name="satu">#810000</color>
    <color name="dua">#E6AA00</color>
    <color name="tiga">#003091</color>
</resources>


 

Edit style.xml

 
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" 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>
        <item name="windowActionBar">false</item>

    </style>
    <style name="ToolbarStyle" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="titleTextColor">@color/white</item>
        <item name="android:tint">@color/white</item>
        <item name="android:textSize">18sp</item>

    </style>

</resources>

 

Run Aplikasi

https://codingrakitan.blogspot.com/search?updated-max=2020-07-15T17:40:00-07:00&max-results=7

Read More

Pengenalan Route dan View Laravel Plus Membuat Tampilan Website Pertama Dengan Laravel - Coding Rakitan

 (Source : Dokumentasi Pribadi)

Hallo sobat CODING RAKITAN, bagaimana kabarnya? Semoga semuanya sehat ya :). Pada artikel kali ini, saya akan membagikan tentang Route dan View pada Laravel dengan membuat halaman website sederhana. Tujuan akhirnya adalah agar teman-teman tahu konsep Route dan view pada Laravel.

Bagi teman-teman yang belum menginstal Laravel-nya, silahkan diinstal dulu artikel saya sebelumnya. (Baca : Cara Install Laravel Terbaru Via Composer).

Okey, saya akan bahas dulu satu persatu apa itu Route dan View.

Route

Route kalau diterjemahkan jadi rute atau jalan. Rute atau jalan itu merupakan alur yang bisa kita lalui untuk menuju ke tempat tujuan kita. Jadi kita harus melewati jalan tertentu untuk sampai pada tujuan tertentu. Hehehe. Ah, gitulah! :) Intinya Route ini digunakan untuk memaping atau memetakan atau membuat peta url yang bisa kita gunakan untuk mengakses website Laravel kita.

View

View dalam laravel artinya tampilan, yaitu tempat dimana kita menyimpan semua file tampilan website laravel kita. Disinilah file HTML, CSS bahkan JAVASCRIPT disimpan. intinya semua yang berkaitan dengan user interface ada semua dalam folder view ini. Dalam laravel, kalau kita membuat sebuah file view, kita harus menambahkan namaFile.blade.php. Inilah yang disebut dengan blade template. Blade template ini merupakan template engine bawaan laravel yang mempermudah kita dalam membuat website dengan laravel, karena code atau syntax-nya yang sangat singkat tapi sangat powerfull.

Membuat Route

Route pada laravel terletak didalam folder routes/web.php. Pada saat teman-teman membuka file web.php, kalian akan mendapati code seperti ini.
Code ini memanggil sebuah view dengan nama welcome. Kalau teman-teman pertama kali menjalankan file laravel maka teman-teman akan mendapati tampilan seperti dibawah ini.

 (Source : Dokumentasi Pribadi)

Tampilan ini berasal dari view dengan nama welcome ini. Ayo kita buktikan. Kita buka folder resources/views/welcome.blade.php. Lihat code-nya guys. Code itulah yang ditampilkan oleh laravel saat pertama kali kita membuka file laravel setelah berhasil menginstall laravel. Untuk membuktikan, mari kita ubah tulisannya. OK :).

Kita ubah tulisan Laravel dengan tulisan CODING RAKITAN dalam class content :

File welcome.blade.php sebelum diubah (Source : Dokumentasi Pribadi)

File welcome.blade.php sesudah diubah (Source : Dokumentasi Pribadi)

Setelah diubah, maka tampilan website kita akan seperti dibawah ini :

 (Source : Dokumentasi Pribadi)

Nah, sudah berubahkan,jadi betul file welome itulah yang dipanggil pertama kali saat kita membuka website laravel kita (Secara Default).

Namun muncul pertanyaan, bagaimana nih guys aku ingin ubah tampilannya dengan tampilan yang saya buat sendiri, bukan seperti itu. Nah, itulah tujuan belajar kita kali ini yaitu bagaimana memanipulasi website tersebut menjadi seperti yang kita inginkan.

Untuk mengubahnya, teman-teman buka folder routes/web.php terus kita ubah route-nya. Misalnya teman-teman ingin membuat route-nya menjadi nama teman-teman sendiri. Monggo Silahkan, ayo!

Silahkan tambahkan code seperti dibawah ini.

Penjelasan :

---

/elfrid merupakan nama route yang akan kita panggil dalam url kita agar menampilkan tulisan Hello Elfrid, Welcome To Laravel. Sedangkan return (Kalau tulisannya cuma return itu berarti return true) digunakan untuk memberikan perintah untuk menjalankan atau biasa disebut mengembalikan nilai dari sebuah fungsi yang telah kita buat. Jadi dalam hal ini function tersebut mengembalikan nilai berupa string dengan tulisan Hello Elfrid, Welcome To Laravel.

Untuk melihat hasilnya, mari kita jalankan laravel kita dengan perintah php artisan serve maka akan kita akan mendapatkan sebuah url yang bisa kita gunakan untuk mengakses website kita yaitu http://127.0.0.1:8000. Untuk memanggil route yang telah kita buat tadi, tinggal tambahkan http://127.0.0.1:8000/elfrid



Warning :

---

Nama url sesuaikan dengan yang teman-teman buat). Kalau sudah benar, maka akan tampil seperti dibawah ini.

 (Source : Dokumentasi Pribadi)

Untuk memanggil tampilan dari resources/views, kita buatkan dulu sebuah file difolder resources/views dengan nama home misalnya. Teman-teman bebas mau gunakan nama file apa. Jadi filenya menjadi home.blade.php

Kemudian tambahkan code seperti dibawah ini (Saya menambahkan Code bootstrap untuk mempercantik tampilan website kita).


Kemudian kita buat route baru di folder routes/web dengan nama home. Seperti code dibawah ini.

 (Source : Dokumentasi Pribadi)

Kemudian buka url http://127.0.0.1:8000/home maka akan tampil seperti dibawah ini.

 (Source : Dokumentasi Pribadi)

Terus bagaimana caranya kalau kita mau supaya tampilan awal website kita bukan views/welcome tapi views/home. Caranya cukup sederhana kita tinggal hapus route yang memanggil view welcome dan dan kita ubah route home seperti dibawah ini.

 (Source : Dokumentasi Pribadi)

Jadi setiap kali kita buka website kita yang pertama muncul adalah views/home. Untuk membuktikannya, silahkan buka http://127.0.0.1:8000 maka tampilan home yang telah kita buat langung otomatis terpanggil.

Saya rasa untuk postingan kali ini sampai disini saja ya teman-teman, semoga apa yang saya bagikan bermanfaat. Kalau masih bingung silahkan tanyakan langsung dikolom komentar.

Terima Kasih,
Salam dari admin CODING RAKITAN,
Keep learning - Keep Sharing

https://codingrakitan.blogspot.com/search?updated-max=2020-07-15T17:40:00-07:00&max-results=7

Read More