Vous êtes sur la page 1sur 16

Tutor ialMembuat

AplikasiAndroid

Resep Makanan
SQLiteDatabaseImplementation

Tujuan

MembuatAplikasiResepmasakansederhanadenganmenampilkandatadata
yangtelahadapadadatabaseSQLite.

Materi

SplashScreen
ProgressBar
ListViewLayouting
SQLitedatabase
DatabaseSearch

Tool

Eclipse+AndroidSDK(adtbundle)

Pembahasan

PersiapkanIDEandauntukmemulaikoding,disinisayamemakaieclipse
Kepler.BuatprojectbarudengankliktabFiledimenubarkemudian
pilihNewdanpilihAndroidApplicationProject.UntukPenamaan
terserahanda,sayamemberikannamaprojectAndroidSimpleRecipe.

Kemudianuntukbasiclayoutuntukappresepinikitamembutuhkan
beberapafilelayoutdiantaranyaadalah.
splashbe.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@+drawable/splashbe"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ProgressBar
android:id="@+id/activity_splash_progress_bar"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="370dp"/>
</LinearLayout>

Padalayoutsplashbebisakitaliatstrukturlayoutnyamenggunakan
Linearlayootdengantambahanpaletteberupaprogressbaruntuk
mempercantiktampilanloadingsplash,danuntukbackgroudnyasendiri
meloaddarires/drawable/splashbe.jpg.Sedangkanuntukfilejavanya
adalahsebagaiberikut:
Splashbe.java
package id.creatorb.resep;
import
import
import
import
import

id.creatorb.resep.Task.TaskFinishedListener;
android.app.Activity;
android.content.Intent;
android.os.Bundle;
android.widget.ProgressBar;

public class Splashbe extends Activity implements TaskFinishedListener {


@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// menampilkan background splashbe
setContentView(R.layout.splashbe);
// mencari progress bar
ProgressBar progressBar = (ProgressBar)
findViewById(R.id.activity_splash_progress_bar);
// memulai progress bar
new Task(progressBar, this).execute("www.google.co.uk"); // lewati langkah
ini karena ini hanyalah contoh untuk meload loading request dan tidak digunakan
disini.

}
// method untuk mengakhiri asynctask
@Override
public void onTaskFinished() {
completeSplash();
}
private void completeSplash(){
startApp();
finish(); // sisipkan perintah finish agar tidak melanjutkan
perulangan.
}
private void startApp() {
Intent intent = new Intent(Splashbe.this, MainActivity.class);
startActivity(intent);
}
}

