BAB 4: HTTP CONNECTION

(1)

www.aplysit.com | FB Bandung: Aplysit Bandung | FB Medan: AplysIT Medan | 1

BAB 4: HTTP CONNECTION

Aplikasi yang dibangun pada Android sering sekali diperuntukkan

agar terhubung langsung dengan internet, misalnya untuk

menjelajah internet, kirim mengirim email, atau menampilkan isi

suatu situs berita lewat RSS. Pembahasan selanjutnya adalah

menghubungkan aplikasi Android dengan initernet dengan

menggunakan hppt connection.

Proyek kedelapan berikut ini adalah http connection, di sini Anda

akan belajar bagaimana membuat aplikasi terhubung dengan

internet

untuk

mendownload

gambar

dan

teks,

serta

menggunakan rss.

MINI CASE 1.

Koneksi HTTP

Step 1

(2)

Step 2

Kemudian akan muncul sebuah kotak dialog New, dan pilihlah

File » Android Project seperti gambar berikut:

Lalu klik Next >

Step 3

Lalu akan dimunculkan jendela New Android Project. Isikan

seluruh fieldnya seperti gambar berikut:

(3)

Lalu klik Finish.

(4)

Step 4

Lalu pada bagian kiri yaitu panel Package, klik kanan pada

proyek

http_connection » Run As » 2 Android Application seperti

pada gambar berikut:

Step 5

Tunggulah beberapa saat lamanya, dan sebagai hasil akhir akan

ditampilan emulator Android seperti gambar berikut ini:

(5)

Karena kita hanya ingin membuktikan bahwa proyek tersebut

akan bisa dijalankan, maka hingga pada langkah ini kita sudah

yakin bahwa proyek tersebut dapat dijalankan. Tutuplah

emulator Android dengan cara melakukan klik tanda X di pojok

kanan atas.

Step 6

Lakukan extend seluruh file proyek hingga mendapatkan

AndroidManifest.xml, dengan cara melakukan klik pada tAnda

sehingga diberikan hasil seperti gambar berikut.

(6)

Step 7

Karena aplikasi akan menggunakan internet maka pada

AndroidManifest.xml akan ditambahkan permission. Pada panel

Manifest, klik gAnda Androidmanifest.xml seperti pada gambar

berikut:

(7)

Step 8

Lalu modifikasi source code pada AndroidManifest.xml menjadi

seperti berikut:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:Android="http://schemas.Android.com/apk/res/Android" package="www.ivan.siregar.biz" Android:versionCode="1" Android:versionName="1.0"> <uses-permission Android:name="Android.permission.INTERNET" />

<application Android:icon="@drawable/icon"

Android:label="@string/app_name">

<activity Android:name=".http_connection"

Android:label="@string/app_name"> <intent-filter> <action Android:name="Android.intent.action.MAIN" /> <category Android:name="Android.intent.category.LAUNCHER" /> </intent-filter> </activity>

(8)

www.aplysit.com | FB Bandung: Aplysit Bandung | FB Medan: AplysIT Medan | 8 23 24 25 26 </application> <uses-sdk Android:minSdkVersion="7" /> </manifest>

Yang menjadi hal penting untuk dipahami adalah baris 8-9 yang

adalah permission code untuk mengakses internet. Lalu jangan

lupa menyimpan hasil modifikasi dengan cara menekan tombol

CTRL+S

Step 9

Pastikan bahwa hingga saat ini proyek yang dikerjakan dapat

dijalankan dengan baik. Klik kanan pada

http_connection »

Run As » 2 Android Application lalu akan dihasilkan emulator

Android. Lalu tutuplah emulator tersebut, dan lanjutkan ke

langkah berikut.

Step 10

Pada proyek kali ini kita perlu merubah kode pada main.xml.

Pilih main.xml pada pilihan Views.

(9)

Step 11

Modifikasi source code pada main.xml menjadi seperti berikut:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<?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" > <ImageView Android:id="@+id/img" Android:layout_width="wrap_content" Android:layout_height="wrap_content" Android:layout_gravity="center" /> <TextView Android:id="@+id/text" Android:textStyle="bold" Android:layout_width="wrap_content" Android:layout_height="wrap_content" /> </LinearLayout>

