Skip to main content
cara membuat list menggunakan frmaework ionic

Cara Membuat List Menggunakan Ionic Framework

Pendahuluan Cara Membuat List Menggunakan Ionic Framework

Salam sejahtera, masih seputar pembelajaran tentang penggunaan Ionic Framework untuk pengembangan aplikasi mobile, kali ini kita akan bahas tentang Cara Membuat List Menggunakan Ionic Framework. Ada beberapa materi pembahasan sebelumnya tentang awal menggunakan Framework Ionic, mulai dari instalasi awal, pembuatan project dan menjalankan project melalui serve sampai pada tahap pengenalan component CSS. Pembahasan tersebut mudah-mudahan menjadi landasan awal untuk lanjut ketahap ini. Pembahasan tentang pengenalan Struktur code project ionic ini sangat penting untuk pemahaman untuk pengembangan project ionic.

Baca : Pengenalan Component CSS Ionic

Topik pembahasan cara membuat list Menggunakan Ionic Framework

  • Pendahuluan
  • Pengenalan List
  • Contoh Source Code List
  • Kesimpulan

Download Source Code Materi

Untuk tahapan awal dalam mempelajari tentang cara membuat list pada Ionic, pertama sekali akan kita bahas dulu apa itu list dan bagaimana contoh penerapan nya.

Pengenalan Membuat List Ionic

Tahapan pertama dalam topik tentang cara membuat list Menggunakan Ionic Framework, kita mulai dulu mengenal apa iti list. Jika kita sering membuka suatu aplikasi baik dalam versi mobile maupun desktop sering kita melihat tampilan halaman awal yang menampilkan daftar item dalam bentuk memanjang kebawah (bisa di scroll). Kita dapat memanfaatkan list untuk menampilkan data teks apapun, misalnya data film, data lagu, data berita, buku atau data lainnya. Data biasanya berasal dari file array ataupun server atau database yang kemudian ditampilkan pada layar Android atau iPhone. Untuk jelasnya berikut tampilan contoh penerapan list:

cara membuat list menggunakan framework ionic
Contoh Cara Membuat list ionic

Dengan menggunakan list akan memudahkan tampilan aplikasi. Pada perangkat mobile tentunya ukuran layar menjadi kendala untuk menampilkan data. Menggunakan list, kita bisa menampilkan data yang terurut yang bisa discroll kebawah atau keatas. List bisa ditampilkan dalam bentuk text, icon, ataupun gambar. Jika kita sering menggunakan Facebook Mobile, jika mau melihat update status terbaru, paling mudah dengan mengscroll kebawah dan tampilan nya memberikan kemudahan pengguna.

cara membuat list di Ionic sangat mudah. Untuk kodenya diletakkan dibagian content. Baca kembali materi sebelumnya tentang pengenalan Component CSS Header, content dan footer. Kode untuk menambahkan list di ionic yaitu :




<ul class="list">



<li class="item">
      ...
    </li>



</ul>



Untuk lebih jelasnya kita mulai dari awal membuat list sederhana menggunakan ionic.

Membuat List Dividers

Tampilan list dalam mode ini kita bisa menampilkan data dalam suatu group. kode yang digunakan yaitu “item-divider“. Secara default tampilan mode ini menampilkan bacground default dan ukuran font standart, namun kita bisa mengubahnya kembali. Berikut contoh kodenya :

Note : Buka kembali aplikasi yang telah dibuat sebelumnya, kemudian modifikasi source nya dan run serve kembali

<ion-content>

<div class="list">

<div class="item item-divider">
Kategori Buku Komputer
</div>

<a class="item" href="">
Pemrograman Ionic
Pemrograman PHP
Pemrograman Java
</a>

<div class="item item-divider">
Kategori Buku Kalkulus
</div>

<a class="item" href="">
Kalkulus Matematika
Logika Matematika
</a>
</div>

</ion-content>

Berikut Hasil run serve nya :

cara membuat list menggunakan framework ionic
cara membuat List kategori

Jika kita lihat hasilnya, data akan dikelompokkan berdasarkan kategori yang kita buatkan. Data ini masih kita buat secara manual bukan dari database.

List Icon

Dibaca dari judulnya cara membuat list, kita pastinya sudah bisa paham, bahwa kita bisa menambahkan Icon atau gambar pada tampilan list data kita. Icon nya bisa kita letakkan di kiri (left) atau kanan (right). Kode awal yang digunakan yaitu : item-icon-left untuk icon letak di kiri dan item-icon-right untuk icon letak dibagian kanan. Berikut contoh sederhana nya :

