Membuat List dengan Ionic

Membuat List dengan Ionic
November 16, 2014 mirzailhami

Melanjutkan postingan sebelumnya tentang Ionic, kali ini akan membahas tentang LIST di Ionic.

Anda dapat memanfaatkan list untuk menampilkan data teks apapun, misalnya data film, berita, buku atau data lainnya. Data biasanya berasal dari server atau database yang kemudian ditampilkan pada layar Android atau iPhone.

Berikut ini kita akan belajar menggunakan list melalui controller, yaitu bagaimana menampilkan data list dari JavaScript ke smartphone.

Menggunakan Command Prompt, buatlah sebuah aplikasi dengan nama “list” menggunakan template blank dari Ionic.

[code]ionic start list blank[/code]

1. Membuat List Sederhana
Kita awali dengan contoh sederhana. Untuk menggunakan list, selain menggunakan class=”list”, Anda juga dapat menggunakan seperti berikut:

[code lang=”html”]
<!– index.html –>

<!DOCTYPE html>
<html ng-app="jagoApps">
<head>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<ion-header-bar class="bar-positive">
<h1 class="title">List</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item>Data 1</ion-item>
<ion-item>Data 2</ion-item>
<ion-item>Data 3</ion-item>
<ion-item>Data 4</ion-item>
</ion-list>
</ion-content>
</body>
</html>
[/code]

Koding di atas menghasilkan 4 (empat) list data, seperti gambar berikut:

Membuat List dengan Ionic

Membuat List dengan Ionic

Aplikasi di atas masih menggunakan html biasa untuk menampilkan list sederhana. Berikutnya kita akan menampilkan list melalui data yang kita deklarasikan terlebih dahulu melalui JavaScript.

2. Setup Aplikasi
Pertama, mendefinisikan nama aplikasi, melalui js/app.js. Buka berkas js/app.js dan tambahkan koding berikut:

[code lang=”html”]
<!– app.js –>

var app = angular.module(‘jagoApps’, [‘ionic’])

app.controller(‘listCtrl’, function($scope){
$scope.film = [
{name: ‘Sepaidermen 3’},
{name: ‘Eks-Men 2’},
{name: ‘AironMen 3’},
{name: ‘Armagedong’},
]
})
[/code]

Yang kita lakukan di atas adalah mendefinisikan nama controller baru yaitu “listCtrl” dan variabel film yang memuat 4 (empat) judul film seperti di atas tersebut.

Controller “listCtrl” nantinya akan kita gunakan pada file index.html, begitu juga dengan variabel film juga akan kita tampilkan di list.

3. Konfigurasi index.html
Setelah mengatur halaman app.js dan mendeklarasikan variabel, berikutnya adalah mencetak variabel tersebut pada halaman index.html.

Pada bagian body dan ion-item dari halaman index.html, tambahkan properti seperti berikut:

[code lang=”html”]
<!– index.html –>

<!DOCTYPE html>
<html ng-app="jagoApps">
<head>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="listCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Filem Minggu Inih</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="x in film">{{x.name}}</ion-item>
</ion-list>
</ion-content>
</body>
</html>
[/code]

Perhatikan bagian body di atas, kita baru saja memanggil controller “listCtrl”, yaitu controller yang sebelumnya sudah kita deklarasikan pada file app.js.

Kemudian, ng-repeat pada bagian ion-item berfungsi untuk mengulang variabel larik (array) film yang kita deklarasikan sebelumnya pada app.js. untuk melakukan perulangan dari Ionic, cukup menggunakan metode seperti di atas. Ini adalah salah satu fitur dari AngularJS, yang merupakan engine dari Ionic.

Hasil akhir dari aplikasi di atas seperti berikut:

List Sederhana Menggunakan Ionic

List Sederhana Menggunakan Ionic

Angular telah menyediakan metode yang sangat sederhana untuk menampilkan data list, seperti yang sudah kita buat di atas.

