TUGAS KELOMPOK 2 PEMROGRAMAN APLIKASI MOBILE

APLIKASI KATALOG ONLINE

Anggota :
Alvin Indra Cahya (11.11.5302)
Ahmad Hasan Al Arif Billah (11.11.5304)
Mustopa Sidiq (11.11.5296)
Mudawil Qulub (11.11.5325)
Ahmad Arisga (11.11.5322)

APLIKASI KATALOG ONLINE

Tujuan Pembuatan Aplikasi

Aplikasi Katalog Online ini bertujuan untuk memudahkan pelanggan mengetahui

informasi produk dari Toko AJEB Store. Pada aplikasi ini pengguna dapat melihat daftar produk
yang dijual olej AJEB Store. Selain list produk yang tersedia aplikasi ini juga memberikan
informasi deskripsi produk, harga, serta stok yang tersedia di toko. Untuk kedepannya pengguna
dapat melakukan booking produk yang diinginkan, sehingga memudahkan mereka ketika datang
ke toko untuk mengecek barang atau ketika belanja nantinya. Untuk saat ini Aplikasi ini hanya
berfungsi sebagai katalog dari produk yang tersedia di toko, dan belum dapat melakukan
pembelian barang secara Online via aplikasi.

1. Penggunaan Aplikasi
Penggunaan Aplikasi ini sangat mudah, ketika aplikasi sudah terinstall di Android device
anda silahkan jalankan/buka aplikasi terlebih dahulu. Maka tampilan awal dari aplikasi ini adalah
sebagai berikut.

Gambar 1 : Tampilan aplikasi yang sudah terinstall di device android

 Gambar 2 : Tampilan awal aplikasi ketika dijalankan

Kemudian setelah muncul tampilan awal silahkan klik sembarang pada layar untuk
melanjutkan ke menu utama, maka akan muncul sebagai berikut:

Gambar 3 : Tampilan menu Utama

Setelah menu utama muncul, silahkan pilih kategori produk yang anda inginkan, untuk saat ini
hanya tersedia 2 kategori yaitu tas dan sepatu. Sebagai contoh kita pilih menu Tas, maka aplikasi
akan mengambil data yang ada di database server dan mucul tampilan sebagai berikut:

Gambar4 : Tampilan proses aplikasi mengambil data dari database server

 Ketika data dari database sudah diterima dengan baik oleh aplikasi maka tampilan akan
berubah dan menampikan daftar produk yang tersedia, serta harga dari setiap produk. seperti
dibawah ini:

Gambar5 : Tampilan list produk yang tersedia dari kategori yang dipilih, serta harga
masing-masing item

Selanjutnya untuk melihat detail produk dan informasi stok dari item, silahkan klik item
yang diinginkan. Setelah itu akan muncul jendela dialog yang berisi informasi lengkan mengenai
detail produk.

Gambar6 : Tampilan detail item produk yang dipilih

Selanjutnya tombol Bantuan, About Us serta tombol Exit juga tersedia pada menu utama
sebagai pelengkap aplikasi dan untuk mempermudah pelanggan. Tombol bantuan berisi tatacara
pengguanaan aplikasi, Tombol About Us berisi deskripsi dari aplikasi serta alasan aplikasi ini
dibuat, sedangkan Tombol Exit untuk keluar dari aplikasi ini.
 Gambar7 : Tampilan ketika tombol About Us di tekan pada halaman menu utama

Gambar8 : Tampilan ketika tombol Bantuan di tekan pada halaman menu utama

Gambar8 : Tampilan ketika tombol Exit di tekan pada halaman menu utama

Proses tampilan software pengambilan data melalui php menggunakan

metode JSON

JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca
dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer.
Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript, Standar ECMA-
262 Edisi ke-3 - Desember 1999. JSON merupakan format teks yang tidak bergantung pada
bahasa pemprograman apapun karena menggunakan gaya bahasa yang umum digunakan oleh
programmer keluarga C termasuk C, C++, C#, Java, JavaScript, Perl, Python dll. Oleh karena
sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data.