Bagian yang dimodifikasi terdapat pada baris yang dicetak tebal,

yaitu baris 8-20. Kode pada baris 12 adalah posisi untuk

meletakkan gambar.

Baris 15-20 juga perlu dimodifikasi sedikit sehingga menjadi

seperti contoh tersebut.

Step 12

Lakukan perubahan kode program. Caranya pada panel Package,

klik http_connection.java lalu modifikasi isinya sehingga menjadi

seperti kode sumber berikut:

(10)

www.aplysit.com | FB Bandung: Aplysit Bandung | FB Medan: AplysIT Medan | 10 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL; import java.net.URLConnection; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.parsers.ParserConfigurationException; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.Node; import org.w3c.dom.NodeList; import org.xml.sax.SAXException; import Android.app.Activity; import Android.graphics.Bitmap; import Android.graphics.BitmapFactory; import Android.os.Bundle; import Android.widget.ImageView; import Android.widget.TextView; import Android.widget.Toast;

public class http_connection extends Activity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Bitmap bitmap = DownloadImage("http://static.technorati.com/09/12/13/2291/Android.jpg"); ImageView img = (ImageView) findViewById(R.id.img);

img.setImageBitmap(bitmap);

}

private InputStream OpenHttpConnection(String urlString) throws IOException

{

InputStream in = null;

int response = -1;

URL url = new URL(urlString);

URLConnection conn = url.openConnection();

if (!(conn instanceof HttpURLConnection))

throw new IOException("Not an HTTP connection");

try{

HttpURLConnection httpConn = (HttpURLConnection) conn;

httpConn.setAllowUserInteraction(false);

httpConn.setInstanceFollowRedirects(true);

(11)

www.aplysit.com | FB Bandung: Aplysit Bandung | FB Medan: AplysIT Medan | 11 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 httpConn.connect(); response = httpConn.getResponseCode();

if (response == HttpURLConnection.HTTP_OK) {

in = httpConn.getInputStream(); }

}

catch (Exception ex)

{

throw new IOException("Error connecting");

}

return in;

}

private Bitmap DownloadImage(String URL) {

Bitmap bitmap = null;

try {

in = OpenHttpConnection(URL);

bitmap = BitmapFactory.decodeStream(in); in.close();

} catch (IOException e1) {

// TODO Auto-generated catch block

e1.printStackTrace(); }

return bitmap;

} }

Disini kita membuat class OpenHttpConnection pada baris 44-73

untuk menghubungkan ke URl server, sedangkan pada baris

75-89 adalah class untuk mendownload gambar dari internet.

Kali ini kita akan mencoba mendownload gambar dari internet

maka perlu ditambah kode seperti pada baris 37-40.

Lalu simpan hasil modifikasi dengan CTRL+S

Tips:

Jika Anda lupa melakukan import library yang terdapat pada

bagian atas source code pada baris 3-26, maka pada area kerja

tekan tombol CTRL+SHIFT+O dan sebagai hasilnya, pada bagian

atas untuk perintah import secara otomatis ditambahkan

seluruh library yang dibutuhkan. Jika Anda ingin mencoba,

hapus

satu

baris

perintah

import,

lalu

tekan

tombol

CTRL+SHIFT+O,

maka

yang

telah

dihapus

tadi

akan

ditambahkan secara otomatis.

(12)

Step 13

Klik kanan pada

http_connection » Run As » 2 Android

Application lalu akan dihasilkan emulator Android, seperti

gambar berikut ini.

Klik tombol MENU dan pada screen akan ditampilkan hasil

proyek seperti gambar berikut ini. Jika halaman kosong coba klik

tAnda return sehingga Anda akan masuk kembali pada aplikasi

http_connection untuk mengulang. Jangan lupa komputer Anda

harus tersambung ke internet dulu.

(13)

(14)

Pada contoh tersebut, terlihat logo Android berhasil didownload

dari

http://schemas.Android.com/apk/res/Android dan ditampilkan

pada screen.

Step 14

Sekarang kita akan mencoba mendownload text, buka kembali

http_connection.java Anda dan tambahkan kode seperti ini:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

