Membuat Aplikasi Celengan Sederhana

Membuat Aplikasi Celengan Sederhana

Published on April 16, 2013 by 

Assalamu’alaikum. Di postingan kali ini saya akan memberikan tutorial tentang bagaimana cara membuat aplikasi celengan sederhana dengan menggunakan Xcode. Berikut ini penjelasannya.

Level 1 – Membuat File Xcode

Buka Xcode, kemudian pilih Create a new Xcode project.

Create a new Xcode project

Pada bagian iOS Application, pilih Single View Application, lalu klik Next.

Single View Application

Isi Product Name dengan (Nama Anda) Celengan, bagian yang lain samakan dengan gambar di bawah ini. Kemudian klik Next.

New Project

Pilih folder mana saja yang Anda suka sebagai tempat save, klik Create.

Save Folder

Pada bagian Supported Interface Orientations, klik semua posisi layar iPhone (Portrait, Upside Down, Landscape Left, Landscape Right).

iPhone/iPod Deployment Info

Kemudian geser ke bawah dan lakukan hal yang sama untuk semua posisi layar iPad (Portrait, Upside Down, Landscape Left, Landscape Right).

iPad Deployment Info

Kemudian pada bagian MainStoryboard_iPad.storyboard, Anda bisa melihat tampilan iPad. Disinilah tempat untuk mendesain tampilan iPad.

iPad Storyboard

Jangan lupa untuk save project ini setiap menyelesaikan level.

Level 2 – Menambahkan Label

Drag/tarik Label dari Object library ke View (tampilan). Tempatkan di bagian tengah atas View.

Drag Label (Object Library)

Klik Attributes Inspector Attributes inspector. Pada bagian Text, ganti tulisan “Label” dengan “Celengan”, ganti juga warna hitam dengan warna biru. Di bagian Font, klik Font kemudian ganti System dengan Custom, pilih Helvetica dan ubah ukurannya menjadi 30. Lalu pada bagian Alignment, klik rata tengah (Center). Aturlah tampilannya di View.

Label Celengan

Klik Show the Assistant Editor Show the Assistant editor untuk menampilkan code. Tambahkan tanda kurung kurawal buka “{“ setelah UIViewController, kemudian tekan Enter dan secara otomatis akan muncul tanda kurung kurawal tutup “}”.

Kurung Kurawal

Klik “Celengan” di View, lalu klik Connections Inspector Connections inspector. Drag New Referencing Outlet ke atas tanda kurung kurawal tutup “}”.

Drag Label (New Referencing Outlet) #1

Isi Name dengan “myLabel”, ganti Storage Weak dengan Strong lalu tekan Enter/klik Connect.

myLabel

Maka akan muncul code baru, yaitu IBOutlet UILabel *myLabel;

Level 2 (Coding ViewController.h)

Klik Run untuk menampilkan iOS Simulator dan lihatlah hasilnya.

Level 2 (iOS Simulator)

Level 3 – Menambahkan TextField

Tambahkan TextField ke View dan letakkan di bawah “Celengan”.

Drag TextField (Object Library)

Klik Show the Assistant Editor Show the Assistant editor. Klik “TextField” di View, lalu klik Connections InspectorConnections inspector dan drag  New Referencing Outlet ke bawah code IBOutlet UILabel *myLabel;

Drag TextField (New Referencing Outlet)

Beri nama “myName”, tekan Enter/klik Connect.

myName

Maka akan muncul code baru, yaitu IBOutlet UITextField *myName;

Level 3 (Coding ViewController.h)

Run simulatornya dan isilah TextField dengan nama Anda.

Level 3 (iOS Simulator)

Level 4 – Menyembunyikan Keyboard

Klik Show the Assistant Editor Show the Assistant editor. Klik “TextField” di View, lalu klik Connections InspectorConnections inspector dan drag Did End On Exit ke bawah tanda kurung kurawal tutup “}”.

Drag TextField (Did End On Exit)

