Tutorial Swift: Membuat Aplikasi TableView Sederhana (bagian 2)

Tutorial ini adalah lanjutan dari "Tutorial Swift: Membuat Aplikasi TableView Sederhana (bagian 1)". Bagi yang belum mengikuti tutorial bagian 1, silakan untuk membacanya terlebih dahulu. Seperti yang telah dijelaskan pada bagian 1, dalam tutorial ini kita mencoba untuk membuat sebuah aplikasi iOS sederhana dengan menggunakan user interface TableView. Aplikasi ini diberi nama “Daftar Belanja”, dimana dengan menggunakannya, pengguna dapat membuat daftar belanja sesuka hati kemudian dengan mudah pula dapat menghapus setiap item belanja yang sudah didapat atau yang batal dibeli. Pada bagian 1 kita telah membuatnya dengan menggunakan XCode 6.1 dalam bahasa program Swift.

Secara garis besar aplikasi ini terdiri atas dua bagian yaitu:

1. Source Code, yang berupa program yang kita tulis dengan bahasa Swift.
2. User Interface, yang akan kita buat menggunakan Storyboard.

Pada bagian 1, kita telah mengkoneksikan kedua bagian ini sehingga aplikasi dapat bekerja sesuai program yang ditulis pada Source Code dengan tampilan yang sesuai dengan User Interface pada Storyboard.

Pada Tutorial Swift: Membuat Aplikasi TableView Sederhana bagian 2 ini, kita akan membahas Source Code dari aplikasi yang telah kita buat pada Tutorial Swift: Membuat Aplikasi TableView Sederhana bagian 1.

import UIKit
    
//-- membuat class beru bernama ViewController yang mengimplementasikan interface UIViewController dan UITableViewDataSource.
    
class ViewController: UIViewController, UITableViewDataSource {

//-- membuat Outlet baru bernama tableView dengan tipe UITableView.
    
    @IBOutlet weak var tableView: UITableView!

// -- membuat variable bernama names yang berupa array untuk menyimpan data bertipe String yang akan kita gunakan untuk menyimpan item belanja atau nama-nama barang dalam daftar belanja yang akan kita tampilkan di tableView.

    var names = [String]()
    
// -- membuat Action baru yang berfungsi sebagai function untuk menambahkan item baru ke dalam daftar belanja.

    //Implement the addName IBAction
    @IBAction func addName(sender: AnyObject) {

// -- menampilkan dialog box alert yang meminta kita untuk menambahkan item belanja baru pada text field yang disediakan.
 
        var alert = UIAlertController(
            title: "Item Baru",
            message: "Tambah Item Belanja",
            preferredStyle: .Alert
        )
        
// -- mendeklarasikan variable saveAction yang menyatakan aksi yang akan dilakukan saat button Save diklik, yaitu: menyimpan item belanja baru ke dalam daftar belanja.

        let saveAction = UIAlertAction(title: "Save", style: .Default) {
            (action: UIAlertAction!)->Void in
            
// -- mengambil text field yang berindeks [0] dari variable alert.

            let textField = alert.textFields![0] as UITextField

// -- menambahkan item belanja baru ke variable array bernama names, yang tak lain adalah String array yang digunakan untuk menyimpan daftar nama barang belanjaan.

            self.names.append(textField.text)

// -- me-reload tampilan tableView untuk menampilkan item berlanja yang baru saja ditambahkan ke dalam daftar belanja.

            self.tableView.reloadData()
        }

// -- mendeklarasikan variable cancelAction yang menyatakan pembatalan penyimpanan item belanja baru ke dalam daftar belanja.
        
        let cancelAction = UIAlertAction(title: "Cancel", style: .Default){
            (action: UIAlertAction!) -> Void in
        }
        
        alert.addTextFieldWithConfigurationHandler(){
            (textField: UITextField!) -> Void in
        }
        
// -- menambahkan aksi penyimpanan item belanja baru di dialog box alert.
  
        alert.addAction(saveAction)

// -- menambahkan aksi pembatalan penyimpanan item belanja baru di dialog box alert.

        alert.addAction(cancelAction)
        
        presentViewController(alert, animated: true, completion: nil)
    }

// -- mengedit implementasi dari function viewDidLoad() untuk disesuaikan dengan tampilan maupun fungsi aplikasi yang kita buat, disini kita dapat memberi title pada tampilan tableView.

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "\"Daftar Belanja\""

// -- meregistrasi cell pada tableView dan mengatur setting cell tersebut, yang biasanya dilakukan dengan menggunakan Interface Builder. Kali ini kita hanya akan memberi identifier saja pada cell tersebut.

        tableView.registerClass(UITableViewCell.self,
            forCellReuseIdentifier: "Cell")
        
    }
    
    //MARK : UITableViewDataSource
// -- berikut adalah function tableView yang menentukan jumlah baris pada tableView dengan menghitung jumlah element (item belanja) yang disimpan dalam array names.

    func tableView(tableView: UITableView,
        numberOfRowsInSection section: Int)->Int {
            return names.count
    }
    
// -- function tableView berikut berfungsi untuk membuat cell - cell yang ditampilkan pada tableView. Masing-masing cell ini akan berisi item belanja yang diambil dari array names sesuai nomor index-nya.

    func tableView(tableView: UITableView,
        cellForRowAtIndexPath indexPath: NSIndexPath)->UITableViewCell{
            
            let cell = tableView.dequeueReusableCellWithIdentifier("Cell") as UITableViewCell
            cell.textLabel.text = names[indexPath.row]
            
            return cell
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    //MARK: make the UITableViewCell editable (delete and / or other action)
    
// -- function tableView berikut berfungsi untuk menentukan apakah data pada cell-cell tableView boleh diedit atau tidak. Jika boleh diedit, kita set "return true", jika tidak, kita set "return false".

    func tableView(tableView: UITableView, canEditRowAtIndexPath indexPath: NSIndexPath) -> Bool {
        return true
    }
    
// -- selanjutnya, function tableView berikut memungkinkan kita untuk menghapus item belanja yang sudah terbeli ataupun yang sudah tak diperlukan lagi.

    func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
        
        if (editingStyle == UITableViewCellEditingStyle.Delete) {
            self.names.removeAtIndex(indexPath.row)
            self.tableView.deleteRowsAtIndexPaths([indexPath], withRowAnimation: UITableViewRowAnimation.Fade)
            self.tableView.reloadData()
        }
    }
    
}
    

Demikian penjelasan source code aplikasi "Daftar Belanja" yang telah kita buat. Sampai disini, Aplikasi "Daftar Belanja" telah dapat berjalan dengan normal dan kita telah mengerti source code-nya. Namun demikian, data yang berupa item-item belanjaan yang ditampilkan pada tableView "Daftar Belanja" belum persistent, artinya: ketika aplikasi di-nonaktifkan atau device-nya di-reboot, maka data item belanja yang telah kita tambahkan dan disimpan pada array names akan hilang. Sehingga, saat aplikasi "Daftar Belanja" diaktifkan kembali, tableView akan ditampilkan dalam kondisi tanpa data alias kosong.

Untuk membuat data-data item belanja ini bersifat persistent, kita dapat menggunakan fasilitas Core Data, sehingga data item belanja akan tetap ada meskipun aplikasi di-nonaktifkan ataupun device-nya di-reboot. Bagaimana menggunakannya pada aplikasi "Daftar Belanja" yang telah kita buat? Nanti akan kita bahas pada Tutorial Swift: Membuat Aplikasi Core Data.

Bagikan Artikel ini