dalamclassSplashbemelakukanextendsdenganTaskFinishedListener
dimanaactivitytersebutadapadaclassTaskberikut.
Task.java
package id.creatorb.resep;
import android.os.AsyncTask;
import android.util.Log;
import android.widget.ProgressBar;
public class Task extends AsyncTask<String, Integer, Integer> {
public interface TaskFinishedListener {
void onTaskFinished(); //menambahkan parameter finished untuk mencegah
task di ulang kembali
// progress bar berjalan ketika ada sesuatu yang hendak di update dibelakang
layar
private final ProgressBar progressBar;
// listener untuk mendeteksi proses telah berakhir
private final TaskFinishedListener finishedListener;
public Task(ProgressBar progressBar, TaskFinishedListener finishedListener) {
this.progressBar = progressBar;
this.finishedListener = finishedListener;
}
@Override
protected Integer doInBackground(String... params) {
Log.i("Tutorial", "Starting task with url: "+params[0]);
if(resourcesDontAlreadyExist()){
downloadResources();
}

// memungkinkan untuk kembali pada permintaan yang tereksekusi


return 1234;
}
private boolean resourcesDontAlreadyExist() {
// melakukan permintaan pada app internal utk melihat apakah progress sudah
complete atau belom
// memungkinkan yang telah dicek disimpan pada shared preference untuk
kecepatan load jika sewaktu2 aplikasi dijalankan kembali
return true; // jika true maka akan muncul setiap saat
}
private void downloadResources() {
// meniru beberapa proses downloading
int count = 10;
for (int i = 0; i < count; i++) {
// update progress sebanyak x
int progress = (int) ((i / (float) count) * 100);
publishProgress(progress);
// lama loading di lakukan
try { Thread.sleep(1000); } catch (InterruptedException ignore)
{}
}
}
@Override
protected void onProgressUpdate(Integer... values) {
super.onProgressUpdate(values);
progressBar.setProgress(values[0]); // menjalankan progress bar di ui
}
@Override
protected void onPostExecute(Integer result) {
super.onPostExecute(result);
finishedListener.onTaskFinished(); // pemberitahuan progress bar
selesai
}
}

Darikonfigurasiactivitysplashdiatasmakaakanmemilikilayout
sepertiini.

PadaSplashbe.javasendiriterdapatIntent(Splashbe.this,
MainActivity.class)dengankatalainketikaactivitysplashbeberakhir
makaappakanmeloadactivitymain/classMainActivity.Untuklayout
dariMainActivitysendiriadapadamain.xmlberikutkodingannya.
Main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<EditText
android:id="@+id/et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/btn"
android:layout_toLeftOf="@+id/btn"
android:hint="Cari Resep">
<requestFocus />
</EditText>

<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="search_db"
android:text="Search"
android:textColor="#FFFFFF"
android:background="#C0C0C0" />
<ListView
android:id="@+id/lv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/et" >
</ListView>
</RelativeLayout>

DiataskitamenggunakanbeberapapalettediantaranyaEditTextuntuk
memberikanaksesinputpadauseryangnantinyaakandigunakanuntuk
fiturpencarian,kemudianbuttonsebagaitomboleksekusipencarian
datadanterakhirlistviewmenampilkandatadatayangadapada
databasedalambentuklist/daftar.Berikutclassdarimain.
MainActivity.java
package id.creatorb.resep;
import
import
import
import
import
import
import
import
import
import
import
import
import

android.os.Bundle;
android.app.Activity;
android.content.Intent;
android.database.Cursor;
android.database.sqlite.SQLiteDatabase;
android.view.View;
android.widget.AdapterView;
android.widget.EditText;
android.widget.ListAdapter;
android.widget.ListView;
android.widget.SimpleCursorAdapter;
android.widget.Toast;
android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends Activity {


//deklarasi
protected ListView lv;
protected ListAdapter adapter;
SQLiteDatabase db;
Cursor cursor;
EditText et_db;
@SuppressWarnings("deprecation")
@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.main);
db = (new DB_Resep(this)).getWritableDatabase();
lv = (ListView) findViewById(R.id.lv);
et_db = (EditText) findViewById(R.id.et);

null);