Aplikasi kami menggunakan Mysql sebagai database, Struktur tabelnya adalah sebagai berikut

Penjelasan Kode Program

Setelah membuat table database yang diperlukan serta memasukkan data untuk sample,
selanjutnya kami membuat file php untuk koneksi database, serta memanggul data dari databse
untuk selanjutnya dikoneksikan ke file Java menggunakan metode JSON.

File config.php
<?php

$host="mysql.idhostinger.com";
$username="u568075135_user";
$password="********";
$db="u568075135_tokoo";

mysql_connect($host,$username,$password) or die("Gagal");
mysql_select_db($db) or die("database tidak ada");

?>

File ini berfungsi untuk mengkoneksikan database yang sebelumnya kita buat. Pada kali ini kami
menggunakan hosting dan web server gratis yaitu di idhostinger.com.

File menu_service.php
<?php

require_once "config.php";
$json = array();

$kategori=$_POST['kategori'];
//$kategori=2;

$sqlselect= "SELECT * FROM tb_produk WHERE idkategori=$kategori";

$hasil = mysql_query($sqlselect);
while ($row=mysql_fetch_assoc($hasil)) {
$produk[]=$row;
}
if (($produk)) {
$json['dataproduk']=$produk;
echoe($json);
}

?>

File ini berfungsi untuk mengambil data dari database, lalu memasukkannya kedalam array
untuk selanjutnya akan di masukkan kedalam program android menggunakan json.
Setelah kita membuat file php untuk koneksi database dan pengambilan data selanjutkan kita
membuat halaman awal android menggunakan program Eclipse.

File startup.xml
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/buka"
android:orientation="vertical" >

<ImageView android:id="@+id/gambar"
android:fadingEdge="vertical"
android:scrollbars="vertical"
android:layout_gravity="top"
android:scaleType="fitCenter"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

</ImageView>
</AbsoluteLayout>

Pertama kami membuat tampilan awal aplikasi pada folder res>layout sebai pembuka ketika
pengguna membuka aplikasi ini.

File muka.java
package com.finalprojekpm;

import com.finalprojekpm.R;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;

public class muka extends Activity implements OnClickListener{

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.startup);

View gambar=
findViewById(R.id.gambar);
gambar.setOnClickListener(this);

}
public void onClick(View v){
switch (v.getId()){
case R.id.gambar:
Intent menu= new Intent (this, menu.class);
startActivity(menu);
break;

}
}
}
Muka.java akan di eksekusi pertama kali oleh program eclipe untu, atau pada biasanya file ini
bernama MainActivity.java. namun kamihanya merubah namanya saja. File ini akan memanggil
layout startup.xml yang kita buat tadi.sebagai tampilan awal. Lalu kami menambahkan action
OnClickListener sehingga ketika di klik sembarang maka akan lanjut ke class menu.java

File menu.java
package com.finalprojekpm;

import com.finalprojekpm.R;
import com.finalprojekpm.MenuActivity;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.ListActivity;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle; //import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.Toast;

public class menu extends Activity implements OnClickListener{

Button btnTas, btnSepatu, btnAbout, btnHelp, btnExit;

@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.main_menu);

btnTas = (Button) findViewById(R.id.btnTas);

btnSepatu = (Button) findViewById(R.id.btnSepatu);
btnAbout = (Button) findViewById(R.id.btnAbout);
btnHelp = (Button) findViewById(R.id.btnHelp);
btnExit = (Button) findViewById(R.id.btnExit);

