web viewaplikasi berbasis web di android cukup banyak diminati dan dipelajari. ... berikut contoh...

16
Membuat Aplikasi Berbasis Web Di Device Android Mobile Oleh : M.octaviano Pratama Seperti yang telah kita ketahui bahwa media yang paling sering dikunjungi yaitu media online seperti website. Dengan menggunakan website, penyebaran informasi dari satu orang ke orang lainnya atau dari satu instansi ke instansi lainnya menjadi lebih cepat dan mudah. Untuk membuka website, dibutuhkan suatu perangkat hardware dengan web browser seperti Mozilla dan opera. Pada tahun 2000 hingga 2006 perangkat yang dapat mengakses website barulah computer. Hingga pada tahun 2009 perangkat mobile seperti handphone, PDA(Personal Data Assistant) dll yang dialihfungsikan yang asal mulanya hanya sebagai perangkat komunikasi telepon dan pesan singkat, sekarang menjadi perangkat multimedia seperti dapat mengakses kamera, internet, games,dll. Hingga pada tahun 2010 awal, perangkat mobile Android booming. Munculnya system operasi Froyo Android membuat persaingan perangkat mobile berbasis smartphone semakin ketat. Perangkat mobile android dapat digunakan sebagai alat komunikasi, multimedia, office, dsb. Khususnya pada bidang multimedia seperti mengakses internet, paling dicari di android. Aplikasi berbasis web di android cukup banyak diminati dan dipelajari. Untuk membuat aplikasi berbasis web di android, digunakan webview, yaitu sebuah User Interface(UI) yang khusus

Upload: vunhu

Post on 01-Feb-2018

227 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Web viewAplikasi berbasis web di android cukup banyak diminati dan dipelajari. ... Berikut contoh penggunaan webview di android : Pada gambar diatas,

Membuat Aplikasi Berbasis Web Di Device Android Mobile

Oleh : M.octaviano Pratama

Seperti yang telah kita ketahui bahwa media yang paling sering dikunjungi yaitu

media online seperti website. Dengan menggunakan website, penyebaran informasi dari satu

orang ke orang lainnya atau dari satu instansi ke instansi lainnya menjadi lebih cepat dan

mudah. Untuk membuka website, dibutuhkan suatu perangkat hardware dengan web browser

seperti Mozilla dan opera. Pada tahun 2000 hingga 2006 perangkat yang dapat mengakses

website barulah computer. Hingga pada tahun 2009 perangkat mobile seperti handphone,

PDA(Personal Data Assistant) dll yang dialihfungsikan yang asal mulanya hanya sebagai

perangkat komunikasi telepon dan pesan singkat, sekarang menjadi perangkat multimedia

seperti dapat mengakses kamera, internet, games,dll. Hingga pada tahun 2010 awal, perangkat

mobile Android booming. Munculnya system operasi Froyo Android membuat persaingan

perangkat mobile berbasis smartphone semakin ketat. Perangkat mobile android dapat

digunakan sebagai alat komunikasi, multimedia, office, dsb. Khususnya pada bidang multimedia

seperti mengakses internet, paling dicari di android. Aplikasi berbasis web di android cukup

banyak diminati dan dipelajari.

Untuk membuat aplikasi berbasis web di android, digunakan webview, yaitu

sebuah User Interface(UI) yang khusus menangani bidang web. Dengan menggunakan

webview, programmer dapat membuat aplikasi web ataupun hanya direct link saja. Berikut

contoh penggunaan webview di android :

Page 2: Web viewAplikasi berbasis web di android cukup banyak diminati dan dipelajari. ... Berikut contoh penggunaan webview di android : Pada gambar diatas,

Pada gambar diatas, tampak sekilas seperti form biasa, namun sebenarnya keseluruhan system

menggunakan system webview dengan script html. Berikut merupakan contoh programnya :

Perhatikan syntax diatas, variable script diisi dengan sintak dengan format HTML dan pada

