Membuat Todo App Sederhana dengan Ionic

Ionic CRUD Tutorial

Membuat Todo App Sederhana dengan Ionic
June 3, 2016 mirzailhami
In Ionic Framework, Tutorial

Melanjutkan postingan yang sudah lama sekali tertunda.

Baik langsung aja, kali ini kita akan membuat aplikasi Todo App sederhana yang memiliki fitur tambah dan hapus. Data akan disimpan di localStorage dari hp user.

Memulai Aplikasi Todo App

Mari kita mulai dengan membuat aplikasi Ionic blank:

ionic start todo-app blank

Tunggu hingga proses download selesai.

Jika Anda masih belum sama sekali mengenal Ionic, silahkan baca postingan ini atau terlebih dahulu belajar instalasi Ionic.

Membuat Controller Todo App

Kita akan membuat fitur tambah dan hapus di aplikasi Todo ini. Data yang ditambah akan disimpan di localStorage, dan ditampilkan dalam list/daftar. Kita juga akan membuat fitur hapus. Edit file app.js:

Didalam controller yang dibuat ini, terdapat variabel data untuk menyimpan data todo dan juga variabel input untuk menerima inputan dari user. Fungsi addTodo, deleteTodo, saveTodo, getAllTodo akan digunakan untuk menambah, hapus, simpan dan load semua data.

.controller('AppCtrl', function($scope){
 var data = window.localStorage.getItem("todo-app") ? JSON.parse(window.localStorage.getItem("todo-app")) : [];
 $scope.input = {};

$scope.addTodo = function(){
 data.push($scope.input);
 $scope.input = {};
 saveTodo();
 getAllTodo();
 }

$scope.deleteTodo = function(idx){
 data.splice(idx, 1);
 saveTodo();
 }

function saveTodo(){
 window.localStorage.setItem("todo-app", JSON.stringify(data));
 }

function getAllTodo(){
 $scope.data = data;
 }

getAllTodo();

});

Pastikan kita juga memanggil fungsi getAllTodo agar data bisa ditampilkan saat aplikasi pertama sekali berjalan. Setelah menyelesaikan controller, saatnya kita membuat antarmuka aplikasi.

Membuat Antarmuka Todo App

Yang akan kita buat adalah input field sederhana dengan tombol submit terkoneksi dengan controller, untuk menyimpan data. Kemudian data akan ditampilkan dalam format list menggunakan <ion-list>.

Untuk menghapus data, kita tambahkan tombol hapus yang akan muncul jika list di swipe ke kiri. Edit file index.html sehingga menjadi seperti berikut:

<body ng-app="starter" ng-controller="AppCtrl">
 <ion-header-bar class="bar-positive">
 <h1 class="title">Todo App</h1>
 </ion-header-bar>
 <ion-content class="has-header">
 <div class="item-input-inset">
 <label class="item-input-wrapper">
 <input type="text" placeholder="New Todo" ng-model="input.name">
 </label>
 <button class="button button-balanced button-small" ng-click="addTodo()">
 Add Todo
 </button>
 </div>
 <ion-list can-swipe="true" >
 <ion-item ng-repeat="x in data">
 {{x.name}}
 <ion-option-button class="button-assertive" ng-click="deleteTodo($index)">
 Delete
 </ion-option-button>
 </ion-item>
 </ion-list>
 </ion-content>
 </body>

Sekarang, coba jalankan aplikasi Anda di browser.

Kesimpulan

Hanya dengan beberapa baris sintaks saja aplikasi sederhana Todo App bisa dibuat. Namun yang menjadi fokus dari tutorial ini adalah window.localStorage, yang dapat Anda gunakan menyimpan data berukuran kecil.

Saya juga menggunakan window.localStorage ini jika membuat aplikasi seperti e-Commerce, misalnya untuk menyimpan data keranjang belanja atau dapat digunakan untuk menyimpan token user yang sedang login.

  • Nanda Kusuma

    salam, mas , ini itu bisa jalan untuk os windows ndak y ? oh y mau nanya kalau Ionium – Ionic Premium Multipurpose App itu bisa bikin native kayak detik g mas ? tapi engine make wordpress ? kayak detak punya mas itu

    • Bisa mas. Yg detak saya pakai itu juga kok mas, tp ya butuh koding lagi mas. Engine bisa pake wordpress gk masalah.

  • Eko Wahyudi

    Kok gak bisa ya?

  • hinata kagerou

    app.js nya gak ada ya pak 🙁

  • Arvin Janathan Adhim

    mas minta tolong bikin tutorial ionic crud yang bisa disimpen di firebase atau backand yah.. pliss (-/-)

  • Mohamad Mansur

    Assalamualikum gan…saya juga request CRUD ionic database mysql….kalo bisa step by step gan…biar bisa diikuti…plus ada printsecreen aplikasi ketika di run..jadi biar kalo saya ada error..bisa konsultasi..Makasih