btnTas.setOnClickListener(this);
btnSepatu.setOnClickListener(this);
btnAbout.setOnClickListener(this);
btnHelp.setOnClickListener(this);
btnExit.setOnClickListener(this);

}
@Override
public void onClick(View v) {
Intent i = null;
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.btnTas:
Bundle b = new Bundle();
Intent intent = new Intent(menu.this, MenuActivity.class);
b.putString("kategori", "1");
intent.putExtras(b);
startActivity(intent);

break;

case R.id.btnSepatu:
Bundle bu = new Bundle();
Intent intent2 = new Intent(menu.this, MenuActivity.class);
bu.putString("kategori", "2");
intent2.putExtras(bu);
startActivity(intent2);

break;

case R.id.btnHelp:
i = new Intent(this, help.class);
startActivity(i);
break;

case R.id.btnAbout:
i = new Intent(this, about.class);
startActivity(i);
break;

case R.id.btnExit:
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setMessage("Anda Yakin Ingin Menutup Aplikasi?")
.setCancelable(false).setPositiveButton("Ya",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog,
int id) {
Intent exit = new Intent(
 Intent.ACTION_MAIN);
exit.addCategory(Intent.CATEGORY_HOME);
exit

.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(exit);
}
}).setNegativeButton("Tidak",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog,
int id) {
dialog.cancel();
}
}).show();
break;

default:

Toast.makeText(
this,
" , Actionnya belum dibuat",
Toast.LENGTH_LONG).show();

break;
}

Class menu.java akan dieksekusi ketika tampilan awal di klik sembarang. File ini berfungsi
untuk memanggil tampilan selanjutnya yaitu main_menu.xml. File ini juga memberikan action
button yang ada pada halaman main_menu.xml sesuai id button yang tersedia. Untuk button Tas
dan Sepatu masing-masing berisi String kategori yang akan dimuat di halaman selanjutnya, dan
akan diproses oleh sintaks json untuk mengambil data dari database sesuai yang dipilih.
Sedangkan button About, Bantuan dan Exit hanya berisi sintaks berpindah ke halaman class
masing-masing dan menampilkan halaman sesuai pilihan.

File main_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="vertical" >

<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:shrinkColumns="*"
android:stretchColumns="*"
>

<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:gravity="center_horizontal" >

<Button android:background="#000"
android:gravity="center"
android:id="@+id/btnTas"
android:layout_weight="1"
android:padding="20dip"
android:text="Tas"
android:textColor="#fff"
android:layout_width="20dip"
android:drawableTop="@drawable/ictas2"
> </Button>
 <Button
android:background="#000"
android:gravity="center"
android:id="@+id/btnSepatu"
android:layout_weight="1"
android:padding="20dip"
android:text="Sepatu"
android:textColor="#fff"
android:layout_width="20dip"
android:drawableTop="@drawable/icsepatu"
> </Button>

</TableRow>

<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="fill_parent" >

<Button android:background="#000"
android:gravity="center"
android:id="@+id/btnHelp"
android:layout_weight="1"
android:padding="20dip"
android:text="Bantuan"
android:textColor="#fff"
android:layout_width="20dip"
android:drawableTop="@drawable/ichelp"
> </Button>
<Button
android:background="#000"
android:gravity="center"
android:id="@+id/btnAbout"
android:layout_weight="1"
android:padding="20dip"
android:text="About Us"
android:textColor="#fff"
android:layout_width="20dip"
android:drawableTop="@drawable/icabout"> </Button>

</TableRow>

<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="fill_parent" >

<Button android:background="#000"
android:gravity="center"
android:id="@+id/btnExit"
android:layout_weight="1"
android:padding="20dip"
android:text="Exit"
android:textColor="#fff"
android:layout_width="20dip"
android:drawableTop="@drawable/icexit"></Button>

</TableRow>

</TableLayout>
</LinearLayout>
Layout main_menu.xml akan tampil setelah startup.xml. pada layout ini berisi button dari main
menu yang action sudah dibuat pada class menu.java.

File MenuActivity.java
package com.finalprojekpm;

import java.io.InputStream;
import java.util.ArrayList;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import com.finalprojekpm.AmbilData.JsonObjectResult;
import android.os.AsyncTask;
import android.os.Bundle;
import android.app.Activity;
import android.app.Dialog;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.WindowManager;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;

