Selasa, 28 Oktober 2014

Widget: TabHost

TabHost merupakan menu dengan tampilan secara horizontal. Maximal menu yang akan tampil pada TabHost adalah 5 buah. Jika melebihi dari 5 tab, sebaiknya kombinasikan dengan ListView, silakan lihat Widget: Spinner. Struktur dari TabHost sebagai berikut.

Dalam satu TabHost, terdapat maximal satu TabWidget dengan android:id=@android:id/tabs. Kemudian, didalam TabWidget tersebut terdapat maximal satu FrameLayout dengan android:id=@android:id/tabcontent. Nah, didalam FrameLayout tersebutlah bisa diletakkan sebanyak mungkin View sesuai dengan kebutuhan. Berikut langkah pembuatannya.
Buat file layout dengan nama "activity_tab.xml" pada folder res>layout.
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tabHost1">
    <TabWidget
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@android:id/tabs">       
    </TabWidget>
    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@android:id/tabcontent">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tab1"
            android:orientation="vertical"
            android:paddingTop="60px">
            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/gambar">               
            </ImageView>           
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/tab2"
            android:orientation="vertical"
            android:paddingTop="60px">
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="100px"
                android:text="this is tab 2"
                android:id="@+id/txt2">               
            </TextView>                           
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/tab3"
            android:orientation="vertical"
            android:paddingTop="60px">
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="100px"
                android:text="this is tab 3"
                android:id="@+id/txt3">               
            </TextView>                           
        </LinearLayout>       
    </FrameLayout>
</TabHost>  
 

Perhatikan bagian ImageView terdapat android:src="@drawable/gambar". Skenarionya, ketika klik TAB 1 akan tampil gambar seperti yang tersimpan pada folder res>drawable. Jadi Anda harus membuat folder baru terlebih dahulu pada folder res dengan nama "drawable". Kemudian paste file dengan nama "gambar.png" misalnya, pada folder drawable tersebut.

Selanjutnya, buat file java dengan nama "Tab.java" pada folder src.
package com.example.contoh;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
public class Tab extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab);
        TabHost tabHost = (TabHost) findViewById(R.id.tabHost1);
        tabHost.setup();       
        TabSpec tabSpec1 = tabHost.newTabSpec("Tab 1");
        tabSpec1.setContent(R.id.tab1);
        tabSpec1.setIndicator("Tab 1");
        TabSpec tabSpec2 = tabHost.newTabSpec("Tab 2");
        tabSpec2.setContent(R.id.tab2);
        tabSpec2.setIndicator("Tab 2");
        TabSpec tabSpec3 = tabHost.newTabSpec("Tab 3");
        tabSpec3.setContent(R.id.tab3);
        tabSpec3.setIndicator("Tab 3");
        tabHost.addTab(tabSpec1);
        tabHost.addTab(tabSpec2);
        tabHost.addTab(tabSpec3);
    }
}


Terakhir, deklarasikan kelas java yang akan dipanggil untuk di-running pada file AndroidManifest.xml.
<activity
            android:name="com.example.contoh.Tab"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>


Berikut tampilannya.

Widget: Spinner

Spinner ini seperti contoh widget Kotak Dialog dengan isian array atau list view, silakan lihat menu Panggil List Dialog. Jadi, Spinner adalah list view dalam bentuk pesan. Berikut langkah pembuatannya.
Buat file layout dengan nama "activity_spinner.xml" pada folder res>layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TextView
        android:id="@+id/selection"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />
    <Spinner android:id="@+id/spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:drawSelectorOnTop="true"
    />
</LinearLayout>


