Monday, July 16, 2018

[Tutorial Java] Struktur Dasar, Variabel, Tipe Data dan Operator - Part 1

on No comments:

Wednesday, July 11, 2018

Part 02 Insert, Update, Delete (Manipulasi Data MySQL+VB Net)


on No comments:

Part 01 Koneksi VB Net dan MySQL


on No comments:

Tuesday, July 3, 2018

APLIKASI KATALOG PRODUK MENGGUNAKAN ANDROID STUDIO


Pada  kesempatan kali ini kita akan mencoba menampilkan katalog produk dalam bentuk grid. Dan untungnya untuk urusan ini android sudah menyediakan komponen user interfacenya yaitu GridView.

Pada project kali ini kita akan mencoba membantu penjual buah langganan kita untuk dibuatkan katalog buahnya.
  1. Buka Android Studio kemudian buat Project dengan nama Katalog
  2. Klik Next sampai pada pilihan Activity pilih Empty Activity
  3. Klik Next terus sampai finish. Tunggu sebentar, project akan tercreate secara otomatis.
  4. Siapkan gambar buah-buahan bisa cari di http://iconarchive.com , semua gambar buah dalam project ini diambil dari sana. Semua gambarnya taruh di folder “drawable”
  5. Sesuai Tema yaitu tentang Produk Katalog maka kita perlu model Product. Untuk itu pada package com.example.asus.katalog buat class baru dengan nama  “Product” lalu ketikan kode berikut:

    6.  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
    package com.example.asus.katalog;

import android.media.Image;

/**
 * Created by ASUS on 2/27/2018.
 */

public class Product {
    private String id="";
    private String name="";
    private String image="";
    private String price="";

    public Product(String id, String name, String image, String price){
        this.id = id;
        this.name=name;
        this.image=image;
        this.price=price;
    }

    private Product(){
    }

    public String getId(){
        return id;
    }
    public void setId(){
        this.id=id;
    }

    public String getName(){
        return name;
    }
    public void setName(){
        this.name=name;
    }
    public String getImage(){
        return image;
    }
    public void setImage(){
        this.image=image;
    }
    public String getPrice(){
        return price;
    }
    public void setPrice(){
        this.price=price;
    }
}
  6. Sekarang kita buat layout untuk item produknya yang tediri dari gambar, nama dan harga. Untuk itu pada folder layout, buat layout baru dengan nama item_product. Lalu ketikan kode berikut.
    7.  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    xml version="1.0" encoding="utf-8">;

    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"

    android:layout_width="110dp"
    android:layout_height="130dp"
    android:padding="2dp">
    
    
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:id="@+id/imageViewProduct"
        android:src="@mipmap/ic_launcher"/>
        
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Product Name"
        android:id="@+id/textViewName"
        android:gravity="center" />

    
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Price"
        android:id="@+id/textViewPrice"
        android:gravity="center"/>

  • Untuk menampilkan ke Product GridView kita perlu buat Custom Adapter baru. Untuk buat class baru dengan nama ProductAdapter lalu ketikan kode berikut
    •  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
    package com.example.asus.katalog;

import android.app.Activity;
import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.squareup.picasso.Picasso;

import java.util.List;

/**
 * Created by ASUS on 2/27/2018.
 */

public class ProductAdapter extends ArrayAdapter<Product> {
    Context context;

    public ProductAdapter(Context context, int resource, List<Product> products){
        super(context,resource,products);
        this.context=context;
    }

    private class ViewHolder{
        TextView tvName;
        TextView tvtPrice;
        ImageView ivProduct;
    }

    public View getView(int position, View convertView, ViewGroup parent){
        ViewHolder holder=null;
        Product product = getItem(position);
        LayoutInflater mInflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        if (convertView==null){
            convertView=mInflater.inflate(R.layout.item_product,null);
            holder=new ViewHolder();
            holder.tvName=(TextView)convertView.findViewById(R.id.textViewName);
            holder.tvtPrice=(TextView)convertView.findViewById(R.id.textViewPrice);
            holder.ivProduct=(ImageView) convertView.findViewById(R.id.imageViewProduct);
            convertView.setTag(holder);
        } else {
            holder=(ViewHolder)convertView.getTag();
        }
        holder.tvName.setText(product.getName());
        holder.tvtPrice.setText("Rp"+product.getPrice());
        int imageid = context.getResources().getIdentifier(product.getImage(), "drawable", context.getPackageName());
        try {
            Picasso.with(context).load(imageid).fit().centerInside().into(holder.ivProduct);
        }catch (Exception e){
            Log.d("TAG","product:"+product.getName());
        }
        return convertView;
    }
}

  • Pada class ProductAdapter terlihat ada code yang menggunakan library Picasso, untuk itu kita perlu menambahkan Libray Picasso pada script gradle (module).
    •  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.example.asus.katalog"
        minSdkVersion 15
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
    compile'com.squareup.picasso:picasso:2.5.2'
}

  • Sekarang kita  edit layout activity_main lalu ketikan kode berikut
    •  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    xml version="1.0" encoding="utf-8"?>

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.asus.katalog.MainActivity">

    
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/gridViewProduct"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:numColumns="3" />

  • Sekarang mari kita edit class MainActivity lalu ketikan kode berikut.
    •  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
    package com.example.asus.katalog;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
import java.util.Arrays;

public class MainActivity extends AppCompatActivity {
    private List<Product> products = new ArrayList<Product>();
    private GridView gridViewProduct;
    private ProductAdapter productAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridViewProduct = (GridView) findViewById(R.id.gridViewProduct);
        initData();
        drawDatatoGridView();
    }
    private void initData(){
        List<String> fruits= Arrays.asList("apple", "banana", "cherry", "coconut", "grape", "kiwi", "lemon", "mango", "orange", "peach", "pear", "pineapple", "starfruit", "stroberry", "watermelon");
        for (int i=0; i<fruits.size(); i++){
            int id= i+1;
            int price = id * 1000;
            products.add(new Product(id + "", fruits.get(i), fruits.get(i), price + ""));
        }
    }
    private void drawDatatoGridView() {
        productAdapter = new ProductAdapter(MainActivity.this,R.layout.item_product, products);

        gridViewProduct.setAdapter(productAdapter);

        gridViewProduct.setOnItemClickListener(new AdapterView.OnItemClickListener(){

            @Override
            public void onItemClick(AdapterView<> parent, View view, int position, long id) {
                Product product = (Product) parent.getAdapter().getItem(position);
                Toast.makeText(getBaseContext(),"Product Name :"+product.getName(),Toast.LENGTH_SHORT).show();
            }
        });

    }
}


    Perhatikan pada class diatas, ada method initData yang gunanya untuk menyiapkan data untuk digunakan pada ProductAdapter. Sedangakan method drawDatatoGridview digunakan untuk menggmabra data tadi ke GridVIew melalui ProductAdapter.
    Sekarang mari kita jalankan projectnya. Jika semua berjalan lancar maka hasilnya adalah seperti ini.





    on No comments:
    Subscribe to: Comments (Atom)