sintax dibawah, variable script akan digunakan untuk mengimplementasikan kedalam webview

Keuntungan Menggunakan web di android dibandingkan dengan membuat web

di computer diantaranya :

Perangkat mobile digunakan oleh siapa saja, dan lebih banyak digunakan oleh

masyarakat ketimbang dengan computer sehingga device mobile lebih mempunyai

nilai jual yang tinggi

Page 3: Web viewAplikasi berbasis web di android cukup banyak diminati dan dipelajari. ... Berikut contoh penggunaan webview di android : Pada gambar diatas,

Terdapat beberapa forum di http://developer.android.com yang banyak menyediakan

beberapa materi seputar webview sehingga apabila programmer dan user bingung

dan kurang materi, maka dapat menanyakan kepada programmer dan user lain di

forum

Aplikasi berbasis mobile lebih ringan ketimbang aplikasi berbasis PC. Untuk masalah

database pun aplikasi mobile tergolong ringan

Aplikasi Web Berbasis Android

Website yang bersifat dapat menampung informasi dapat anda manfaatkan

untuk sistem informasi dengan bantuan Database. Bagi programmer yang terbiasa menggunakan

android untuk memprogram database, pastinya terbiasa dengan SQLite. Bagaimana menggantikan

fungsi SQLite pada android dengan DDMS MySQL? Pastinya dibutuhkan server side seperti PHP atau ASP

yang digunakan untuk mengakses database MySQL. Berikut ilustrasi projek yang akan dibuat :

Keterangan :

Device android digunakan untuk memberikan inputan berupa ‘nama, npm dan kelas’ ke server dengan

alamat www.tavgreen.com. Data yang telah di inputkan dikirim melalui php untuk kemudian disimpan

ke database mysql.Buatlah database pada mySQL anda dengan nama ‘android’ dengan field “nama, npm

dan kelas” seperti pada gambar sebagai berikut :

Page 4: Web viewAplikasi berbasis web di android cukup banyak diminati dan dipelajari. ... Berikut contoh penggunaan webview di android : Pada gambar diatas,

Buatlah file php dengan disimpan di folder htdocs android simpan.php:

Keterangan :

2 – 4 : Simpan nilai yang didapat dari metode ‘post’ dari android device ke variable $nama, $npm

dan $kelas.

5 : hubungkan database dengan hostname = ‘localhost’ , username = ‘root’ dan password kosong.

6 : memilih database yang akan digunakan, yaitu ‘android’

7 : string untuk insert data ke dalam database

8 : eksekusi query sehingga data benar-benar tersimpan ke database

Buatlah project android baru sebagai berikut dengan nama ‘guessmysql’:

Page 5: Web viewAplikasi berbasis web di android cukup banyak diminati dan dipelajari. ... Berikut contoh penggunaan webview di android : Pada gambar diatas,

Buatlah desain layout mobile device anda seperti berikut (terdiri atas 3 field dan 1 button) :

Page 6: Web viewAplikasi berbasis web di android cukup banyak diminati dan dipelajari. ... Berikut contoh penggunaan webview di android : Pada gambar diatas,

Buatlah file java seperti berikut

Page 7: Web viewAplikasi berbasis web di android cukup banyak diminati dan dipelajari. ... Berikut contoh penggunaan webview di android : Pada gambar diatas,

Tambahkan “uses permission” untuk mengakses Internet seperti berikut :

Buatlah file java dengan nama “CustomHttpClient” kemudian copy kan script berikut :

package guest.MySQL;

import java.io.BufferedReader;

import java.io.IOException;

import java.io.InputStreamReader;

import java.net.URI;

import java.util.ArrayList;

import org.apache.http.HttpResponse;

import org.apache.http.NameValuePair;

import org.apache.http.client.HttpClient;

Page 8: Web viewAplikasi berbasis web di android cukup banyak diminati dan dipelajari. ... Berikut contoh penggunaan webview di android : Pada gambar diatas,

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.conn.params.ConnManagerParams;