Selanjutnya, buat file java dengan nama "SpinnerWidget.java" pada folder src.
package com.example.contoh;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.TextView;
public class SpinnerWidget extends Activity implements OnItemSelectedListener {
    TextView selection;   
    String[] items={"Aceh", "Sumatera Utara", "Sumatera Barat", "Riau", "Jambi",
            "Sumatera Selatan", "Bengkulu", "Lampung", "Bangka Belitung", "Kepulauan Riau",
            "Jakarta", "Jawa Barat", "Jawa Tengah", "Yogyakarta", "JawaTimur",
            "Banten", "Bali", "Nusa Tenggara Barat", "Nusa Tenggara Timur", "Kalimantan Barat",
            "Kalimantan Tengah", "Kalimantan Selatan", "Kalimantan Timur", "Sulawesi Utara",
            "Sulawesi Tengah","SulawesiSelatan","Sulawesi Tenggara","Gorontalo","Sulawesi Barat",
            "Maluku","MalukuUtara","PapuaBarat","Papua"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_spinner);
        selection = (TextView) findViewById(R.id.selection);
        Spinner spin = (Spinner) findViewById(R.id.spinner);
        spin.setOnItemSelectedListener(this);
        ArrayAdapter<String>aa = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item,items);
        aa.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spin.setAdapter(aa);
    }
    public void onItemSelected(AdapterView<?> parent, View v, int position, long id) {
        selection.setText("Pilihan Anda: "+items[position]);
    }
    public void onNothingSelected(AdapterView<?> parent) {
        selection.setText("");
    }
}


Terkahir, deklarasikan file java yang akan dipanggil untuk di-running pada file AndroidManifest.xml.
<activity
            android:name="com.example.contoh.SpinnerWidget"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>


Berikut tampilannya.

Widget: Picker

Dalam android, picker sering dimanfaatkan untuk melakukan setting tanggal dan jam. Berikut langkah pembuatannya.
Buat file layout dengan nama "activity_picker.xml" pada folder res>layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView android:layout_width="fill_parent"
        android:layout_height="wrap_content"        
        android:id="@+id/dateAndTime"/>
    <Button android:text="Set the Date"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/dayBtn">       
    </Button>
    <Button android:text="Set the Time"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/timeBtn">       
    </Button>
</LinearLayout>


Selanjutnya, buat file java dengan nama "Picker.java" pada folder src.
package com.example.contoh;
import java.text.DateFormat;
import java.util.Calendar;
import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TextView;
import android.widget.TimePicker;
public class Picker extends Activity implements OnClickListener{
    DateFormat fmtDateAndTime = DateFormat.getDateTimeInstance();
    TextView dateAndTimeLabel;
    Calendar dateAndTime = Calendar.getInstance();
    DatePickerDialog.OnDateSetListener d = new DatePickerDialog.OnDateSetListener() {
        @Override
        public void onDateSet(DatePicker view, int year, int month, int day) {
            // TODO Auto-generated method stub
            dateAndTime.set(Calendar.YEAR, year);
            dateAndTime.set(Calendar.MONTH, month);
            dateAndTime.set(Calendar.DAY_OF_MONTH, day);
            updateLabel();
        }
    };
    TimePickerDialog.OnTimeSetListener t = new TimePickerDialog.OnTimeSetListener() {
        @Override
        public void onTimeSet(TimePicker view, int jam, int menit) {
            // TODO Auto-generated method stub
            dateAndTime.set(Calendar.HOUR_OF_DAY, jam);
            dateAndTime.set(Calendar.MINUTE, menit);
            updateLabel();
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_picker);
        Button dayBtn = (Button) findViewById(R.id.dayBtn);
        dayBtn.setOnClickListener(this);
        Button timeBtn = (Button) findViewById(R.id.timeBtn);
        timeBtn.setOnClickListener(this);
        dateAndTimeLabel = (TextView) findViewById(R.id.dateAndTime);
        updateLabel();
    }
    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
            case R.id.dayBtn: settingTanggal(); break;
            case R.id.timeBtn: setJam(); break;
        }
    }
    private void updateLabel() {
        dateAndTimeLabel.setText( fmtDateAndTime.format(dateAndTime.getTime()));
    }
    private void settingTanggal() {
        new DatePickerDialog(Picker.this, d, dateAndTime.get(Calendar.YEAR), dateAndTime.get(Calendar.MONTH), dateAndTime.get(Calendar.DAY_OF_MONTH)).show();
    }
    private void setJam() {
        new TimePickerDialog(Picker.this, t, dateAndTime.get(Calendar.HOUR_OF_DAY), dateAndTime.get(Calendar.MINUTE), true).show();
    }
      
}


Terakhir, tambahkan deklarasi file java yang akan di-running pada file AndroidManifest.xml.
<activity
            android:name="com.example.contoh.Picker"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>


Berikut tampilannya.


Widget: Kotak Dialog

