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
<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 id.creatorb.resep.Task.TaskFinishedListener;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ProgressBar;
@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.
}
dalamclassSplashbemelakukanextendsdenganTaskFinishedListener
dimanaactivitytersebutadapadaclassTaskberikut.
Task.java
package id.creatorb.resep;
import android.os.AsyncTask;
import android.util.Log;
import android.widget.ProgressBar;
// 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;
@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;
}
@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 android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.view.View;
import android.widget.AdapterView;
import android.widget.EditText;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.SimpleCursorAdapter;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
@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);
try {
//select dari database resep, menampilkan nya secara urut sesuai abjad
cursor = db.rawQuery("SELECT * FROM resep ORDER BY nama ASC",
null);
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",
null);
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);
} catch (Exception e) {
e.printStackTrace();
}
}
}
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
<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 android.content.ContentValues;
import android.content.Context;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;
@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);
danuntukpencariandanpencocokanmasingmasingstringdan
ditampilkankeseluruhan(lengkap)itemyangadatidaksepertidi
main.xmlyangmemangfungsinyasebagaithumbnail.Semuanyaadapada
resep.xmlyangmenampilkanimagepadaposisitopdalamlayoutdan
beberapapalettesepertiscrollviewuntukmemudahkancontentdalam
bentukdinamis/responsifdanlaindiantaranyaadalahTextView.
Resep.xml
<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 android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.TextView;
Okkay,kiniandabisamembuataplikasiresepmasakanandasendiri
denganmudahdansimple.Untukpemahamanlebihlanjutmengenaikonsep
dariaplikasidiatassilahkanmelihatsourcecodeyangtelah
disediakan.