iOS Tutorial 03 : Aplikasi UpDown

Selamat datang pada seri tutorial iOS yang ke-3.  Kali ini kita akan membuat aplikasi UpDown.  Aplikasi ini dapat digunakan untuk mencacah.  Selain mencacah naik (Up), aplikasi ini juga dapat mencacah mundur (Down).  Karena itulah aplikasi ini dinamakan UpDown🙂

Pada tutorial kali ini yang akan dibahas antara lain :

  • Bagaimana menerima input (tap pada tombol)
  • Bagaimana melakukan perhitungan (Up atau Down) sesuai tombol yang ditekan
  • Bagaimana mengubah tampilan jumlah (pada label) sesuai dengan hasil cacahan sekarang

Ok, seperti biasa, jalankan XCode, lalu pilih New Project (iOS Application), pilih template View Based Application seperti gambar berikut:

Create New Project, View Based Application

Berilah nama UpDown, lalu simpanlah pada tempat yang anda inginkan (di Desktop atau di Documents)

Berilah nama aplikasi UpDown
Simpan pada tempat yang diinginkan

XCode akan menggenerate beberapa file sesuai dengan template yang kita pilih (View Based Application) seperti berikut :

File Project yang digenerate XCode

Hanya beberapa file saja yang akan kita utak-atik :

  • UpDownViewController.h digunakan untuk mendeklarasikan object atau variabel yang akan kita gunakan.  Kita juga perlu menuliskan function prototype pada bagian ini.
  • UpDownViewController.m digunakan untuk membuat implementasi dari function prototype yang telah dideklarasikan pada UpDownViewController.h
  • UpDownViewController.xib adalah file yang berisi definisi user interface.

Ok, mari kita mulai dari membuat desain user interface.  Buka file UpDownViewController.xip, lalu buatlah desain seperti ini :

Desain User Interface UpDown

User Interface aplikasi UpDown hanya terdiri dari 3 komponen, yaitu tombol Up (+1), tombol Down (-1) dan sebuah Label.  Kita akan mulai mencacah dari angka 0, karena itu ubahlah teks pada label sehingga seperti pada gambar.

Pada tahap ini kita sudah selesai membuat desain user interface.  Anda sudah bisa membayangkan bagaimana aplikasi ini saat dijalankan?

  • Misal angka sekarang : 20
  • Tekan tombol +1
  • Angka akan menjadi 21
  • Tekan tombol +1 lagi
  • Angka akan menjadi 22
  • Tekan tombol -1
  • Angka akan menjadi 21

Jika tombol ditekan, maka aplikasi akan menghitung angka sekarang sesuai dengan tombol yang ditekan.  Aplikasi kemudian akan mengupdate teks pada Label dengan angka hasil perhitungan tersebut.

  • Aplikasi kita harus menyimpan nilai sekarang.  Kita akan gunakan variabel bertipe integer
  • Aplikasi kita harus bereaksi saat tombol ditekan : kita membutuhkan IBAction.  Pada tutorial ini kita akan menggunakan 2 IBAction (karena ada 2 tombol)
  • Aplikasi kita harus dapat mengubah teks pada Label : kita membutuhkan IBOutlet.  Dengan IBOutlet kita dapat mengubah tampilan pada user interface (View) dari Controller kita.  Pattern seperti ini biasa disebut MVC (Model View Controller) Pattern.

Mari kita deklarasikan IBOutlet, IBAction dan variabel untuk menyimpan nilai sekarang.  Bukalah file UpDownViewController.h, lalu deklarasikan sebuah IBOutlet untuk IBLabel, beri nama display seperti pada potongan kode berikut  :

[codesyntax lang=”objc”]

#import <UIKit/UIKit.h>

@interface UpDownViewController : UIViewController {
    IBOutlet UILabel *display;
}

[/codesyntax]

Deklarasikan sebuah variabel bertipe integer untuk menyimpan nilai sekarang.  Tambahkan pada bagian @Interface seperti berikut  :

[codesyntax lang=”objc”]

#import <UIKit/UIKit.h>

@interface UpDownViewController : UIViewController {
    IBOutlet UILabel *display;
    int nilaiSekarang;
}

[/codesyntax]

Berikutnya kita deklarasikan *display sebagai property (kita nantinya akan menggunakan setText untuk mengubah teks pada Label) :

[codesyntax lang=”objc”]

#import <UIKit/UIKit.h>

@interface UpDownViewController : UIViewController {
    IBOutlet UILabel *display;
    int nilaiSekarang;
}
@property(nonatomic, retain) IBOutlet UILabel *display;

[/codesyntax]

Yang terakhir harus kita lakukan adalah mendeklarasikan method yang akan dijalankan saat tombol Up/Down ditekan.  Untuk lebih mudah dipahami, saya akan membuat method untuk setiap tombolnya, sehingga kita perlu mendeklarasikan kedua method di sini.  Berikut adalah deklarasi kedua method tersebut :

[codesyntax lang=”objc”]

#import <UIKit/UIKit.h>

@interface UpDownViewController : UIViewController {
 IBOutlet UILabel *display;
 int nilaiSekarang;
}

@property(nonatomic, retain) IBOutlet UILabel *display;

-(IBAction)buttonPlus:(id)sender;
-(IBAction)buttonMin:(id)sender;

[/codesyntax]