import org.apache.http.impl.client.DefaultHttpClient;

import org.apache.http.params.HttpConnectionParams;

import org.apache.http.params.HttpParams;

public class CustomHttpClient {

/** The time it takes for our client to timeout */

public static final int HTTP_TIMEOUT = 30 * 1000; // milliseconds

/** Single instance of our HttpClient */

private static HttpClient mHttpClient;

/**

* Get our single instance of our HttpClient object.

*

* @return an HttpClient object with connection parameters set

*/

private static HttpClient getHttpClient() {

if (mHttpClient == null) {

mHttpClient = new DefaultHttpClient();

final HttpParams params = mHttpClient.getParams();

Page 9: Web viewAplikasi berbasis web di android cukup banyak diminati dan dipelajari. ... Berikut contoh penggunaan webview di android : Pada gambar diatas,

HttpConnectionParams.setConnectionTimeout(params, HTTP_TIMEOUT);

HttpConnectionParams.setSoTimeout(params, HTTP_TIMEOUT);

ConnManagerParams.setTimeout(params, HTTP_TIMEOUT);

}

return mHttpClient;

}

/**

* Performs an HTTP Post request to the specified url with the

* specified parameters.

*

* @param url The web address to post the request to

* @param postParameters The parameters to send via the request

* @return The result of the request

* @throws Exception

*/

public static String executeHttpPost(String url, ArrayList<NameValuePair> postParameters) throws Exception {

BufferedReader in = null;

try {

HttpClient client = getHttpClient();

HttpPost request = new HttpPost(url);

UrlEncodedFormEntity formEntity = new UrlEncodedFormEntity(postParameters);

Page 10: Web viewAplikasi berbasis web di android cukup banyak diminati dan dipelajari. ... Berikut contoh penggunaan webview di android : Pada gambar diatas,

request.setEntity(formEntity);

HttpResponse response = client.execute(request);

in = new BufferedReader(new InputStreamReader(response.getEntity().getContent()));

StringBuffer sb = new StringBuffer("");

String line = "";

String NL = System.getProperty("line.separator");

while ((line = in.readLine()) != null) {

sb.append(line + NL);

}

in.close();

String result = sb.toString();

return result;

} finally {

if (in != null) {

try {

in.close();

} catch (IOException e) {

e.printStackTrace();

}

}

}

Page 11: Web viewAplikasi berbasis web di android cukup banyak diminati dan dipelajari. ... Berikut contoh penggunaan webview di android : Pada gambar diatas,

}

/**

* Performs an HTTP GET request to the specified url.

*

* @param url The web address to post the request to

* @return The result of the request

* @throws Exception

*/

public static String executeHttpGet(String url) throws Exception {

BufferedReader in = null;

try {

HttpClient client = getHttpClient();

HttpGet request = new HttpGet();

request.setURI(new URI(url));

HttpResponse response = client.execute(request);

in = new BufferedReader(new InputStreamReader(response.getEntity().getContent()));

StringBuffer sb = new StringBuffer("");

String line = "";

String NL = System.getProperty("line.separator");

while ((line = in.readLine()) != null) {

sb.append(line + NL);

Page 12: Web viewAplikasi berbasis web di android cukup banyak diminati dan dipelajari. ... Berikut contoh penggunaan webview di android : Pada gambar diatas,

}

in.close();

String result = sb.toString();

return result;

} finally {

if (in != null) {

try {

in.close();

} catch (IOException e) {

e.printStackTrace();

}

}

}

}

}

Uji Coba Program

Setelah semua script diketikan, maka jalankan program android anda sehingga akan menghasilkan user

interface seperti berikut :

Page 13: Web viewAplikasi berbasis web di android cukup banyak diminati dan dipelajari. ... Berikut contoh penggunaan webview di android : Pada gambar diatas,

Bukalah phpmyadmin dari browser, dan periksa apakah data yang di inputkan di mobile device telah

masuk ke dalam server di localhost anda seperti berikut :