Build Your Android App

Berhubung lagi booming akhir akhir ini, ayo kita utak atik buat aplikasi Android. cuman butuh skill di java aja koq :)

Create Your Own Game Using Unity

Kata siapa membuat game itu susah, asal ada kemauan untuk belajar membuat game itu gampang kok. Apalagi ada engine seperti unity ini

Belajar JSON yuk

Apa itu JSON? penasaran dengan fungsi dan cara menggunakannya? mari kita pelajari disini

Mushroom Farmer

Yuk belajar manajamen bisnis sambil bermain sebagai petani jamur. Tertarik? Cek Disini

HIMIT PENS

Menjadi bagian dari himpunan di kampus cukup menyenangkan. Banyak pengalaman yang bisa didapat dari kegiatan tersebut dan juga bisa menjadi sarana pengembangan diri.

Rabu, Juni 12, 2013

Ebook Learning To Be Great Presentator

image

yah abis gini mau semester akhir, yang pasti harus siap buat speaking nih kan sidang TA penuh dengan persentasi. Bagibagi mau share ebook lagi nih. Hasil karya bareng temen temen juga buat tugas matkul bahasa. Ebook ini isinya tentang cara cara gimana buat kita persentasi yang baik. Secara lah jaman sekarang kan udah jamannya orang bisa ngomong ga cuman bisa kerja aja wkwkwk.

Isi dari ebook ini antara lain introduction tentang persentasi, persiapan untuk persentasi, bagaimana cara membuat persentasi yang hebat dan bagaimana membawakan sebuah persentasi yang menarik. Semuanya terangkum secara lengkap, singkat jelas dan mudah dipahami di ebook ini. Kami sekelompok berusahan sebaiknya agar ebook yang kami hasilkan ini bisa bermanfaat bagi semuanya Open-mouthed smile.

Next jika ada ebook baru lagi akan diusahakan oleh bagibagi buat share secepatnya (mumpung lagi ketagihan nulis hehehe Be right back).

Here’s the download link

http://www.mediafire.com/view/?h441v4808fdeu54

Kamis, Juni 06, 2013

Desain Web Keren Dengan Twitter Bootstrap

twitter-bootstrap

Saat ini sudah cukup banyak web web bermunculan dengan desain HTML5 dan banyak diantara web web tersebut memiliki tampilan yang sangat menarik. Untuk itu tidak ada salahnya jika kita mulai beralih dari desain HTML4 ke HTML5. Banyak tool yang membantu kita dalam mendesain sebuah web, salah satunya yang cukup terkenal adalah Adobe Dreamweaver. Saat ini mulai versi CS5 telah mendukung support HTML5. Selain dreamweaver juga banyak tool tool open source lain yang bisa dicari di internet.

Namun, selain tool untuk desain tersebut terdapat hal lain yang membantu kita dalam mendesain web berbasis HTML5. yaitu CSS framework yang berupa building blocks untuk HTML5. Yang akan kita bahas disini adalah Twitter Bootstrao. Cukup tidak asing kan jika kita mendenganr nama twitter di depannya. Yup dengan Bootstrap ini kita bisa membuat desain web berbasis HTML5 yang menarik tanpa pemrogaman dari awal.

Penggunaannya sangat mudah, cukup copy paste fungsi yang ingin dipanggi ke template HTML5 anda. berikut akan saya contohkan penggunaan Bootstrap:

1. Download Twitter Bootstrap terlebih dahulu di alamat http://twitter.github.io/bootstrap/

2. Extract file tersebut dan taruh folder css,img dan js ke direktori index html web anda. Nantinya direktori web anda berisi file berikut:

image

3. buka index.html dengan web/text editor. disini saya menggunakan notepad++ namun anda bisa saja menggunakan dreamweaver,sublim,netbeans maupun tool lainnya.  Copy kode berikut ke index.html