Beri nama “hidekeyboard”, tekan Enter/klik Connect.

Hide Keyboard

Maka akan muncul code baru, yaitu – (IBAction)hidekeyboard:(id)sender;

Level 4 (Coding ViewController.h)

Run simulatornya, isilah sebuah tulisan apa saja di TextField dan klik tombol “return”.

Level 4 (iOS Simulator) #1

Maka keyboard di iOS Simulator akan menghilang/bersembunyi.

Level 4 (iOS Simulator) #2

Level 5 – Menambahkan Output

Tambahkan 2 Label ke View dan tempatkan sejajar di bawah “TextField”.

Drag 2 Label

Namakan Label yang sebelah kiri dengan “Tabungan” dan yang sebelah kanan dengan “0″ (nol).

Label 0

Klik Show the Assistant Editor Show the Assistant editor. Klik “0″ di View, lalu klik Connections Inspector Connections inspector dan drag New Referencing Outlet ke bawah code IBOutlet UITextField *myName;

Drag Label (New Referencing Outlet) #2

Beri nama “jumlah”, tekan Enter/klik Connect.

Jumlah

Maka akan muncul code baru, yaitu IBOutlet UILabel *jumlah;

Level 5 (Coding ViewController.h)

Run simulatornya dan lihatlah hasilnya.

Level 5 (iOS Simulator)

 

Level 6 – Menambahkan Button

Drag/tarik Round Rect Button dari Object library ke View (tampilan). Letakkan di bagian bawah “Tabungan” dan “0”.

Drag Button 1000 (Object Library)

Klik  Attributes Inspector Attributes inspector. Pada bagian Title, ganti tulisan “Button” dengan “1000”.

Button 1000

Klik Show the Assistant Editor Show the Assistant editor. Klik “1000” di View, lalu klik Connections Inspector Connections inspector. Drag New Referencing Outlet ke bawah code IBoutlet UILabel *jumlah

Drag Button 1000 (New Referencing Outlet)

Beri nama “nabung1000”, tekan Enter/klik Connect.

nabung1000 (UIButton)

Maka akan muncul code baru, yaitu IBOutlet UIButton *nabung1000;

Celengan Level 6 (Coding ViewController.h) #1

Drag Touch Up Inside ke bawah code – (IBAction)hidekeyboard:(id)sender;

Drag Button 1000 (Touch Up Inside)

Beri nama yang sama seperti tadi, yaitu “nabung1000”, tekan Enter/klik Connect.

nabung1000 (Touch Up Inside)

Maka akan muncul code baru, yaitu – (IBAction)nabung1000:(id)sender;
Lalu pindahlah ke Advanced_ProgrammingViewController.m untuk menampilkan semua code dari .m file.

Celengan Switch to ViewController.m

Ketiklah code berikut ini:

jumlah.text = [NSString stringWithFormat:@”%d”,[jumlah.text intValue]+1000];

