Membuat Form Input dan Menampilkan Hasilnya, dengan AngularJS

Pada artikel ini kita akan belajar cara membuat form input dengan menggunakan AngularJS. Anda bisa mengunduh angularJS di https://angularjs.org. Aplikasi yang dibuat dalam tutorial ini menggunakan Bootstrap untuk memudahkan penulis dalam menghias tampilannya. Berikut adalah hasil dari aplikasi yang akan kita pelajari:
alt

Pada bagian bawah aplikasi terdapat form untuk memasukkan data, jika data sudah di submit maka data akan disimpan menjadi sebuah array baru yang ditampilkan di form Database yang dapat dilihat pada bagian atas aplikasi. Dalam aplikasi ini tidak diperlukan database tersendiri, jadi ketika halaman di-refresh maka semua data yang disimpan akan hilang.
Langkah pertama untuk membuat aplikasi ini adalah membuat dua buah file, yaitu index.html dan app.js. Dalam index.html kita akan membuat tampilan aplikasi, sedangkan dalam app.js berisi controller dan javascript. Selanjutnya dalam index.html buat kerangka aplikasinya:

<!DOCTYPE html>  
<html>  
<head>  
--- <link & title> ---
</head>  
<body>  
--- <form aplikasi serta tampilan data> ---
</body>  
</html>  



1. Hubungkan file-file penting ke index.HTML
Beri title pada script serta hubungkan bootstrap, AngularJS, index.css dan app.js dengan file index.html. Isi index.css akan dibahas nanti. Semua dimasukkan dalam elemen <head>:

<head>  
    <title>Form AngularJS</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <script type="text/javascript" src='angular.min.js'></script>
    <script type="text/javascript" src='app.js'></script>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>  

Agar bootstrap dapat berjalan, maka penting untuk menentukan elemen dari HTML untuk dijadikan root elemen dari AngularJS. untuk melakukan ini tambahkan properti ng-app='nama_aplikasi' pada tag <body>. Nilai dari nama_aplikasi kita tentukan dalam app.jss yang penulis akan bahas nanti, untuk sekarang isi dengan nilai myApp.

Selanjutnya buat area untuk menampilkan data serta form input, kedua elemen ini dimasukkan dalam tag <body>. Sebelum membuat kedua elemen ini, buat tag <div> terlebih dahulu, masukkan tag ini dalam <body>. Beri properti ng-controller='nama_controller dalam tag <div>. nilai dari nama_controller akan ditentukan di app.js. Untuk sekarang beri nilai MyController, sehingga tag menjadi <div ng-controller='MyController'>. fungsi dari tagdiv ini adalah menentukan elemen yang akan dikendalikan oleh controller, controller akan dibuat dalam app.js. Tag body akan menjadi seperti ini:

<body>  
<div ngcontroller='MyController'>  
--- <form aplikasi serta tampilan data> ---
</div>  
</body>  



2. Buat area untuk menampilkan data.
Untuk tampilan data, masukkan script berikut dalam tag controller <div>:

<h2>Database</h2>  
        <ul class='list-group'>
        <li class='list-group-item' ng-repeat='database in databases'>
            <div>
                <p>Nama: {{database.nama}}</p>
                <p>Alamat: {{database.alamat}}</p>
                <p>Jenis Kelamin: {{database.kelamin}}</p>
                <button class="btn" type="button" ng-click="remove(database)">Hapus</button>
            </div>
        </li>
        </ul>

Pada script diatas elemen <ul> dan <li>:

<ul class='list-group'>  
<li class='list-group-item' ng-repeat='database in databases'>  
--- <Script tampilan database> ---
</li>  
</ul>  

Berfungsi sebagai wadah untuk setiap array yang ditampilan, masing-masing elemen tersebut diberi class dengan properti dari bootstrap untuk memperindah tampilan. sedangkan propert ng-repeat='database in databases' merupakan properti AngularJS yang berfungi untuk menampilkan data dari array container. Didalam <ul> terdapat script:

<div>  
                <p>Nama: {{database.nama}}</p>
                <p>Alamat: {{database.alamat}}</p>
                <p>Jenis Kelamin: {{database.kelamin}}</p>
                <button class="btn" type="button" ng-click="remove(database)">Hapus</button>
            </div>

Yang berfungsi untuk menampilkan nilai dari nama, alamat, dan jenis kelamin yang sudah dimasukkan di form. Elemen <button> berungsi untuk menampilakn tombol hapus.

3. Buat Form input
Berikut adalah script untuk form input:

<form ng-submit='addDatabase()'>  
    <label>Nama</label><br/>
    <input ng-model='form.nama' type='text'><br/>
    <label>Alamat</label><br/>
    <input ng-model='form.alamat' type='text'><br/>
    <label>Jenis Kelamin</label><br/>
    <input type='radio' ng-model='form.kelamin' value='Laki-laki'>Laki-laki &nbsp;
    <input type='radio' ng-model='form.kelamin' value='Perempuan'>Perempuan <br/>
    <input class='btn' id='submit' type='submit' value='Add Database'/>
</form>  

Masukkan script tersebut ke dalam elemen <body> tepat dibawah script untuk area tampilan data. properting-submit='addDatabase() merupakan properti AngularJS yang berfungsi untuk memasukkan nilai form ke dalam container array yang terletak dalam app.js. elemen <label> dan <input> berfungsi untuk menampilkan form input. Sedangkan untuk tombol submit gunakan elemen <input> yang diberi properti bootstrap class='btn'. Isi dari file index.html selesai disini, selanjutnya kita akan menuju ke file app.js.

4. app.js
Dalam app.js kita akan membuat modul aplikasi, controller, variabel array untuk menampung data, fungsi untuk manambah data serta untuk menghapusnya. Pertama buat modul dengan menggunakan script:

var app = angular.module('myApp', []);  

Modul berfungsi untuk menampung fungsi-fungsi dalam AngularJS. Selanjutnya buat Controller untuk menampung fungsi tambah dan mengurangi data, serta untuk tempat menampung data:

app.controller('MyController', ['$scope', function($scope){  
--- <fungsi tambah data, hapus data, dan variabel array>---
}]);

untuk fungsi menambah data dalam array, dapat digunakan script berikut:

$scope.addDatabase = function(){
        $scope.databases.push($scope.form);
        $scope.form = {};
    }

untuk menampung data, buat variabel dalam controller yang berfungsi untuk menampung array, array merupakan kumpulan dari data:

$scope.databases = [];

terakhir, untuk menghapus data array gunakan tambahkan fungsi:

$scope.remove=function(database){ 
        var index=$scope.databases.indexOf(database)
        $scope.databases.splice(index,1);     
    }

Properti tambah data, hapus data, dan tempat menampung array ketiganya dimasukkan dalam fungsi controller.

5. index.css
File ini berfungsi untuk merapikan tampilan yang sudah ada, sebenarnya tanpa file ini pun aplikasi sudah bisa berjalan. untuk melihat isi dari file index.css dan semua script dalam artikel ini dapat dilihat di https://github.com/era-belajar/Form-AngularJS.

Geri Muhano

Web programmer di erabelajar.com. Alumni UIN Jakarta.