<!DOCTYPE>
<html lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html" charset="utf-8">
        <title>My Web: This Is My Website</title>       
        <link rel="stylesheet" href="css/bootstrap.css" type="text/css" >
        <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" >
        <link rel="stylesheet" href="css/bootswatch.css" type="text/css" >
        <link rel="stylesheet" href="css/variables.css" type="text/css" >
    </head>
    <body>
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container" style="width: auto">
                        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        <a class="brand" href="#">My Web</a>
                        <div class="nav-collapse collapse" id="main-menu">
                            <ul class="nav">
                                <li class="active"><a href="index.html">Home</a></li>
                                <li><a rel="tooltip" href="tou.html" title="Know The Rules">Terms Of Use</a></li>
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="guide.html">User Guide</a></li>                               
                            </ul>                           
                            <ul class="nav pull-right">
                                <li><a href="signup.html">SignUp</a></li>
                                <li class="divider-vertical"></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Facebook</a></li>
                                        <li><a href="#">Twitter</a></li>
                                        <li><a href="login.html">Site Login</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div><!-- /.nav-collapse -->
                    </div>
                </div><!-- /navbar-inner -->
            </div><!-- /navbar -->
       <div class="container">

            <header class="row">
                <div class="span12">
                    <h4>This is the header</h4>
                </div>
            </header>
            <section class="row">
                <article class="span7">
                    <h2>Post your title here</h2>
                    <p>Create & Share your idea here for free</p>
                    <div class="controls">
                        <form class="well form-search">
                        <input type="text" id="input01" class="input-xlarge" placeholder="Your Event Name">
                        <button class="btn" type="submit">Create</button>
                        </form>
                    </div>
                </article>
                <aside class="span5">
                    <h3>What's Happening Now</h3>
                    <p>Good content items include blogrolls, featured news, Twitter updates, etc.</p>
                </aside>
            </section>
            <footer class="row">
                <div class="span12">
                    <h4>This is the footer</h4>
                </div>
            </footer>
        </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.smooth-scroll.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootswatch.js"></script>
    </body>
</html>

hasil tampilannya sebagai berikut

image

4. Karena Bootstrap merupakan building blocks anda cukup memanggi fungsi yang disediakan sesuai pada dokumentasinya di http://twitter.github.io/bootstrap/getting-started.html

nantinya anda tinggal memanggil tampilan yang diinginkan sesuai dengan class dan id yang tersedia pada CSS Bootstrap. Selamat berkreasi untuk mendesain web anda Open-mouthed smile. Jika ada pertanyaan bisa diskusi dengan saya via email di bagibagi23@gmail.com

Sabtu, Juni 01, 2013

Ebook Membuat Mini Photoshop dengan Visual Studio 2010

Cover Full

Kali ini bagibagi mau share ebook lagi nih, berhubung ada tugas kuliah pengolahan citra untuk ngebuat buku kumpulan project kuliah jadi sekalian aja share disini. Ebook ini berisi tutorial bagaimana untuk membangung sebuah mini photoshop dengan menggunakan visual studio 2010 berbasis bahasa pemrogaman C#.. Di dalamnya berisi source code dan hasil tampilan ketika dijalankan. Berbagai macam efek photoshop seperti brightness,contrast, gamma dan lain lain bisa kalian temukan cara membuatnya dalam ebook ini.

yah daripada disimpan juga kan lebih bermanfaat kalo di share ke orang lain Open-mouthed smile. Jadi buat siapapun yang berminat belajar pengolahan citra bisa unduh ni ebook secara gratis hehe. Tapi jangan dijual looo Steaming mad. karena it’s for non commercial use only. jadi tunggu apalagi deh yang butuh download klik aja link dibawah.

http://www.mediafire.com/view/?0ac8asmm2hnquo4

Jika ada pertanyaan mengenai isi ebook ini silahkan hubungi saya di bagibagi23@gmail.com, Salam Developer ^ ^

Sabtu, Maret 09, 2013

Horizontal Scroll View dengan ViewPager di Android

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvUdeFBB9pjMk9uCzJQFijTrs-kOOopJCRE0H3cr89LEys3OMx2hdIsG_CN7pFtZjFVlb4cK-Iwnoh0aHDeW71E5A-NIz1hv9zX-TTYx24G2L7BHqu_Ww40_WPJ6m3I3j-vgLEpNLL_c8/s1600/Logo_Android.jpg

Ketemu lagi nih di sesi tutorial Android, setelah dari kemarin ngebahas terus tentang akses data network dengan JSON di Android sekarang mari kita bahas lagi mengenai bagaimana membuat tampilan yang keren di Android. What? kenapa ngebahas tampilan sih? hehe, jangan salah sangka dulu. Meski cuman tampilan UI tapi penting loo buat aplikasi. Nah kebetulan Android kan Touch Screen jadi tampilan yang bagus tentu harus manfaatin Touch Screennya dong, tahu maksudnya? yap jadi efek seperti slide,swipe,scroll harus dimanfaatin dong. Eman klo cuman buat tombol tombol yang bisa di klik doang. hehe Open-mouthed smile

Nah berhubung ada tutorial bagus nih, akhirnya coba deh. Kali ini kita akan membahas untuk membuat Horizontal Scroll View. Fitur ini sering sekali digunakan di aplikasi aplikasi android yang beredar di pasaran. Sebenarnya sudah ada fitur bawaan layout dari Android untuk bisa melakukan Horizontal Scroll View. Seperti contoh xml layout dibawah ini.