Di sini kita mendeklarasikan nilai kembalian method tersebut adalah IBAction, yang menandakan method ini akan dijalankan atas suatu action/aksi yang terjadi pada View.  Sampai di sini kita sudah mendeklarasikan semua yang akan kita butuhkan.  Langkah berikutnya adalah membuat implementasinya.  Buka file UpDownViewController.m.  Yang pertama kita lakukan adalah menginisialisasi setter dan getter dari display dengan menggunakan @synthesize seperti berikut :

[codesyntax lang=”objc”]

#import "UpDownViewController.h"

@implementation UpDownViewController

@synthesize display;

[/codesyntax]

Selanjutnya adalah membuat implementasi method buttonPlus: dan buttonMin:.  Pada buttonPlus: yang dilakukan adalah menaikkan nilai sekarang dengan 1 (nilaiSekarang = nilaiSekarang + 1), lalu mengupdate tampilan Label sesuai dengan nilaiSekarang.  Berikut adalah implementasi method buttonPlus: dan buttonMin:

[codesyntax lang=”objc”]

#import "UpDownViewController.h"

@implementation UpDownViewController

@synthesize display;

-(IBAction)buttonPlus:(id)sender {
 nilaiSekarang = nilaiSekarang + 1;
 [display setText:[NSString stringWithFormat:@"%d", nilaiSekarang]];
}

-(IBAction)buttonMin:(id)sender {
 nilaiSekarang = nilaiSekarang - 1;
 [display setText:[NSString stringWithFormat:@"%d", nilaiSekarang]];
}

[/codesyntax]

Kita juga harus melakukan release pemakaian memory untuk display dengan memanggil method release, yang dilakukan pada method dealloc seperti berikut ini :

[codesyntax lang=”objc”]

- (void)dealloc
{
 [super dealloc];
 [display release];
}

[/codesyntax]

Sentuhan terakhir, kita ingin mengeset nilaiSekarang adalah 0 saat program dijalankan.  Lakukan hal ini pada method viewDidLoad seperti berikut ini :

[codesyntax lang=”objc”]

- (void)viewDidLoad
{
 [super viewDidLoad];
 nilaiSekarang = 0;
}

[/codesyntax]

Mari kita tuliskan terlebih dahulu apa saja yang telah kita lakukan sejauh ini :

  • Kita telah membuat desain user interface
  • Kita telah mendeklarasikan segala keperluan yang dibutuhkan (IBOutlet, IBAction, method buttonPlus: dan buttonMin:)
  • Kita telah membuat implementasi method buttonPlus: dan buttonMin:
  • Kita telah mengeset nilaiSekarang = 0 saat program pertama kali dijalankan
  • Kita telah “melepas” memory yang digunakan untuk object display

Tahapan paling akhir adalah menghubungkan kode yang telah kita buat dengan user interfacenya.  Buka file UpDownViewController.xib, pilih File Owner, tahan tombol Ctrl, lalu drag ke arah Label.  Pilih display.  Untuk lebih jelasnya, perhatikan gambar berikut :

Pilih File Owner, tahan tombol Ctrl, lalu drag ke arah Label
Pilih display. Ini akan menghubungkan Label dengan object display

Untuk tombol, langkahnya berbeda.  Pilih salah satu tombol (misal tombol -1), tahan Ctrl, lalu drag ke arah File Owner.  Pilih buttonMin.  Untuk lebih jelasnya, perhatikan gambar berikut :

Menghubungkan tombol -1 dengan method buttonMin:
Pilih buttonMin:

Ok, sudah selesai sampai di sini.  Anda bisa mencoba menjalankannya :)  Untuk latihan, anda bisa mencoba beberapa hal berikut:

  • Buatlah tampilan Label menjadi 3 digit angka (misal 001, 045, 333, dst).  Nilai minimal adalah -999, maksimalnya 999.
  • Tambahkan tombol baru yang akan menambah 10 (tombol +10)
  • Tambahkan tombol Reset, untuk mengeset nilai menjadi 0 kembali

Selamat mengerjakan, sampai jumpa di tutorial berikutnya.

7 thoughts on “iOS Tutorial 03 : Aplikasi UpDown”

    1. program UpDown pada tutorial ini memang khusus untuk dijalankan pada posisi portrait.  Agar layoutnya bisa menyesuaikan ketika dirotate, perlu menambahkan bagian method (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation

      dan jangan lupa mengubah setting layout dari user interfacenya.  Saya akan membahas mengenai rotasi layout pada tutorial berikutnya.

      btw, ketiga soal yang saya berikan di atas sudah dijawab?🙂

      1. sudah, cm buat yg nambah 0 diblakangnya itu msh slah wktu minus, gmn akalinnya y??? apa ada fungsi trtentu buat nambahin format 0 nya??? thx

      2. oya pak .. kra2 bs ga kt zoom out interface buildernya, kgedean soalnya, sdkit ribet,hoho..

      3. ini pakai XCode 3.x atau 4.x? Kalau di XCode 4.x antara Interface Builder dan Code Editor sudah menjadi satu.  Menurut saya ukuran segitu sudah cukup (tidak terlalu besar atau terlalu kecil)

      4. saya berhasil develop program percobaan ini di ipad.. tp wkt mw munculin icon, di simulator jalan, tp wkt d ipadnya ga muncul … ~.~

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s