Creating Camera Movement Like RTS Game In Unity

 

Sudah lama nih penulis vakum. Namun berhubung akhir akhir ini banyak nganggurnya jadi mau share artikel deh tentang unity. Kebetulan skripsi udah mau kelar, mau share juga ah script yang digunain di tugas akhir penulis. Kali ini script yang akan penulis share adalah mengenai pembuatan camera movement ala game RTS. Pernah main game DOTA kan? atau Red Alert atau Age of Empire? nah disini kita akan implementasikan trik pergerakan kamera seperti itu namun yang sedikit berbeda adalah kita akan implementasikan ini di Android.

Pada android sedikit berbeda dengan PC version. pada pc terdapat mouse sehingga camera akan mengikuti pergerakan mouse. Nah untuk android kita akan beralih menggunakan touch. Kebetulan pada unity versi baru kita bisa implementasi penggunaan mouse di android jadi ga perlu deh pakai touch bawaan android. Keuntungan tersebut bisa kita manfaatin ketika njalanin via unity editor buat ngetes. Jadi ga perlu deploy ke device. Lebih praktis kan 

Berikut step by stepnya:

1. Buat Scene baru dan tambahkan terrain(saya anggap pembaca sudah mengerti dasar pembuatan scene dan terrain di unity. Jika belum bisa google yah ).

2. Kemudian buat script bernama SwipeMovementScript.cs(Untuk tutorial ini saya menggunakan C# karena lebih familiar dengan bahasa ini ). Tambahkan kode berikut:

using UnityEngine; using System.Collections; public class SwipeMovementScript : MonoBehaviour {     Vector3 hit_position;     Vector3 current_position;     Vector3 camera_position;     // Use this for initialization     void Start () {         Screen.orientation=ScreenOrientation.Landscape;     }     void Update(){             if(Input.GetMouseButtonDown(0)){                 hit_position = Input.mousePosition;                    camera_position = transform.position;              }                 if(Input.GetMouseButton(0)){                 current_position = Input.mousePosition;                 TouchDrag();                    }             }     void TouchDrag(){         Vector3 direction =  Camera.main.ScreenToWorldPoint(current_position) - Camera.main.ScreenToWorldPoint(hit_position);         // Invert direction to that terrain appears to move with the mouse.         direction = direction * -1;                Vector3 position = new Vector3(camera_position.x + direction.x,camera_position.y,camera_position.z + direction.z);         transform.position = position;            } }

3. Buat Tampilan dalam scene menjadi seperti berikut

 

4. Attach script SwipeMovementScript.cs ke Main Camera dan lakukan pengaturan pada area yang dilingkari warna merah sesuai kebutuhan. Untuk Projection gunakan ortographic

5. Run project dan pastikan tambahkan object untuk mengecek apakah camera movementnya berhasil atau tidak. Selamat mencoba

Demikian tutorial yang saya bagikan kali ini. Jika ada pertanyaan silahkan saja hubungi saya via bagibagi23@gmail.com

Read More

Ebook Learning To Be Great Presentator

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 .

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

Here’s the download link

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

Read More

Desain Web Keren Dengan 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:

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

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 . Jika ada pertanyaan bisa diskusi dengan saya via email di bagibagi23@gmail.com

Read More

Ebook Membuat Mini Photoshop dengan Visual Studio 2010

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 . Jadi buat siapapun yang berminat belajar pengolahan citra bisa unduh ni ebook secara gratis hehe. Tapi jangan dijual looo . 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 ^ ^

Read More

Horizontal Scroll View dengan ViewPager di Android

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

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 . 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 ). 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 . 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

Hasil running aplikasi

 

 

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

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

Read More

Upload Image Dari Android Dengan HTTP Multipart

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

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 . 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

 

nah muncul deh di direktori upload dengan nama tes

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 ) nah jadi next post kita akan mencoba bagaimana membuat scroller view secara horizontal dengan ViewPager. So Keep Update ya

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

Read More