<?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:orientation="vertical"
    android:background="@drawable/bg" >

   <HorizontalScrollView
        android:id="@+id/bottom"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:fadeScrollbars="false"
        android:scrollbars="none" >
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:padding="10dp" >
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textColor="#000"
                android:textStyle="bold"
                android:textSize="25dp"
                android:text="Page 1                                       "/>
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:textColor="#000"
                android:textSize="16dp"
                android:text="Page 1"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:layout_gravity="center"
            android:padding="10dp" >
                <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textColor="#000"
                android:textStyle="bold"
                android:textSize="25dp"
                android:text="Page 2"/>
            <TextView
                android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                android:textColor="#000"
                android:textSize="16dp"
                android:text="Page 2"/>
        </LinearLayout>
        </LinearLayout>
    </HorizontalScrollView>

</LinearLayout>

Wah ternyata gampang juga ya. Tapi yang akan kita implementasikan untuk tutorial kali ini bukan sesederhana itu hehe. Memang sih agak rumit, tapi setara dengan apa yang diberikan kok Smile. Kenapa sih kita tidak gunakan fitur bawaan layout Horizontal Scroll View saja? sebenarnya bukan masalah sih, cuman ya gitu pertama kalo hobi masang masang tag XML ga masalah sih, sekarang pada contoh diatas yang pakai 2 halaman aja tagnya kaya gitu panjang. gimana kalo 5 halaman, 10 halaman atau bahkan 20 halaman (lebay kaleee Disappointed smile). Selain itu yang kedua setiap xml layout jumlah viewnya terbatas. jadi kalo misalnya lebih dari 80 Views biasanya sih ga mau jalan. Ga percaya? coba aja sendiri Smile with tongue out. wkwkwkwkwk

Nah, karena itu cara yang paling efisien adalah menggunakan Android ViewPager. Pada ViewPager kita membuat setiap activity menjadi sebuah fragment yang nantinya akan dijalankan di main container. yah mirip seperti waktu kita membuat Tab Layout cuman disini activitynya diganti dengan fragment karena kita bermain dengan UInya. Buat yang belum tahu apa itu Fragments bisa dibaca disini nih. Dengan ini kita bisa membuat 2 Fragment dalam satu activity dan setiap fragmentnya bisa kita isi dengan layout dan fungsi yang berbeda. Lebih efisien kan? hehe

Untuk memulai, download terlebih dahulu library Android Compatibility package v4, Revision 3. Karena pada API yang sekarang tidak ada jadi harus ditambahkan ke build path. Dan jangan khawatir, saya sediakan juga kok di project yang saya upload di akhir artikel.

Sekarang buat project baru android dengan nama AndroidViewPager(untuk nama dan package terserah anda, disini saya hanya menggunakan contoh saja).

kemudian buat Class berikut

AndroidViewPagerActivity

package com.eepis.android;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;

public class AndroidViewPagerActivity extends FragmentActivity {
    private ViewPager _mViewPager;
    private ViewPagerAdapter _adapter;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        setUpView();
        setTab();
    }
    private void setUpView(){       
        _mViewPager = (ViewPager) findViewById(R.id.viewPager);
     _adapter = new ViewPagerAdapter(getApplicationContext(),getSupportFragmentManager());
     _mViewPager.setAdapter(_adapter);
     _mViewPager.setCurrentItem(0);
    }
    private void setTab(){
            _mViewPager.setOnPageChangeListener(new OnPageChangeListener(){
                       
                        @Override
                        public void onPageScrollStateChanged(int position) {}
                        @Override
                        public void onPageScrolled(int arg0, float arg1, int arg2) {}
                        @Override
                        public void onPageSelected(int position) {
                            // TODO Auto-generated method stub
                            switch(position){
                            case 0:
                                findViewById(R.id.first_tab).setVisibility(View.VISIBLE);
                                findViewById(R.id.second_tab).setVisibility(View.INVISIBLE);
                                break;
                               
                            case 1:
                                findViewById(R.id.first_tab).setVisibility(View.INVISIBLE);
                                findViewById(R.id.second_tab).setVisibility(View.VISIBLE);
                                break;
                            }
                        }
                       
                    });

    }
}

ViewPagerAdapter

package com.eepis.android;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private Context _context;
   
    public ViewPagerAdapter(Context context, FragmentManager fm) {
        super(fm);   
        _context=context;
       
        }
    @Override
    public Fragment getItem(int position) {
        Fragment f = new Fragment();
        switch(position){
        case 0:
            f=LayoutOne.newInstance(_context);   
            break;
        case 1:
            f=LayoutTwo.newInstance(_context);   
            break;
        }
        return f;
    }
    @Override
    public int getCount() {
        return 2;
    }

}

LayoutOne


package com.eepis.android;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class LayoutOne extends Fragment {
    Button klik;

    public static Fragment newInstance(Context context) {
        LayoutOne f = new LayoutOne();   
       
        return f;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        ViewGroup root = (ViewGroup) inflater.inflate(R.layout.layout_one, null);   
        klik=(Button)root.findViewById(R.id.btn);
        klik.setOnClickListener(new OnClickListener() {
           
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                Toast.makeText(LayoutOne.this.getActivity(), "Page 1", 1).show();
            }
        });
        return root;
    }
   
}