Kotak dialog merupakan sarana interaktif antar user dengan aplikasi. Skenarionya, ketika klik menu Keluar Aplikasi, akan tampil pesan "Apakah Kamu Benar-Benari Ingin Keluar Aplikasi" dengan pilihan "Iya atau Tidak". Berikut langkah pembuatannya.
Buat file layout dengan nama "activity_kotak_dialog.xml" pada folder res>layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button android:layout_width="fill_parent"
        android:id="@+id/toastBtn"
        android:layout_height="wrap_content"
        android:text="@string/toastTextBtn">       
    </Button>
    <Button android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listDialogBtn"
        android:text="@string/listDialogTextBtn">       
    </Button>
    <Button android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/exitTextBtn"
        android:id="@+id/exitBtn">       
    </Button>
</LinearLayout>


Buat file java dengan nama "KotakDialog.java" pada folder src.
package com.example.contoh;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;
public class KotakDialog extends Activity implements OnClickListener {
    Button pesanToast;
    Button keluar;
    Button tampilList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_kotak_dialog);
        pesanToast = (Button) findViewById(R.id.toastBtn);
        pesanToast.setOnClickListener(this);
        keluar = (Button) findViewById(R.id.exitBtn);
        keluar.setOnClickListener(this);
        tampilList = (Button)
        findViewById(R.id.listDialogBtn);
        tampilList.setOnClickListener(this);
    }
    public void onClick(View clicked) {
        switch (clicked.getId()) {
            case R.id.listDialogBtn: munculListDialog(); break;       
            case R.id.toastBtn: Toast.makeText(this, "Kamu memilih Toast", Toast.LENGTH_SHORT).show(); break;
            case R.id.exitBtn: exit(); break;
        }
    }
   private void munculListDialog() {
        // TODO Auto-generated method stub
        final CharSequence[] items = { "Es Teh", "Es Jeruk", "Lemon Squash","Soft Drink" };
        AlertDialog.Builder kk = new AlertDialog.Builder(this);
        kk.setTitle("Pilih Minuman");
        kk.setItems(items, new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int item) {
                Toast.makeText(getApplicationContext(), items[item], Toast.LENGTH_SHORT).show();
                }
            }).show();
    }
    private void exit() {
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setMessage("Apakah Kamu Benar-Benar ingin keluar?")
        .setCancelable(false)
        .setPositiveButton("Ya", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int id) {
                KotakDialog.this.finish();
                }
            })
            .setNegativeButton("Tidak",new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int arg1) {
                    // TODO Auto-generated method stub
                    dialog.cancel();
        }   
        }).show();
    }   
}



Tambahkan source code berikut pada file "strings.xml" yang tersimpan di folder res>values.
 <string name="toastTextBtn">Panggil Toast</string>
    <string name="exitTextBtn">Keluar Applikasi</string>
    <string name="listDialogTextBtn">Panggil List Dialog</string>


Terakhir, aktifkan kelas java yang akan dipanggil untuk di-running pada file AndroidManifest.xml.
<activity
            android:name="com.example.contoh.KotakDialog"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>


Berikut tampilannya.

Widget: CheckBox & RadioButton

CheckBox adalah salah satu widget berjenis optional, artinya 2 atau lebih item bisa dipilih secara bersamaan. Sebaliknya, RadioButton hanya menerima satu input item saja. Skenarionya, anda harus memilih salah satu tipe kopi dengan bertipe RadioButton dan silakan menambahkan pilihan lain (gula, kopi) dengan bertipe CheckBox. Setelah diklik tombol next, maka akan tampil hasil pilihan di atas. Berikut langkah pembuatannya.
Buat file layout dengan nama "activity_check_radio.xml" pada folder res>layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TextView
        android:text="pilihlah tipe kopi yang anda suka"
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </TextView>
    <RadioGroup
         android:id="@+id/radioGroup1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content">
    <RadioButton
        android:layout_height="wrap_content"
        android:id="@+id/radio1"
        android:layout_width="wrap_content"
        android:text="luwak" android:checked="true">       
    </RadioButton>
    <RadioButton
        android:layout_height="wrap_content"
        android:id="@+id/radio2"
        android:layout_width="wrap_content"
        android:text="ekspresso">       
    </RadioButton>
    <RadioButton
        android:layout_height="wrap_content"
        android:id="@+id/radio3"
        android:layout_width="wrap_content"
        android:text="colombian">       
    </RadioButton>  
    </RadioGroup>
    <TextView
        android:text="apa yang ingin anda tambahkan"
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </TextView>
    <CheckBox
        android:text="gula"
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </CheckBox>
    <CheckBox
        android:text="kopi"
        android:id="@+id/checkBox2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </CheckBox>   
    <Button
        android:text="next"
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </Button>
    <TextView
        android:text=""
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </TextView>
</LinearLayout>