Berikutnya, bagaimana jika ingin menambah atau menghapus list?

  • surya

    Tutorialnya bagus banget
    Itu kan data listnya dari fungsi
    bagaimana jika data yang diambil dari database?

  • Hatoko

    ~ Permisi Pak
    Mau nanya nih.
    “Misalnya saya punya Controllers seperti ini”

    .controller(‘alur’, function($scope) {
    $scope.profile = [{nama:”hatoko1″},{nama:”hatoko2″},{nama:”hatoko3″}];
    })

    Permasalahanya saya ingin menambahkan object “nama” dengan melalui inputan dari html
    yang ada didalam $scope.profile dan kemudian bisa di akses dari halaman / view yang berbeda.

    Mohon maaf jika pertanyaan agak sedikit bingung. soalnya saya baru mengenal Framework ini

    • Jika masalahnya adalah menangkap inputan, coba gunakan document.getElementById. Sebelumnya berikan id pada textbox yang ingin diambil inputannya.

      Atau coba lihat contohnya disini http://codepen.io/ionic/pen/CrInw atau http://ionicframework.com/docs/api/directive/ionRadio/. Perhatikan bagaimana menampilkan value dari form input-nya.

      • Guest

        kalau untuk menangkap input saya menggunakan document.querySelector(‘#idkomponen’)
        Maksud pertanyaan saya adalah memasukan object baru kedalam Array profil.

        Fungsi $scope.addProfil digunakan untuk menambahkan object name baru kedalam Array $scope.profil.

        Fungsi pada $scope.addProfil tidak bisa jalan entah saya tidak tau cara pemakaiannya didalam html saya sudah coba pakai ng-click , ng-submit tapi hasilnya nihil.

        saya ingin menambahkan hatoko4 kedalam $scope.profil.
        dan mendapatkan hasil

        $scope.profil = [ {nama:’hatoko1′},{nama:’hatoko2′},{nama:’hatoko3′},{nama:’hatoko4′}]

        Maaf jika pertanyaan saya makin pusing, karna saya sampai sekarang belum mengerti penggunaan ionic

      • kalau untuk menangkap input saya menggunakan document.querySelector(‘#idkomponen’)
        Maksud pertanyaan saya adalah memasukan object baru kedalam Array profil.

        Screnshot .Controller milik saya .

        https://lh4.googleusercontent.com/-AEHilIcQgR8/VHIrrDi5pLI/AAAAAAAACNg/_cfxfMAOc0Q/s286/hatoko.JPG

        Fungsi $scope.addProfil digunakan untuk menambahkan object name baru kedalam Array $scope.profil.

        Fungsi pada $scope.addProfil tidak bisa jalan entah saya tidak tau cara pemakaiannya didalam html saya sudah coba pakai ng-click , ng-submit tapi hasilnya nihil.

        saya ingin menambahkan hatoko4 kedalam $scope.profil.
        dan mendapatkan hasil

        $scope.profil = [ {nama:’hatoko1′},{nama:’hatoko2′},{nama:’hatoko3′},{nama:’hatoko4′}]

        Maaf jika pertanyaan saya makin pusing, karna saya sampai sekarang belum mengerti penggunaan ionic

      • Akhir nya problem saya selesai juga.
        dengan pembuatan controller baru pada view / halaman baru.
        Saya memiliki 2 Controller. satu di dan satunya lagi di view yang saya setting langsung di ui-router nya.

        .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
        .state(‘utama’, {
        url: ‘/utama’,
        templateUrl: ‘halaman/halaman-utama.html’,
        controller:’ctrl-test’
        })
        .state(‘sub’, {
        url: ‘/sub’,
        templateUrl: ‘halaman/halaman-sub.html’
        });
        $urlRouterProvider.otherwise(‘/utama’);
        })

        .controller(‘learn0-Ctrl’, function($scope) {
        $scope.profil = [
        {nama:’hatoko1′},
        {nama:’hatoko2′},
        {nama:’hatoko3′}
        ]
        })
        controller(‘ctrl-test’, function($scope) {
        $scope.add = function() {
        $scope.profil.push({nama:’hatoko’+($scope.profil.length+1)})
        console.log($scope.profil);
        }
        })

  • Pozan MGd

    Hebat Bapak Kita Ini..
    Mau dong di ajarin Ionic ini.. Biar tambah sedikit ion program Android ini.
    Kira2 dengan pangalaman otak-atik WordPress bisa belajar ionic ini? minus bahasa jawa eh, Java?

    • Asal bisa HTML, CSS, JavaScript udah bisa bg, InsyaAllah

  • muhammad rifki

    Mas, saya udah ngikutin cara diatas. Namun kenapa ya x in film pas di repeat ga bisa muncul padahal udah dipanggil {{ x.name }}
    mohon pencerahan nya.

    • muhammad rifki

      sudah done mas, ternyata saya lupa bikin var app nya hhe

  • lorosukmo

    kalo membual list sms yang masuk kira2 bisa gak mas?? kalo bisa implementasinya bagaimana? terimakasih..