dan letakkan tepat di bawah code – (IBAction)nabung1000:(id)sender {

Celengan Level 6 (Coding ViewController.m)

Run simulatornya dan lihatlah hasilnya. Setiap kali Button “1000” diklik, jumlah akan bertambah 1000.

Celengan Level 6 (iOS Simulator)

Level 7 – Menambahkan 3 Button

Tambahkan 3 Button lagi dengan cara men-drag dari Object library ke View.

Drag 3 Button (Object Library)

Beri nama masing-masing Button “2000”, “5000” dan “10000”.

2000, 5000, 10000

Klik Show the Assistant Editor Show the Assistant editor. Klik “2000” di View, lalu klik Connections Inspector Connections inspector. Drag New Referencing Outlet ke bawah code IBOutlet UIButton *nabung1000;

Drag Button 2000 (New Referencing Outlet)

Beri nama “nabung2000”, tekan Enter/klik Connect.

nabung2000 (UIButton)

Lakukan hal yang sama untuk 2 Button yang lain (Button 5000 & Button 10000). Beri nama masing-masing “nabung 5000” dan “nabung10000”.

Celengan Level 7 (Coding ViewController.h) #1

Klik “2000” di View, lalu klik Connections Inspector Connections inspector. Drag Touch Up Inside ke bawah code – (IBAction)nabung1000:(id)sender;

Drag Button 2000 (Touch Up Inside)

Beri nama yang sama seperti tadi, yaitu “nabung2000”, tekan Enter/klik Connect.

nabung2000 (Touch Up Inside)

Lakukan cara yang sama pada 2 Button lainnya.

Celengan Level 7 (Coding ViewController.h) #2

Setelah itu, pindahlah ke Advanced_ProgrammingViewController.m. Ketiklah code  – code berikut:

jumlah.text = [NSString stringWithFormat:@”%d”,[jumlah.text intValue]+2000];

jumlah.text = [NSString stringWithFormat:@”%d”,[jumlah.text intValue]+5000];

jumlah.text = [NSString stringWithFormat:@”%d”,[jumlah.text intValue]+10000];

Letakkan posisinya sesuai gambar di bawah ini:

Celengan Level 7 (Coding ViewController.m)

Run simulatornya. Setiap Button yang diklik, akan menambah jumlah sesuai dengan masing – masing nilai pada Button.

Celengan Level 7 (iOS Simulator)

Level 8 – Menambahkan Image

Sediakan sebuah gambar dengan ukuran kira – kira 1024 x 768, kemudian drag gambar tersebut ke folder Supporting Files di bagian Navigator Area.

Drag Image Celengan (Supporting Files)

Klik Finish.

Options Image Celengan

Select semua Label, Button, dan TextField di View dengan cara menekan Command + Click pada masing – masing objek. Setelah itu, cut semuanya dengan cara  menekanCommand + X.

Select All Object Celengan (View)

Drag UIImageView dari Object library ke View.

Drag Image Celengan (Object Library)

Selanjutnya, klik Media Library Media library dan drag gambar ke View.

Drag Image Celengan (Media Library)

Paste semua Label, Button, dan TextField ke View dengan cara menekan Command + V. Geser View ke bawah dan klik View Controller Advanced Programming View Controller.

Image Celengan (Advanced Programming View Controller)

Maka akan muncul Connections inspector. Pada bagian Outlets, drag semua objek ke View (kecuali searchDisplayController).

jumlah –> 0
myLabel –> Celengan
myName –> TextField
nabung1000 –> Button 1000
nabung2000 –> Button 2000
nabung5000 –> Button 5000
nabung10000 –> Button 10000

Drag Label 0 (Outlets)

Run simulatornya dan lihatlah hasilnya.

Celengan Level 8 (iOS Simulator)

Level 9 – Menambahkan Alert

Tambahkan 1 Button lagi ke View dan letakkan di bawah keempat Button yang lain.

Drag Button Buka Celengan (Object Library)

Klik Attributes Inspector Attributes inspector. Pada bagian Title, ganti tulisan “Button” dengan “Buka Celengan”.

Buka Celengan

Klik Show the Assistant Editor Show the Assistant editor. Klik Button “Buka Celengan” di View, lalu klik Connections Inspector Connections inspector. Drag New Referencing Outlet ke bawah code IBOutlet UIButton *nabung10000;

Drag Button Buka Celengan (New Referencing Outlet)

Beri nama “bukacelengan”, tekan Enter/klik Connect.

bukacelengan (UIButton)

Maka akan muncul code baru, yaitu IBOutlet UIButton *bukacelengan;

Celengan Level 9 (Coding ViewController.h) #1

Drag Touch Up Inside ke bawah code – (IBAction)nabung10000:(id)sender;

Drag Button Buka Celengan (Touch Up Inside)

Beri nama yang sama seperti tadi, yaitu “bukacelengan”, tekan Enter/klik Connect.

bukacelengan (Touch Up Inside)

Maka akan muncul code baru, yaitu – (IBAction)bukacelengan:(id)sender;

Celengan Level 9 (Coding ViewController.h) #2

Kemudian pindahlah ke Advanced_ProgrammingViewController.m. Ketiklah codeberikut:

float x = ([jumlah.text floatValue]);
if (x <100000) {
UIAlertView *alert = [[UIAlertView alloc]
initWithTitle:@”Message”
message:@”Maaf! Celengan Anda Belum Mencapai 100000!”
delegate:nil
cancelButtonTitle:@”OK”
otherButtonTitles:nil, nil];
[alert show];
}
else {
UIAlertView *alert = [[UIAlertView alloc]
initWithTitle:@”Message”
message:@”Selamat! Celengan Anda Berhasil Dibuka!”
delegate:nil
cancelButtonTitle:@”OK”
otherButtonTitles:nil, nil];
[alert show];
jumlah.text = @”0″;
}

dan letakkan tepat di bawah code – (IBAction)bukacelengan:(id)sender {

Celengan Level 9 (Coding ViewController.m)

Klik Run dan lihatlah hasilnya. Jika Anda klik Button “Buka Celengan” pada saat jumlah masih di bawah 100000, maka simulator akan menampilkan pesan bahwa celengan tidak bisa dibuka.

Celengan Level 9 (iOS Simulator) #1

Jika Anda klik Button “Buka Celengan” pada saat jumlah 100000/lebih, maka simulator akan menampilkan pesan bahwa celengan bisa dibuka dan jumlah kembali menjadi 0.

Celengan Level 9 (iOS Simulator) #2

Level 10 – Menambahkan Switch

Drag Switch dari Object library ke View. Tempatkan di bagian kiri atas View.

Drag Switch Celengan (Object Library)

Klik Show the Assistant Editor Show the Assistant editor. Klik “Switch” di View, lalu klik Connections Inspector Connections inspector. Drag New Referencing Outlet ke bawah code IBOutlet UIButton *bukacelengan;

Drag Switch Celengan (New Referencing Outlet)

Beri nama “mySwitch”, tekan Enter/klik Connect.

Celengan mySwitch (UISwitch)

Maka akan muncul code baru, yaitu IBOutlet UISwitch *mySwitch;

Celengan Level 10 (Coding ViewController.h) #1

Drag Touch Up Inside ke bawah code – (IBAction)bukacelengan:(id)sender;

Drag Switch Celengan (Touch Up Inside)

Beri nama yang sama seperti tadi, yaitu “mySwitch”.

Celengan mySwitch (Touch Up Inside)

Maka akan muncul code baru, yaitu – (IBAction)mySwitch:(id)sender;

Celengan Level 10 (Coding ViewController.h) #2

Lalu pindahlah ke Advanced_ProgrammingViewController.m dan ketiklah codeberikut:

if (mySwitch.on) {
nabung1000.enabled=YES;
nabung2000.enabled=YES;
nabung5000.enabled=YES;
nabung10000.enabled=YES;
bukacelengan.enabled=YES;
}
else {
nabung1000.enabled=NO;
nabung2000.enabled=NO;
nabung5000.enabled=NO;
nabung10000.enabled=NO;
bukacelengan.enabled=NO;
}

dan letakkan tepat di bawah code – (IBAction)mySwitch:(id)sender {

Celengan Level 10 (Coding ViewController.m)

Run simulatornya dan lihatlah hasilnya. Ketika “Switch” dalam posisi “ON”, semua Button bisa berfungsi seperti biasa.

Celengan Level 10 (iOS Simulator) #1

Ketika “Switch” dalam posisi “OFF”, semua Button tidak bisa berfungsi.

Celengan Level 10 (iOS Simulator) #2

Oke, mungkin sekian dulu tutorial dari saya. Semoga Anda berhasil dalam menyelesaikan project ini. Wassalamu’alaikum.

Leave a Reply

You must be logged in to post a comment.