private String DownloadText(String URL) {

int BUFFER_SIZE = 2000;

try {

e1.printStackTrace(); return "";

}

InputStreamReader isr = new InputStreamReader(in);

int charRead;

(15)

www.aplysit.com | FB Bandung: Aplysit Bandung | FB Medan: AplysIT Medan | 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

char[] inputBuffer = new char[BUFFER_SIZE];

try {

while ((charRead = isr.read(inputBuffer))>0)

{

//---convert the chars to a

String readString =

String.copyValueOf(inputBuffer, 0, charRead);

str += readString;

inputBuffer = new char[BUFFER_SIZE];

}

in.close();

} catch (IOException e) {

e.printStackTrace(); return ""; } return str; } }

Step 15

Sedangkan

pada

event

OnCreate()

di

dalam

http_connection.java tambahkan kode seperti ini:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); /*Bitmap bitmap = DownloadImage("http://static.technorati.com/09/12/13/2291/Android.jpg"); ImageView img = (ImageView) findViewById(R.id.img);

img.setImageBitmap(bitmap); */

String str =

DownloadText("http://www.bolanews.com/index.php/feed/index.1.rss");

TextView txt = (TextView) findViewById(R.id.text);

txt.setText(str); }

(16)

Step 16

Klik kanan pada

http_connection » Run As » 2 Android

Application lalu akan dihasilkan emulator Android, seperti

gambar berikut ini.

Klik tombol MENU dan pada screen akan ditampilkan hasil

proyek seperti gambar berikut ini. Jika halaman kosong coba klik

tAnda return dan masuk kembali pada aplikasi http_connection

untuk mengulang. Sekali lagi, jangan lupa komputer Anda telah

tersambung ke internet

(17)

(18)

Step 17

Pada step sebelumnya tadi, Anda sudah mendownload text yang

sesungguhnya

adalah

file

rss

yang

terdapat

pada

http://www.bolanews.com/index.php/feed/index.1.rss

yang

dapat

diparse menjadi suatu berita namun belum dapat dibaca.

Sekarang Anda akan melakukan modifikasi sedikit sehingga

berita yang diterima dapat dibaca. Untuk melakukannya

tambahkan kode berikut pada http_connection.java Anda

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

private void DownloadRSS(String URL) {

try {

Document doc = null;

DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance(); DocumentBuilder db; try { db = dbf.newDocumentBuilder(); doc = db.parse(in); } catch (ParserConfigurationException e) {

e.printStackTrace();

} catch (SAXException e) {

(19)

www.aplysit.com | FB Bandung: Aplysit Bandung | FB Medan: AplysIT Medan | 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 } doc.getDocumentElement().normalize();

//---mengambil semua item

NodeList itemNodes =

doc.getElementsByTagName("item");

String strTitle = "";

for (int i = 0; i < itemNodes.getLength(); i++) {

Node itemNode = itemNodes.item(i);

if (itemNode.getNodeType() == Node.ELEMENT_NODE)

{

//---merubah Node menjadi

Element itemElement = (Element) itemNode;

//---mengambil semua <title> element dibawah

<item> // NodeList titleNodes = (itemElement).getElementsByTagName("title");

// merubah Node menjadi Element

Element titleElement = (Element) titleNodes.item(0);

//---mengambil semua sub Node di bawah

<title>

NodeList textNodes =

((Node) titleElement).getChildNodes();

//---mengambil semua teks pada <title>

strTitle = ((Node) textNodes.item(0)).getNodeValue();

//---memperlihatkan judul

Toast.makeText(getBaseContext(),strTitle,

Toast.LENGTH_SHORT).show();

} }

e1.printStackTrace(); }

Step 18

Sedangkan

pada

event

OnCreate()

di

dalam

http_connection.java rubah dan tambahkan kode seperti ini:

(20)

www.aplysit.com | FB Bandung: Aplysit Bandung | FB Medan: AplysIT Medan | 20 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 { super.onCreate(savedInstanceState); setContentView(R.layout.main); /*Bitmap bitmap = DownloadImage("http://static.technorati.com/09/12/13/2291/Android.jpg"); ImageView img = (ImageView) findViewById(R.id.img);

img.setImageBitmap(bitmap);

String str =

DownloadText("http://www.bolanews.com/index.php/feed/index.1.rss"); TextView txt = (TextView) findViewById(R.id.text);