Selanjutnya, buat file java dengan nama "CheckRadio.java" pada folder src.
package com.example.contoh;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
public class CheckRadio extends Activity {
    RadioGroup rg1;
    RadioButton rb1, rb2, rb3;
    CheckBox cb1, cb2;
    Button b1;
    TextView t1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_check_radio);
        rg1 = (RadioGroup) findViewById(R.id.radioGroup1);
        rb1 = (RadioButton) findViewById(R.id.radio1);
        rb2 = (RadioButton) findViewById(R.id.radio2);
        rb3 = (RadioButton) findViewById(R.id.radio3);
        cb1 = (CheckBox) findViewById(R.id.checkBox1);
        cb2 = (CheckBox) findViewById(R.id.checkBox2);
        b1 = (Button) findViewById(R.id.button1);
        t1 = (TextView) findViewById(R.id.textView3);
        b1.setOnClickListener(new klik());
    }   
    class klik implements OnClickListener{
        public void onClick(View v){
            String msg1 = "", msg2 = "";
            if(rb1.isChecked())
                msg1 = msg1 + "luwak";
            if(rb2.isChecked())
                msg1 = msg1 + "ekspresso";
            if(rb3.isChecked())
                msg1 = msg1 + "colombian";
            t1.append("kopi yang anda pilih: "+msg1);
            if(cb1.isChecked())
                msg2 = msg2 + " gula";
            if(cb2.isChecked())
                msg2 = msg2 + " kopi";
            t1.append(" dan yang anda tambahkan adalah"+msg2);
        }
    }
}

 
Terakhir, tambahkan nama kelas java yang akan dipanggil untuk di-running pada file AndroidManifest.xml.
 <activity
            android:name="com.example.contoh.CheckRadio"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>


Berikut tampilannya.


Software Requirement Specification (SRS)

Silakan download file SRS.pdf

Software Development Life Cycle (SDLC)

Silakan download file SDLC.pdf

Minggu, 26 Oktober 2014

Widget: AutoComplete

Skenarionya, disediakan sebuah EditText sebagai masukkan. Ketika mengetik minimal 3 huruf, secara otomatis akan muncul rekomendasi kata-kata yang berawalan dari 3 huruf tersebut. Caranya sebagai berikkut. Buat file layout dengan nama "activity_auto_complete.xml"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:text="@string/perintah">       
    </TextView>
    <AutoCompleteTextView android:id="@+id/edit"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:completionThreshold="3" />
    <TextView android:layout_width="fill_parent"
        android:text="TextView"
        android:layout_height="wrap_content"
        android:id="@+id/hasil">           
    </TextView>
</LinearLayout>


Buat file java dengan nama "AutoComplete.java"
package com.example.contoh;

import android.app.Activity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.TextView;

public class AutoComplete extends Activity implements TextWatcher{
    TextView hasil;
    AutoCompleteTextView edit;
    String[] item = { "Merbabu", "Merapi", "Lawu", "Rinjani","Sumbing","Sindoro", "Krakatau", "Selat Sunda", "SelatBali","Selat Malaka","Kalimantan", "Sulawesi", "Jawa" };
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_auto_complete);
        hasil = (TextView) findViewById(R.id.hasil);
        edit = (AutoCompleteTextView) findViewById(R.id.edit);
        edit.addTextChangedListener(this);
        edit.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_dropdown_item_1line, item));
        }
   
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        hasil.setText(edit.getText());           
    }
   
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {       
    }
   
    public void afterTextChanged(Editable s) {       
    }
}


Buka file "strings.xml" pada folder res>values
tambahkan perintah
<string name="perintah">Masukkan minimal 3 huruf</string>