<ion-content> 
<div class="list"> 
<div class="item item-divider"> Aktifitas Kita </div>
<a class="item item-icon-left" href=""> <i class="icon ion-email"></i>Cek E-Mail </a> 
<a class="item item-icon-left item-icon-right" href=""> 
<i class="icon ion-chatbubble-working">
</i>Cek HP/Telpon <i class="icon ion-ios-telephone-outline"></i></a> 
<a class="item item-icon-left" href="#"> <i class="icon ion-mic-a"></i>Rekam Lagu <span class="item-note">Lagu Barat</span></a> 
<a class="item item-icon-left" href="#"> <i class="icon ion-person-stalker"></i> Rekan 
<span class="badge badge-assertive">0</span> </a> </div>
 </ion-content>

Hasilnya jika di run :

cara membuat list menggunakan frmaework ionic
Cara Membuat List dengan Icon

List Item Avatar

Maksudnya disini adalah cara membuat list disertai gambar avatar (gambar kecil) namun tidak berbentuk thumbnail. Untuk membuat nya kita gunakan kode class “item-avatar”. Pastikan kita sudah siapkan gambar yang kita letakkan dalam folder project. Berikut contoh sederhana:

<a class="item item-avatar" href="#">
      <img src="img/icon.jpg">
<h2>Ridwan, S.ST</h2>
Admin Web Blogciqwan.com
    </a>

Hasilnya run project:

cara membuat list menggunakan frmaework ionic
cara membuat List icon avatar

List Item Thumbnail

Berbeda dengan membuat list icon nya avatar, jika kita ingin menampilkan gambar dalam bentuk yang lebih besar ukuran nya, kita bisa set thumbnail. Kode yang digunakan “item-thumbnail-left” atau “item-thumbnail-right”. Berikut contoh nya :

      <a class="item item-thumbnail-left" href="#">
      <img src="img/icon.jpg">
<h2>Ridwan, S.ST</h2>
Admin Web Blogciqwan.com
    </a>
      <a class="item item-thumbnail-right" href="#">
      <img src="img/icon.jpg">

<h2>Ridwan, S.ST</h2>
Admin Web Blogciqwan.com
    </a>

Hasil run project:

cara membuat list menggunakan frmaework ionic
Membuat List icon thumbnail

Demikian beberapa contoh sederhana cara membuat list menggunakan Ionic dengan berbagai macam jenis. Data tersebut masih langsung kita ambil dan kita letakkan dalam file index.html. Namun, kita bisa juga menyimpan data difile JavaScript (.js) kemudian kita panggil di file index.html. Untuk jelasnya kita lihat contoh sederhana berikut :

Contoh Membuat List Sederhana

Berikutnya kita akan menampilkan list melalui data yang kita deklarasikan terlebih dahulu melalui JavaScript. File javascript terletak di “www/js/app.js”. Buka pakai editor kesukaan anda, kemudian tambahkan source berikut :

  • Edit file app.js

angular.module('starter', ['ionic'])
.controller('listCtrl', function ($scope) {
$scope.data=[
{name: 'Data 1'},
{name: 'Data 2'},
{name: 'Data 3'},
{name: 'Data 4'},
{name: 'Data 5'},
]
})

Keterangan : Yang kita lakukan di atas adalah mendefinisikan nama controller baru yaitu “listCtrl” dan variabel data yang memuat 5 (lima) data. Controller “listCtrl” nantinya akan kita gunakan pada file index.html, begitu juga dengan variabel data juga akan kita tampilkan di list.

  • Panggil di file 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:

<html ng-app="starter">
<body ng-controller="listCtrl">
<ion-pane>
<ion-header-bar class="bar-calm">
<h1 class="title">CONTOH APLIKASI LIST DATA</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="x in data">{{x.name}}</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class="bar-calm">
</ion-footer-bar>
</ion-pane>
</body>
</html>

Keterangan : Pertama kali kita panggil dibagian tag <html ng-app=”starter”>. Kemudian 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) data 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.

cara membuat list menggunakan frmaework ionic
Contoh membuat List sederhana

Referensi lain untuk project contoh : Link

Note :

  • Untuk script diatas kita menggunakan bahasa AngularJS. Untuk lebih memahami apa itu angularJS, sebaiknya baca tulisan saya tentang AngularJS dari awal biar tidak bingung.

Kesimpulan Cara Membuat List Menggunakan Framework Ionic

Sekian tutorial Membuat List Dengan Ionic, kita akan berjumpa kembali di tutorial selanjutnya pada materi ionic framework. Anda bisa belajar dengan mencoba mengubah-ubah source codenya. Untuk belajar silahkan download file source yang telah saya upload.

Semoga bermanfaat.

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com