LayoutTwo


package com.eepis.android;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class LayoutTwo extends Fragment {
    Button klik;

    public static Fragment newInstance(Context context) {
        LayoutTwo f = new LayoutTwo();   
       
        return f;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        ViewGroup root = (ViewGroup) inflater.inflate(R.layout.layout_two, null);       
        klik=(Button)root.findViewById(R.id.btn);
        klik.setOnClickListener(new OnClickListener() {
           
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                Toast.makeText(LayoutTwo.this.getActivity(), "Page 2", 1).show();
            }
        });
        return root;
    }
   
}

dan tambahkan XML Layouit berikut

indicator.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:orientation="vertical" >
    <TableLayout
        style="@style/layout_f_w"
        android:stretchColumns="*" >
        <TableRow
            android:background="#dddddd"
            android:id="@+id/tableRow1"
            style="@style/layout_wrap" >
           
             <!-- First Tab indicator -->
                <LinearLayout
                style="@style/indicator_style"
                android:id="@+id/first_tab" >
               </LinearLayout>
              
            <!-- Second Tab indicator -->
                <LinearLayout
                style="@style/indicator_style"
                android:id="@+id/second_tab"
                android:visibility="invisible" >
               </LinearLayout>
        </TableRow>
    </TableLayout>
   
    <!-- Bottom line -->
        <LinearLayout
        style="@style/h_line"
        android:orientation="vertical" >
      </LinearLayout>
                      

</LinearLayout>

layout_one.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="@color/white"
    android:gravity="center|center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="First Layout" />
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Here" />

</LinearLayout>

layout_two.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="@color/white"
    android:gravity="center|center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Second Layout" />
   
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Here" />

</LinearLayout>

main.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="@color/white"
    android:orientation="vertical" >

   

    <TableLayout
        style="@style/layout_f_w"
        android:stretchColumns="*" >
        <TableRow
            android:id="@+id/tableRow1"
            android:background="#dddddd"
            style="@style/layout_wrap">
           
              <!-- First Tab -->
                <LinearLayout
                style="@style/layout_f_w"
                android:id="@+id/first_text"
                android:orientation="vertical" >
               
                      <TextView
                        android:id="@+id/textView1"
                        style="@style/text_title"
                        android:text="Page 1" />
               </LinearLayout>
              
            <!-- Second Tab -->
                <LinearLayout
                style="@style/layout_f_w"
                android:id="@+id/second_text"
                android:orientation="vertical" >

                    <TextView
                        android:id="@+id/textView1"
                        style="@style/text_title"
                        android:text="Page 2" />
           
               </LinearLayout>
        
        </TableRow>
    </TableLayout>
    <!-- Include Tab Indicator  -->
<include layout="@layout/indicator" android:layout_width="fill_parent" android:layout_height="wrap_content"  />
 
<android.support.v4.view.ViewPager
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:id="@+id/viewPager" />
</LinearLayout>

selain itu kita butuh tambahan XML yang nantinya diletakkan pada res/values

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="white">#FFF</color>
    <color name="l_blue">#909BAA</color>
    <color name="d_blue">#6D7B92</color>
    <color name="gray">#CCCCCC</color>
    <color name="d_gray">#666</color>
    <color name="black">#000</color>

   
</resources>

styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme" parent="android:Theme">
        <item name="android:background">@null</item>
        <item name="android:windowNoTitle">true</item>
    </style>
   
    <style name="text_title">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/d_gray</item>
        <item name="android:gravity">center</item>
    </style>
   
    <style name="text_option">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/black</item>
    </style>
   
    <style name="layout_wrap">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
    </style>
   
    <style name="layout_fill">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">fill_parent</item>
    </style>
   
    <style name="layout_f_w">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>
   
    <style name="h_line">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">1.5dip</item>
        <item name="android:background">@color/l_blue</item>
    </style>
   
        <style name="indicator_style">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">4dip</item>
        <item name="android:background">@color/l_blue</item>
        <item name="android:orientation">vertical</item>
    </style>
   
</resources>

jangan lupa add library tambahan ke Build Path Open-mouthed smile

Hasil running aplikasi

image 

image

 image

Demikianlah tutorial kali ini semoga bisa bermanfaat buat kawan kawan sekalian. Untuk source projectnya bisa di download di alamat berikut

DOWNLOAD

Nah untuk tutorial selanjutnya kita kembali lagi ke JSON sebentar ya hehe, habis lagi banyak tugas pake JSON. Cuman next post kita ga pake Android tapi pake JavaScript. So Keep Update ya Open-mouthed smile

jika ada pertanyaan silahkan saja email saya di bagibagi23@gmail.com

Referensi Artikel