try {
//select dari database resep, menampilkan nya secara urut sesuai abjad
cursor = db.rawQuery("SELECT * FROM resep ORDER BY nama ASC",
adapter = new SimpleCursorAdapter(this, R.layout.isi_lv, cursor,
new String[] { "nama", "bahan", "img" }, new int[] {
R.id.tv_nama, R.id.tvBahan, R.id.imV });
lv.setAdapter(adapter);
lv.setTextFilterEnabled(true);
lv.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
detail(position);
}
});
} catch (Exception e) {
e.printStackTrace();
}

}
@SuppressWarnings("deprecation")
//method pencarian pada search box
public void search_db(View v) {
String edit_db = et_db.getText().toString();
if (!edit_db.equals("")) {
try {
cursor = db.rawQuery("SELECT * FROM resep WHERE nama
LIKE ?",
new String[] { "%" + edit_db + "%" });
adapter = new SimpleCursorAdapter(
this,
R.layout.isi_lv,
cursor,
new String[] { "nama", "bahan", "img" },
new int[] { R.id.tv_nama, R.id.tvBahan,
R.id.imV });
if (adapter.getCount() == 0) {
Toast.makeText(
this,
"Tidak ada " + edit_db
+ "",
Toast.LENGTH_SHORT).show();
} else {
lv.setAdapter(adapter);
}
} catch (Exception e) {
e.printStackTrace();

}
} else {
try {
cursor = db.rawQuery("SELECT * FROM resep ORDER BY nama

ASC",

R.id.imV });

null);
adapter = new SimpleCursorAdapter(
this,
R.layout.isi_lv,
cursor,
new String[] { "nama", "bahan", "img" },
new int[] { R.id.tv_nama, R.id.tvBahan,
lv.setAdapter(adapter);
lv.setTextFilterEnabled(true);
} catch (Exception e) {
e.printStackTrace();
}

}
public void detail(int position) {
int im = 0;
String _id = "";
String nama = "";
String bahan = "";
String cara = "";
if (cursor.moveToFirst()) {
cursor.moveToPosition(position);
im = cursor.getInt(cursor.getColumnIndex("img"));
nama = cursor.getString(cursor.getColumnIndex("nama"));
bahan = cursor.getString(cursor.getColumnIndex("bahan"));
cara = cursor.getString(cursor.getColumnIndex("cara"));
}

Intent iIntent = new Intent(this, DB_Parse.class);


iIntent.putExtra("dataIM", im);
iIntent.putExtra("dataNama", nama);
iIntent.putExtra("dataBahan", bahan);
iIntent.putExtra("dataCara", cara);
setResult(RESULT_OK, iIntent);
startActivityForResult(iIntent, 99);

Darimainactivitydiatasbisakitalihat,disanameloaddatatabel
resepdaridatabasedb_resepyangtelahdisediakan(dibahasdalam
pembahasanselanjutnya)dankemudianmengambildatanamaresepdan
gambar/imageyangtersediapadareseptersebutselanjutnyadi
parsingpadalayoutmain.xmldengantv_namauntuknamaresepdanimV
untukgambarresep.

Padaactivitymaindiatasjugaadamethoduntukpencarianpadasearch
boxyangnantinyaketikabuttonsearchdieksekusimakapencarian
akandilakukanpadadatabasedb_resepdankemudianditampilkan
sesuailayoutsebelumnya(main.xml)danjikatidakditemukandata
makaakanmunculkembalianpesanuntukmemberitahukanbahwadata
yangsedangdicaritidakadadalamdatabase.
Danberikutuntukmenampilkanisidatayangadadalambentuk
listview.
isi_lv.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/imV"
android:layout_width="50px"
android:layout_height="50px"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:gravity="left"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/tv_nama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/imV"
android:layout_marginLeft="3px"
android:text="TextView"
android:layout_weight="1"
android:gravity="center"
android:textSize="10pt"
android:textColor="#808080"
android:textStyle="bold" />
</RelativeLayout>

Tampilannyasepertiberikut:

Jikamelakukanpencarian(ex:udang)makaakantampilsepertiini.

Selanjutnyaadalahpembahasanmengenaidatabasedb_resep.Database
iniberakarpadasalahsatuclassyangbernamaDB_Resepdimanasemua
datayangditampilkantertampungmenjadisatudalamclassini.
DB_Resep.java
package id.creatorb.resep;
import
import
import
import

android.content.ContentValues;
android.content.Context;
android.database.sqlite.SQLiteDatabase;
android.database.sqlite.SQLiteOpenHelper;

public class DB_Resep extends SQLiteOpenHelper {


//pembuatan database dengan nama db_resep
final static String DB_NAME = "db_resep";
public DB_Resep(Context context) {
super(context, DB_NAME, null, 1);
// TODO Auto-generated constructor stub
}

@Override
public void onCreate(SQLiteDatabase db) {
//pada database db_resep membuat tabel baru bernama resep untuk di isi dengan
beberapa field diantaranya id (INT) nama (TEXT) bahan (TEXT) cara (TEXT) dan img
String sql = "CREATE TABLE IF NOT EXISTS resep(_id INTEGER PRIMARY KEY
AUTOINCREMENT, nama TEXT, bahan TEXT, cara TEXT, img BLOB)";
db.execSQL(sql);
//berikut ini adalah beberapa cuplikan content dari database
ContentValues values = new ContentValues();
values.put("_id", "1");
values.put("nama", "Bubur Candil");
values.put("bahan", "Tepung ketan putih 200 gr, Tepung beras putih 50
gr, Air 100 ml, Pewarna makanan (merah,hijau,kuning) secukupnya, Gula jawa / gula
merah 200 gr, Air 1 ltr, Santan 500 ml, Garam sdt, Daun pandan 1 lbr");
values.put("cara","Pertama Masukkan tepung ketan dan tepung beras dalam
wadah, Kemudian tuangkan air sedikit demi sedikit hingga kalis (kental dan
lengket), Selanjutnya Basahi tangan dengan air lalu uleni lagi bila terasa adonan
masih kurang kalis. Setelah itu pisahkan adonan menjadi 3 bagian, lalu berikan
pewarna pada masing-masing adonan, Setelah itu bentuk bulat-bulat seperti kelereng.
Masak gula jawa dan air 1 ltr, biarkan hingga mendidih dan gula larut lalu saring
kemudian didihkan lagi, lalu cemplungkan bulatan adonan kedalamnya, biarkan hingga
mengapung. Lalu masukkan santan,garam,daun pandan. Aduk rata hingga mendidih, dan
kini bubur candil siap disajikan");
values.put("img", R.drawable.buburcandil); //memasukkan gambar dari
drawable
db.insert("resep", "_id", values);
@Override
public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion)
{
db.execSQL("DROP TABLE IF EXISTS resep");

onCreate(db);
}
}

danuntukpencariandanpencocokanmasingmasingstringdan
ditampilkankeseluruhan(lengkap)itemyangadatidaksepertidi
main.xmlyangmemangfungsinyasebagaithumbnail.Semuanyaadapada
resep.xmlyangmenampilkanimagepadaposisitopdalamlayoutdan
beberapapalettesepertiscrollviewuntukmemudahkancontentdalam
bentukdinamis/responsifdanlaindiantaranyaadalahTextView.
Resep.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/paper"
android:orientation="vertical" >
<ImageView
android:id="@+id/iv_detail"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:src="@drawable/buburcandil" />
<Button
android:id="@+id/button1"
android:layout_width="fill_parent"
android:layout_height="10dp"
android:layout_below="@+id/iv_detail"
android:background="#3D3C3A" />
<ScrollView
android:id="@+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/button1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/iv_detail"

android:layout_marginTop="3dp"
android:text="Resep"
android:textColor="#6e7b8b"
android:textStyle="bold" />
<TextView
android:id="@+id/tvNama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/textView2"
android:text="TextView"
android:textColor="#8b7b8b"
android:textStyle="italic" />
<TextView
android:id="@+id/tvTD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/tvNama"
android:text="Bahan"
android:textColor="#6e7b8b"
android:textStyle="bold" />
<TextView
android:id="@+id/tvBahan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/tvTD"
android:text="TextView"
android:textColor="#8b7b8b"
android:textStyle="italic" />
<TextView
android:id="@+id/tvK"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/tvBahan"
android:text="Cara Memasak"
android:textColor="#6e7b8b"
android:textStyle="bold" />
<TextView
android:id="@+id/tvCara"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/tvK"
android:text="TextView"
android:textColor="#8b7b8b"
android:textStyle="italic" />
</LinearLayout>

</ScrollView>
</RelativeLayout>

danclassdarilayoutresep.xmldiatasuntukmemastikanparsingdari
databasepadalayoutresep.xmladapadaDB_Parse.java
package id.creatorb.resep;
import
import
import
import
import
import
import

android.app.Activity;
android.content.Intent;
android.os.Bundle;
android.widget.Gallery;
android.widget.ImageSwitcher;
android.widget.ImageView;
android.widget.TextView;

public class DB_Parse extends Activity {


ImageView Im;
TextView tv_nama, tv_bahan, tv_cara, id;
Gallery gallery;
ImageSwitcher imageSwitcher;
Integer[] imageIDs = new Integer[3];
int msg_im;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.resep);
Intent iIdentifikasi = getIntent();
msg_im = iIdentifikasi.getIntExtra("dataIM", 0);
String msg_nama = iIdentifikasi.getStringExtra("dataNama");
String msg_bahan = iIdentifikasi.getStringExtra("dataBahan");
String msg_cara = iIdentifikasi.getStringExtra("dataCara");
Im = (ImageView) findViewById(R.id.iv_detail);
tv_nama = (TextView) findViewById(R.id.tvNama);
tv_bahan = (TextView) findViewById(R.id.tvBahan);
tv_cara = (TextView) findViewById(R.id.tvCara);
Im.setImageResource(msg_im);
tv_nama.setText(msg_nama);
tv_bahan.setText(msg_bahan);
tv_cara.setText(msg_cara);
}

Tampilannyaakantampaksepertiini

Okkay,kiniandabisamembuataplikasiresepmasakanandasendiri
denganmudahdansimple.Untukpemahamanlebihlanjutmengenaikonsep
dariaplikasidiatassilahkanmelihatsourcecodeyangtelah
disediakan.

Vous aimerez peut-être aussi