public class MenuActivity extends Activity {

EntitasProduk entitasproduk;
ArrayList<EntitasProduk> menu = new ArrayList<EntitasProduk>();
ListView lv;
String url = "http://guaga.hol.es/menu_service.php";
String urlpic = "http://guaga.hol.es/menutoko/";

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

lv = (ListView) findViewById(R.id.listMenu);

Bundle b = this.getIntent().getExtras();
if (b.containsKey("kategori")) {

String kat = b.getString("kategori");

Log.d("kat", kat);
AmbilData ambildata = new AmbilData();
ambildata.init(MenuActivity.this, jsresult, kat, url);
}

public JsonObjectResult jsresult = new JsonObjectResult() {

@Override
public void gotJsonObject(JSONObject jobject) {
// TODO Auto-generated method stub
try {
JSONArray arraytempat = jobject.getJSONArray("dataproduk");

for (int i = 0; i < arraytempat.length(); i++) {

entitasproduk = new EntitasProduk();
entitasproduk.setIDproduk(arraytempat.getJSONObject(i)
.getInt("idproduk"));
entitasproduk.setNamaProduk(arraytempat.getJSONObject(i)
.getString("nama_produk"));
entitasproduk.setHargaProduk(arraytempat.getJSONObject(i)
.getString("harga_produk"));
entitasproduk.setDeskripsiProduk(arraytempat
.getJSONObject(i).getString("deskripsi_produk"));
entitasproduk.setPictProduk(arraytempat.getJSONObject(i)
.getString("picture_ad"));
entitasproduk.setStokProduk(arraytempat.getJSONObject(i)
.getString("stok_produk"));

menu.add(entitasproduk);

}
} catch (JSONException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
 }

MenuBaseAdapter datatempat = new

MenuBaseAdapter(MenuActivity.this,
menu);
lv.setAdapter(datatempat);
lv.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int
p,
long arg3) {
// TODO Auto-generated method stub
String des = menu.get(p).getDeskripsiProduk();
String nm = menu.get(p).getNamaProduk();
String hrg = menu.get(p).getHargaProduk();
String pic = menu.get(p).getPictProduk();
String sto = menu.get(p).getStokProduk();

tampilkandetail(nm, des, hrg, pic, sto);

}
});
}
};

public void tampilkandetail(String nama, String desk, String harga,

String pic, String stok) {

final Dialog d = new Dialog(this);

d.setTitle("detail");
d.setContentView(R.layout.dialog_custom);

WindowManager.LayoutParams lp = new WindowManager.LayoutParams();

lp.copyFrom(d.getWindow().getAttributes());
lp.width = LayoutParams.MATCH_PARENT;
lp.height = LayoutParams.WRAP_CONTENT;

d.getWindow().setAttributes(lp);

ImageView gb = (ImageView) d.findViewById(R.id.picDialog);

TextView n = (TextView) d.findViewById(R.id.idNamaProduk);
TextView h = (TextView) d.findViewById(R.id.idHarga);
TextView s = (TextView) d.findViewById(R.id.txtStok);
TextView desc = (TextView) d.findViewById(R.id.idDeskripsi);
Button bOk = (Button) d.findViewById(R.id.idOK);

n.setText(nama);
h.setText(harga);
s.setText(stok);
desc.setText(desk);
new DownloadImageTask(gb).execute(urlpic + pic);
bOk.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
d.dismiss();
}
});
d.show();
}
public class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
ImageView bmImage;

public DownloadImageTask(ImageView bmImage) {

this.bmImage = bmImage;
}

@Override
protected void onPreExecute() {
// TODO Auto-generated method stub
super.onPreExecute();
}

protected Bitmap doInBackground(String... urls) {

String urldisplay = urls[0];
Bitmap mIcon11 = null;
try {
InputStream in = new java.net.URL(urldisplay).openStream();
mIcon11 = BitmapFactory.decodeStream(in);
} catch (Exception e) {
 Log.e("Error", e.getMessage());
e.printStackTrace();
}
return mIcon11;
}

protected void onPostExecute(Bitmap result) {

if (result != null) {
Bitmap bmp2 = Bitmap.createScaledBitmap(result, 72, 72,
true);
bmImage.setImageBitmap(bmp2);
}
}
}
}