http://manishkpr.webheavens.com/android-viewpager-example/

http://developer.android.com/reference/android/support/v4/view/ViewPager.html

http://developer.android.com/training/animation/screen-slide.html

http://developer.android.com/guide/components/fragments.html

Rabu, Maret 06, 2013

Upload Image Dari Android Dengan HTTP Multipart

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvUdeFBB9pjMk9uCzJQFijTrs-kOOopJCRE0H3cr89LEys3OMx2hdIsG_CN7pFtZjFVlb4cK-Iwnoh0aHDeW71E5A-NIz1hv9zX-TTYx24G2L7BHqu_Ww40_WPJ6m3I3j-vgLEpNLL_c8/s1600/Logo_Android.jpg

Pada postingan sebelumnya kita telah mempelajari bagaimana meload image dari url di android. Nah sekarang kita coba implementasikan hal yang sebaliknya, yaitu upload image ke url tertentu. Karena kita mengirim gambar ke url tertentu maka kita juga perlu menyiapkan server sidenya. Kita gunakan yang paling simple aja yaitu PHP. Untuk teknologi multipart ini file gambar yang akan dikirim dipecah pecah menjadi beberapa bagian, sehingga ketika ada koneksi putuh tetap bisa berjalan jika koneksi tersambung kembali. Ah daripada panjang lebar langsung dicoba aja deh.Tapi sebelum itu siapin XAMPP dan folder lokasi upload Open-mouthed smile

Langkah awal yang kita lakukan adalah menyiapkan bagian servernya.Buat folder bernama imageupload di direktori htdocs(xampp) dan buat folder upload serta file upload.php di dalamnya. Berikut script untuk menangkap file yang dikirim dari android. letakkan di file upload.php

<?php
$target_path  = "./upload/";
$target_path = $target_path . basename( $_FILES['uploaded']['name']);
if(move_uploaded_file($_FILES['uploaded']['tmp_name'], $target_path)) {
echo "The file ".  basename( $_FILES['uploaded']['name']).
" has been uploaded";
} else{
echo "Gagal Bung!";
}
?>

Setelah itu download library httpclient-4.2.3 dan httpmime-4.2.3 di http://hc.apache.org/downloads.cgi atau bisa juga langsung ambil di project yang saya upload pada postingan ini. Disana sudah saya sediakan lengkap kok Open-mouthed smile. Setelah di download add ke build path pada project anda.

Nah, sekarang kita mulai ke Androidnya. Buat project baru di Android dengan nama AndroidImageUpload(untuk nama dan package terserah anda disini hanya berupa contoh). Kemudian copykan kode berikut ke main activitynya

package com.eepis.android;

import java.io.BufferedReader;
import java.io.ByteArrayOutputStream;
import java.io.DataInputStream;
import java.io.DataOutputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import android.database.Cursor;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Bitmap.CompressFormat;
import android.provider.MediaStore;

import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.entity.mime.HttpMultipartMode;
import org.apache.http.entity.mime.MultipartEntity;
import org.apache.http.entity.mime.content.ByteArrayBody;
import org.apache.http.entity.mime.content.StringBody;
import org.apache.http.impl.client.DefaultHttpClient;

public class AndroidImageUploadActivity extends Activity implements OnClickListener{
    /** Called when the activity is first created. */
    Button upload,add;
    TextView status;
    EditText nama;
   
    //variable for upload data into http
    HttpURLConnection connection = null;
    DataOutputStream outputStream = null;
    DataInputStream inputStream = null;
   
    Bitmap bm;

    static String pathToOurFile = "",format;
    String urlServer = "http://10.0.2.2/imageupload/upload.php";
    String lineEnd = "\r\n",twoHyphens = "--",boundary =  "*****";
   
    private static final int SELECT_PICTURE = 0;