Terakhir, buka file AndroidManifest.xml
tambahkan
<activity
            android:name="com.example.contoh.AutoComplete"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>


Berikut tampilannya

Fase Inception: Requirements

Silakan download file Requrements.pdf

Fase Inception: Business Modeling

Silakan download file Business Modeling.pdf

Kamis, 16 Oktober 2014

Contoh Membuat Projek Baru Client-Server Android


Gambaran umum aplikasi client-server android sebagai berikut.
Gambar di atas merupakan gambaran umum Aplikasi Toko Online yang terdiri dari terdiri dua bagian. Pertama sisi server berisi database dan file php. Kedua sisi client berisi file java, yakni aplikasi berbasis android yang diakses menggunakan ponsel android. Proses komunikasi client-server sebagai berikut.

  1. Client meminta data ke server melalui alamat URL yang dideklarasikan pada aplikasi android, file java.
  2. Server melakukan Query kepada database. 
  3. Hasil query disusun sesuai dengan format JSON di dalam file php.
  4. Client melakukan parsing dari dokumen json.
  5. Hasil parsing selanjutnya ditampilkan pada layout XML.
 Untuk memulai pembuatan aplikasi, program-program berikut harus ter-install dikomputer.

 Berikut langkah pembuatan sistem.
 A. Database (MySql)
    1. Buka aplikasi browser, misal Mozilla Firefox. Ketik “localhost/phpmyadmin/” pada url. Kemudian klik menu Databases.  

    2. Ketikkan nama database, misal dbcontoh. Kemudian klik tombol Create. 

    3. Pada (Recent tables), pilih nama database yang telah dibuat. Klik menu SQL, paste perintah query, kemudian klik tombol Go. 

    Untuk dapat membuat dan mengakses database di atas, pastikan service Apache dan MySQL dari XAMPP telah aktif. 
    1. Buka aplikasi xampp-control.exe 

    2. Klik tombol Start untuk service Apache dan MySQL 

 
 B. Program Server (Php)
    1. Buka Explorer → Local Disk (C) → xampp → htdocs. Kemudian buat folder dengan nama misal, contoh.

    2. Paste file PHP (silakan lihat penjelasan langkah pembuatan Menu Insert, Menu Update, Menu Delete, Menu Display). 
 
   
 C. Program Client (Java)
   1. Buka aplikasi eclipse yang tersimpan dalam folder adt-bundle-windows-x86_64-YYYYMMDD (tanggal instalasi program ADT Bundle). Buatlah project baru. Pada menu bar, klik menu File → New → Android Application Project.

    2. Masukkan informasi Application Name, Project Name, PackageName.

  3. Selanjutnya mulai melakukan konfigurasi proyek dari aplikasi. Perhatikan lokasi menyimpan file java ini. Silakan klik tombol Browse dan arahkan ke folder workspace Anda.

    4. Memilih jenis activity untuk aplikasi yang akan dibuat, pilih Blank Activity. 

    5. Terakhir, masukkan Activity Name, Layout Name, dan tipe navigasi. Untuk tipe navigasi, pilih None. Perhatikan nama activity dari setiap menu, misal untuk Menu Insert, isi Activity Name = “InsertActivity.java” dan Layout Name = “activity_insert.xml”. Lihat penjelasan setiap Menu (Insert, Update, Delete, Display
 
 

 D. Menu Insert, silakan lihat Contoh Menu Insert Client Server Android
 E. Menu Display, silakan lihat Contoh Menu Display Client Server Android
 F. Menu Delete, silakan lihat Contoh Menu Delete Client-Server Android
 G. Menu Update, silakan lihat Contoh Menu Update Client-Server Android
 H. Running Program
    Untuk melakukan running program, Anda harus membuat emulator terlebih dahulu.


      Setelah emulator dibuat, lakukan Start&Launc sebagai berikut.
      1. Klik menu bar Android Virtual Device Manager.

      2. Pilih emulator, dalam hal ini bernama HP. Kemudian klik tombol Start. 

      3. Klik tombol Launch 

      4. Geser icon kunci ke kanan layar emulator. 

Emulator telah siap. Selanjutnya klik kanan pada Contoh → Run As → Android Application



     

Selamat! Anda telah berhasil membuat aplikasi android.