MenuActivity.java akan di eksekusi ketika memilih button Tas atau Sepatu. File ini akan
menangkap String kategori sesuai yang diinginkan. Class ini akan menghubungkan dengan file
menu_service.php menggunakan metode Json untuk menampilkan data sesuai kategori serta
menampilkan gambar sesuai item. Pada kali ini kami menggunakan domain gratis dari
idhostinger.com yaitu http://guaga.hol.es Didalam file ini juga kita masukkan alamat
lengkap tempat kita mengupload gambar serta file menu_service.php. pada kali ini kami
mengupload file menu_service di http://guaga.hol.es/menu_service.php dan folde
gambar di http://guaga.hol.es/menutoko/ namun jika menggunakan localhost pada
program xampp alamat “localhost” bisa menggunakan “10.0.2.2”.

File menu.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@drawable/bg2" >

<ListView
android:id="@+id/listMenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:listitem="@layout/item_custom_listview" >
</ListView>

</LinearLayout>

Layout ini akan menampilkan list item produk yang tersedia, serta menggunakan
item_custom_listview untuk layout masing-masing item.

File dialog_custom.xml
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >

<TextView
android:id="@+id/idNamaProduk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />

<ImageView
android:id="@+id/picDialog"
android:layout_width="wrap_content"
 android:layout_height="wrap_content"
android:src="@drawable/icon" />

<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:shrinkColumns="1"
android:stretchColumns="1" >

<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<TextView
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:text="Harga Produk"
android:textAppearance="?android:attr/textAppearanceMedium"/>

<TextView
android:id="@+id/idHarga"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:text="not available"
android:textAppearance="?android:attr/textAppearanceMedium"
/>

</TableRow>

<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<TextView
android:id="@+id/TextView03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:text="Deskripsi"
android:textAppearance="?android:attr/textAppearanceMedium"/>

<TextView
android:id="@+id/idDeskripsi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:text="not available"

android:textAppearance="?android:attr/textAppearanceMedium"/>

</TableRow>

<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<TextView
android:id="@+id/TextView03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:text="Stok"
android:textAppearance="?android:attr/textAppearanceMedium"
/>

<TextView
android:id="@+id/txtStok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:text="not available"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
 </TableRow>

</TableLayout>

<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:shrinkColumns="1"
android:stretchColumns="1">
<TableRow
android:id="@+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Booking Produk" />

<Button
android:id="@+id/idOK"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="OK" />
</TableRow>
</TableLayout>
</LinearLayout>

Layout ini akan menampilkan detail item yang dipilih saat list item produk ditekan. Layout ini
juga akan menampilkan uraian data yang diterima dari server

File item_custom_listview.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:gravity="center_vertical"
android:orientation="horizontal"
tools:context=".MainActivity" >

<ImageView
android:id="@+id/img_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon" />

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

<TextView
android:id="@+id/nama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
android:id="@+id/harga"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
Layout ini akan menyusun tampilan dasar item produk untuk selanjutnya dipanggil oleh layout
menu. Layout ini juga akan menampilkan uraian data yang diterima dari server

File EntitasProduk.java
package com.finalprojekpm;

public class EntitasProduk {

int idproduk;
String namaproduk = "";
String hargaproduk = "";
String deskripsiproduk = "";
String stokproduk = "";
String pictproduk = "";

public void setIDproduk(int id) {

this.idproduk = id;
}

public int getIDproduk() {

return idproduk;
}

public void setNamaProduk(String n) {

this.namaproduk = n;
}

public String getNamaProduk() {

return namaproduk;
}

public void setStokProduk(String s) {

this.stokproduk = s;
}

public String getStokProduk() {

return stokproduk;
}

public void setHargaProduk(String h) {

this.hargaproduk = h;
}

public String getHargaProduk() {

return hargaproduk;
}

public void setDeskripsiProduk(String d) {

this.deskripsiproduk = d;
}

public String getDeskripsiProduk() {

return deskripsiproduk;
}

public void setPictProduk(String p) {

this.pictproduk = p;
}

public String getPictProduk() {

return pictproduk;
}
}
Class EntitasProduk.java merupakan class pendukung untuk menampung data kedalam array.