    int bytesRead, bytesAvailable, bufferSize;
    byte[] buffer;
    int maxBufferSize = 1*1024*1024;
   
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        upload=(Button)findViewById(R.id.btnChooseImage);
        upload.setOnClickListener(this);
        add=(Button)findViewById(R.id.btnAddImage);
        add.setOnClickListener(this);
        status=(TextView)findViewById(R.id.txtStatusGambar);
        nama=(EditText)findViewById(R.id.editNama);
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
        case R.id.btnChooseImage:
            Intent intent = new Intent();
            intent.setType("image/*");
            intent.setAction(Intent.ACTION_GET_CONTENT);
            startActivityForResult(Intent.createChooser(intent, "Select Picture"),SELECT_PICTURE);
            break;
        case R.id.btnAddImage:
            try {
                bm = BitmapFactory.decodeFile(pathToOurFile);
                executeMultipartPost();
                } catch (Exception e) {
                    Log.e(e.getClass().getName(), e.getMessage());
                }
            break;
        default:
            break;
        }
    }
   
    @Override

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (resultCode == RESULT_OK) {
            status.setText(data.getData().toString());
            String[] projection = { MediaStore.Images.Media.DATA };
           
            Cursor cursor = managedQuery(data.getData(), projection, null, null, null);
            int column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
            cursor.moveToFirst();
            String filePath = cursor.getString(column_index);
            cursor.close();
            pathToOurFile=filePath;
            format = filePath.substring(filePath.lastIndexOf(".") + 1, filePath.length());
        }
    }   
    public void executeMultipartPost() throws Exception {
        try {
            ByteArrayOutputStream bos = new ByteArrayOutputStream();
            bm.compress(CompressFormat.JPEG, 75, bos);
            byte[] data = bos.toByteArray();
            HttpClient httpClient = new DefaultHttpClient();
            HttpPost postRequest = new HttpPost(urlServer);
            ByteArrayBody bab = new ByteArrayBody(data, nama.getText().toString()+"."+format);
            MultipartEntity reqEntity = new MultipartEntity(
                    HttpMultipartMode.BROWSER_COMPATIBLE);
                    reqEntity.addPart("uploaded", bab);
                    reqEntity.addPart("photoCaption", new StringBody("sfsdfsdf"));
                    postRequest.setEntity(reqEntity);
                    HttpResponse response = httpClient.execute(postRequest);
                    BufferedReader reader = new BufferedReader(new InputStreamReader(
                            response.getEntity().getContent(), "UTF-8"));
                            String sResponse;
                            StringBuilder s = new StringBuilder();

                            while ((sResponse = reader.readLine()) != null) {
                                s = s.append(sResponse);
                            }
                            Toast.makeText(this, "Penambahan data berhasil", 1).show();
                            System.out.println("Response:—————————————————————————————————————————-> " + s);
        } catch (Exception e) {
            // handle exception here
            Log.e(e.getClass().getName(), e.getMessage());
        }
    }
}

berikut file xml layoutnya

<?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:orientation="vertical"
    android:padding="10dp" >

    <EditText
        android:id="@+id/editNama"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="Nama"
        />
    <TextView
            android:id="@+id/txtStatusGambar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:text="Gambar Belum Dipilih" >
    </TextView>
    <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center_horizontal" >
    <Button
            android:id="@+id/btnChooseImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="Select Image" >
    </Button>
    <Button
            android:id="@+id/btnAddImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="Upload Image" >
    </Button>   
    </LinearLayout>
</LinearLayout>

jangan lupa tambahkan permission di manifest

<uses-permission android:name="android.permission.INTERNET" />

Hasil tampilan aplikasi

image image

nah muncul deh di direktori upload dengan nama tes

image

Demikianlah tutorial kali ini semoga bisa bermanfaat buat kawan kawan sekalian. Untuk source projectnya bisa di download di alamat berikut

DOWNLOAD

Setelah banyak bermain main dengan networking di Android sekarang balik ke localnya ya. Untuk postingan berikutnya adalah mengenai pemanfaatan swipe di Android Apps. Secara gitu namanya aplikasi touchscreen kalo ndak pake swipe kan kurang Greget gitu(kata Mad Dod Smile) nah jadi next post kita akan mencoba bagaimana membuat scroller view secara horizontal dengan ViewPager. So Keep Update ya Open-mouthed smile

jika ada pertanyaan silahkan saja email saya di bagibagi23@gmail.com

Minggu, Maret 03, 2013

Loading Gambar Dari Internet Dengan Android

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvUdeFBB9pjMk9uCzJQFijTrs-kOOopJCRE0H3cr89LEys3OMx2hdIsG_CN7pFtZjFVlb4cK-Iwnoh0aHDeW71E5A-NIz1hv9zX-TTYx24G2L7BHqu_Ww40_WPJ6m3I3j-vgLEpNLL_c8/s1600/Logo_Android.jpg

yak, kembali lagi nih ke utak atik programming Android. Seperti yang sudah saya beritahukan pada postingan sebelumnya. Kini kita akan mencoba meload gambar dari internet. Sepertinya sih terdengar biasa saja ya. Memang sih kebanyakan dari kita menggunakan fungsi berikut untuk meload image dari internet.

HttpURLConnection connection= (HttpURLConnection)imageURL.openConnection();

connection.setDoInput(true);

connection.connect();

InputStream inputStream = connection.getInputStream();

bitmap = BitmapFactory.decodeStream(inputStream);//Convert to bitmap

image_view.setImageBitmap(bitmap);

Nah yang ingin saya bagikan pada tutorial kali ini adalah bagaimana meload gambar dari internet kemudian disimpan dalam memori. Wah pasti timbul pertanyaan, bukannya kalau disimpan di memori bakal ngebuat penuh ya? tapi tenang saja memori yang digunakan memori cache kok. Jadi hanya bersifat temporary, kalo cachenya di clear maka juga ikut ikutan hilang Open-mouthed smile. Keuntungan dari menyimpan image di cache adalah ketika kita membuat app yang butuh melakukan penyimpanan gambar atau app yang meload gambar berulang ulang akan menjadi lebih efisien. Image yang sudah di load tidak perlu didownload kembali, itung itung hemat kuota Smile.