File AmbilData.java
package com.finalprojekpm;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import org.apache.http.NameValuePair;
import org.apache.http.message.BasicNameValuePair;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.app.ProgressDialog;
import android.content.Context;
import android.os.AsyncTask;
import android.util.Log;
public class AmbilData extends AsyncTask<Object, Object, Object> {
private JSONParser jsonparser;
ArrayList<String> d;
JsonObjectResult jobres;
Context context;
ProgressDialog pd;

public void init(Context c, JsonObjectResult jres, String kategori,

String url) {
this.context = c;
this.jobres = jres;

AmbilData ad = this;
ad.execute(url, kategori, "");
}

@Override
protected void onPreExecute() {
// TODO Auto-generated method stub
super.onPreExecute();
pd = ProgressDialog.show(context, "Retrieve Data", "aaa");
pd.setMessage("Please wait...");
pd.show();
}

@Override
protected Object doInBackground(Object... parameter) {
// TODO Auto-generated method stub
JSONObject jsobj = null;
String url = (String) parameter[0];
String kat = (String) parameter[1];
Log.i("url", url);
Log.i("kat", kat);
jsonparser = new JSONParser();
List<NameValuePair> datajson = new ArrayList<NameValuePair>();
datajson.add(new BasicNameValuePair("kategori", kat));
try {
jsobj = jsonparser.getObject(url, "POST", datajson);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return jsobj;
}

@Override
protected void onPostExecute(Object result) {
// TODO Auto-generated method stub
super.onPostExecute(result);
if (pd.isShowing()) {
pd.dismiss();
}

if (result != null) {
JSONObject js = (JSONObject) result;
jobres.gotJsonObject(js);
}
}

public static abstract class JsonObjectResult {

public abstract void gotJsonObject(JSONObject jobject);
}
}
Class AmbilData.java akan mengambil data dari server secara background. Class ini
menggunakan implementasi AsyncTask

File JSONParser.java
package com.finalprojekpm;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import java.util.List;

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.NameValuePair;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.client.utils.URLEncodedUtils;
import org.apache.http.impl.client.DefaultHttpClient;
import org.json.JSONException;
import org.json.JSONObject;

public class JSONParser {

InputStream is;
String json;

JSONObject object;

public JSONObject getObject(String url, String method,

List<NameValuePair> value) throws IOException {

if(method == "POST"){
DefaultHttpClient client = new DefaultHttpClient();
HttpPost post = new HttpPost(url);
try {
post.setEntity(new UrlEncodedFormEntity(value));
HttpResponse response = client.execute(post);
HttpEntity entity = response.getEntity();
is = entity.getContent();
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (ClientProtocolException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

}else if(method == "GET"){

DefaultHttpClient client = new DefaultHttpClient();
String param = URLEncodedUtils.format(value, "utf-8");
url += "?" + param;
HttpGet get = new HttpGet(url);
HttpResponse response;
try {
response = client.execute(get);
is = response.getEntity().getContent();
} catch (ClientProtocolException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
try {
BufferedReader reader = new BufferedReader(new
InputStreamReader(is,"iso-8859-1"));
StringBuilder sb = new StringBuilder();
String line;
while((line = reader.readLine())!=null){
sb.append(line+"\n");
}
is.close();
json = sb.toString();
object = null;
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
try {
object = new JSONObject(json);
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return object;
}
}
Class JSONParser.java akan mengurai data yang diambil dalam format JSON

File MenuBaseAdapter.java
package com.finalprojekpm;

import java.io.InputStream;
import java.util.ArrayList;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class MenuBaseAdapter extends BaseAdapter {

private static ArrayList<EntitasProduk> searchArrayList;

private LayoutInflater mInflater;

String urlpic = "http://guaga.hol.es/menutoko/";

Bitmap bm;

public MenuBaseAdapter(Context context, ArrayList<EntitasProduk> results)

{
searchArrayList = results;
mInflater = LayoutInflater.from(context);
}

@Override
public int getCount() {
return searchArrayList.size();
}

@Override
public Object getItem(int p) {
return searchArrayList.get(p);
}

@Override
public long getItemId(int p) {
return p;
}

@Override
public View getView(int p, View v, ViewGroup parent) {
ViewHolder holder;

if (v == null) {
v = mInflater.inflate(R.layout.item_custom_listview, null );
holder = new ViewHolder();
holder.nama = (TextView) v.findViewById(R.id.nama);
holder.harga = (TextView) v.findViewById(R.id.harga);
//holder.stok = (TextView) v.findViewById(R.id.strStok);
holder.pic = (ImageView) v.findViewById(R.id.img_menu);
// holder.deskripsi = (TextView) v.findViewById(R.id.d);
new DownloadImageTask(holder.pic).execute(urlpic
+ searchArrayList.get(p).getPictProduk());
v.setTag(holder);
} else {
holder = (ViewHolder) v.getTag();
}

holder.nama.setText(searchArrayList.get(p).getNamaProduk());
holder.harga.setText(searchArrayList.get(p).getHargaProduk());
// holder.stok.setText(searchArrayList.get(p).getStokProduk());
// new DownloadImageTask(holder.pic).execute(urlpic
// + searchArrayList.get(p).getPictProduk());
return v;
}

static class ViewHolder {

TextView nama, harga;
 ImageView pic;

public class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {

ImageView bmImage;

public DownloadImageTask(ImageView bmImage) {

this.bmImage = bmImage;
}

@Override
protected void onPreExecute() {
// TODO Auto-generated method stub
super.onPreExecute();
}

protected Bitmap doInBackground(String... urls) {

String urldisplay = urls[0];
Bitmap mIcon11 = null;
try {
InputStream in = new java.net.URL(urldisplay).openStream();
mIcon11 = BitmapFactory.decodeStream(in);
} catch (Exception e) {
Log.e("Error", e.getMessage());
e.printStackTrace();
}
return mIcon11;
}

protected void onPostExecute(Bitmap result) {

if (result != null) {
Bitmap bmp2 = Bitmap.createScaledBitmap(result, 72, 72,
true);
bmImage.setImageBitmap(bmp2);
}

}
}
}
Class MenuBaseAdapter.java akan menyusun semua data yang diterima kedalam ListView untuk
ditampilkan atau disusun kedalam layout item_custom_listview.xml

File about.java
package com.finalprojekpm;

import com.finalprojekpm.R;

import android.app.Activity;
import android.os.Bundle;

public class about extends Activity {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.about);
}
}
Class ini memberikan activity atau action untuk menampilkan layout about.xml

File about.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="@+id/ScrollView01" android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<AbsoluteLayout

android:layout_width="fill_parent"
android:background="@drawable/about"
android:layout_height="fill_parent">
</AbsoluteLayout>
</ScrollView>
Layout ini akan menampilkan halaman about dan memanggil gambar yang ada di
drawable/about

File help.java
package com.finalprojekpm;

import com.finalprojekpm.R;

import android.app.Activity;
import android.os.Bundle;

public class help extends Activity {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.help);
}
}
Class ini memberikan activity atau action untuk menampilkan layout help.xml

<?xml version="1.0" encoding="utf-8"?>

<ScrollView android:id="@+id/ScrollView01" android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<AbsoluteLayout android:layout_width="fill_parent"
android:background="@drawable/help1"
android:layout_height="fill_parent">
</AbsoluteLayout>
</ScrollView>
Layout ini akan menampilkan halaman Bantuan dan memanggil gambar yang ada di
drawable/help1

Penutup
Demikian laporan Final Projek Pemrograman mobile dari klompok kami dengan tema
Aplikasi Katalog Online. Tentunya aplikasi ini masih banyak kekurangan dan masih butuh
perkembangan fitur lebih lanjut.

Daftar Pustaka
1. (http://www.json.org/json-id.html, diakses pada 8 Juni 2014, 09:30)
2. Nazaruddin Safaat H, Android Pemrograman Aplikasi Mobile
Smartphone dan Tablet PC berbasis Android, Penerbit Informatika, 2012