Nah langsung aja ini nih caranya, pertama tama buat project baru di android dengan nama AndroidLoadImageFromWeb. untuk nama terserah sih, ga harus pakai punya saya. Setelah project selesai buat koding sesuai class yang diperlukan.

AndroidLoadImageFromWebActivity.java

package com.eepis.android;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class AndroidLoadImageFromWebActivity extends Activity implements OnClickListener {
    Button load;
    ImageView image;
    ImageLoader imgLoader;
    int loader = R.drawable.loader;
    String image_url = "http://rapidpurple.com/purpleblog/wp-content/uploads/2011/11/php_mysql_logo.png";
   
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        load=(Button)findViewById(R.id.btnLoad);
        load.setOnClickListener(this);
        image = (ImageView) findViewById(R.id.image);       
    }
    @Override
    public void onClick(View arg0) {
        // TODO Auto-generated method stub
        imgLoader = new ImageLoader(getApplicationContext());
        imgLoader.DisplayImage(image_url, loader, image);
    }
}

FileCache.java

package com.eepis.android;

import java.io.File;
import android.content.Context;
 
public class FileCache {
 
    private File cacheDir;
 
    public FileCache(Context context){
        //Find the dir to save cached images
        if (android.os.Environment.getExternalStorageState().equals(android.os.Environment.MEDIA_MOUNTED))
            cacheDir=new File(android.os.Environment.getExternalStorageDirectory(),"TempImages");
        else
            cacheDir=context.getCacheDir();
        if(!cacheDir.exists())
            cacheDir.mkdirs();
    }
 
    public File getFile(String url){
        String filename=String.valueOf(url.hashCode());
        File f = new File(cacheDir, filename);
        return f;
 
    }
 
    public void clear(){
        File[] files=cacheDir.listFiles();
        if(files==null)
            return;
        for(File f:files)
            f.delete();
    }
 
}

ImageLoader.java

package com.eepis.android;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.Collections;
import java.util.Map;
import java.util.WeakHashMap;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
 
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.widget.ImageView;
 
public class ImageLoader {
 
    MemoryCache memoryCache=new MemoryCache();
    FileCache fileCache;
    private Map<ImageView, String> imageViews=Collections.synchronizedMap(new WeakHashMap<ImageView, String>());
    ExecutorService executorService;
 
    public ImageLoader(Context context){
        fileCache=new FileCache(context);
        executorService=Executors.newFixedThreadPool(5);
    }
 
    int stub_id = R.drawable.ic_launcher;
    public void DisplayImage(String url, int loader, ImageView imageView)
    {
        stub_id = loader;
        imageViews.put(imageView, url);
        Bitmap bitmap=memoryCache.get(url);
        if(bitmap!=null)
            imageView.setImageBitmap(bitmap);
        else
        {
            queuePhoto(url, imageView);
            imageView.setImageResource(loader);
        }
    }
 
    private void queuePhoto(String url, ImageView imageView)
    {
        PhotoToLoad p=new PhotoToLoad(url, imageView);
        executorService.submit(new PhotosLoader(p));
    }
 
    private Bitmap getBitmap(String url)
    {
        File f=fileCache.getFile(url);
 
        //from SD cache
        Bitmap b = decodeFile(f);
        if(b!=null)
            return b;
 
        //from web
        try {
            Bitmap bitmap=null;
            URL imageUrl = new URL(url);
            HttpURLConnection conn = (HttpURLConnection)imageUrl.openConnection();
            conn.setConnectTimeout(30000);
            conn.setReadTimeout(30000);
            conn.setInstanceFollowRedirects(true);
            InputStream is=conn.getInputStream();
            OutputStream os = new FileOutputStream(f);
            Utils.CopyStream(is, os);
            os.close();
            bitmap = decodeFile(f);
            return bitmap;
        } catch (Exception ex){
           ex.printStackTrace();
           return null;
        }
    }
 
    //decodes image and scales it to reduce memory consumption
    private Bitmap decodeFile(File f){
        try {
            //decode image size
            BitmapFactory.Options o = new BitmapFactory.Options();
            o.inJustDecodeBounds = true;
            BitmapFactory.decodeStream(new FileInputStream(f),null,o);
 
            //Find the correct scale value. It should be the power of 2.
            final int REQUIRED_SIZE=70;
            int width_tmp=o.outWidth, height_tmp=o.outHeight;
            int scale=1;
            while(true){
                if(width_tmp/2<REQUIRED_SIZE || height_tmp/2<REQUIRED_SIZE)
                    break;
                width_tmp/=2;
                height_tmp/=2;
                scale*=2;
            }
 
            //decode with inSampleSize
            BitmapFactory.Options o2 = new BitmapFactory.Options();
            o2.inSampleSize=scale;
            return BitmapFactory.decodeStream(new FileInputStream(f), null, o2);
        } catch (FileNotFoundException e) {}
        return null;
    }
 
    //Task for the queue
    private class PhotoToLoad
    {
        public String url;
        public ImageView imageView;
        public PhotoToLoad(String u, ImageView i){
            url=u;
            imageView=i;
        }
    }
 
    class PhotosLoader implements Runnable {
        PhotoToLoad photoToLoad;
        PhotosLoader(PhotoToLoad photoToLoad){
            this.photoToLoad=photoToLoad;
        }
 
        @Override
        public void run() {
            if(imageViewReused(photoToLoad))
                return;
            Bitmap bmp=getBitmap(photoToLoad.url);
            memoryCache.put(photoToLoad.url, bmp);
            if(imageViewReused(photoToLoad))
                return;
            BitmapDisplayer bd=new BitmapDisplayer(bmp, photoToLoad);
            Activity a=(Activity)photoToLoad.imageView.getContext();
            a.runOnUiThread(bd);
        }
    }
 
    boolean imageViewReused(PhotoToLoad photoToLoad){
        String tag=imageViews.get(photoToLoad.imageView);
        if(tag==null || !tag.equals(photoToLoad.url))
            return true;
        return false;
    }
 
    //Used to display bitmap in the UI thread
    class BitmapDisplayer implements Runnable
    {
        Bitmap bitmap;
        PhotoToLoad photoToLoad;
        public BitmapDisplayer(Bitmap b, PhotoToLoad p){bitmap=b;photoToLoad=p;}
        public void run()
        {
            if(imageViewReused(photoToLoad))
                return;
            if(bitmap!=null)
                photoToLoad.imageView.setImageBitmap(bitmap);
            else
                photoToLoad.imageView.setImageResource(stub_id);
        }
    }
 
    public void clearCache() {
        memoryCache.clear();
        fileCache.clear();
    }
 
}

MemoryCache.java

package com.eepis.android;

import java.lang.ref.SoftReference;
import java.util.Collections;
import java.util.HashMap;
import java.util.Map;
import android.graphics.Bitmap;
 
public class MemoryCache {
    private Map<String, SoftReference<Bitmap>> cache=Collections.synchronizedMap(new HashMap<String, SoftReference<Bitmap>>());
 
    public Bitmap get(String id){
        if(!cache.containsKey(id))
            return null;
        SoftReference<Bitmap> ref=cache.get(id);
        return ref.get();
    }
 
    public void put(String id, Bitmap bitmap){
        cache.put(id, new SoftReference<Bitmap>(bitmap));
    }
 
    public void clear() {
        cache.clear();
    }
}

Utils.java

package com.eepis.android;

import java.io.InputStream;
import java.io.OutputStream;
 
public class Utils {
    public static void CopyStream(InputStream is, OutputStream os)
    {
        final int buffer_size=1024;
        try
        {
            byte[] bytes=new byte[buffer_size];
            for(;;)
            {
              int count=is.read(bytes, 0, buffer_size);
              if(count==-1)
                  break;
              os.write(bytes, 0, count);
            }
        }
        catch(Exception ex){}
    }
}

main.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:orientation="vertical" >
   
    <ImageView
        android:id="@+id/image"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_margin="10dip"/>

    <Button
        android:id="@+id/btnLoad"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_margin="10dip"
        android:text="Load Image" />

</LinearLayout>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.eepis.android"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="10" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:label="@string/app_name"
            android:name=".AndroidLoadImageFromWebActivity" >
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
   
    <!-- Internet Permissions -->
    <uses-permission android:name="android.permission.INTERNET" />
   
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"></uses-permission>
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>
   
    <!-- Permission to write to external storage -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

</manifest>

Hasil Tampilan Aplikasi

image

Demikianlah tutorial kali ini semoga bisa bermanfaat buat kawan kawan sekalian. Untuk source projectnya bisa di download di alamat berikut

DOWNLOAD

Yah akhirnya selesai juga tutorial kali ini, setelah bisa mendownload gambar tentunya kita juga bisa mengupload dong. Nantikan tutorial selanjutnya ya tentang upload image dengan http-post multipart. So Keep Update ya Open-mouthed smile

jika ada pertanyaan silahkan saja email saya di bagibagi23@gmail.com

Sumber Artikel

http://www.androidhive.info/2012/07/android-loading-image-from-url-http/

http://stackoverflow.com/questions/3085366/android-image-cache-stategy-and-memory-cache-size

http://developer.android.com/training/displaying-bitmaps/cache-bitmap.html