Membuat Form Biodata dan Proses Data menggunakan AngularJS

Pada pembahasan kali kita akan membuat CRUD dengan AnggularJs dan Bootstrap .Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. anda bisa mempelajari bootstrap di situs resmi http://getbootstrap.com/ .Pertama yang kita butuhkan adalah File AngularJS .Anda bisa mengunduh disitus resmi https://angularjs.org. Selanjutnya kita Membuat Form Menggunakan Bootstap seperti berikut :

alt

Berikut Source Code Lengkap index.html :

<html>  
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>From Biodata</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
        <script src="js/jQuery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/moment.js"></script>
        <script src="js/angular.min.js"></script>
        <script src="js/proses.js"></script>
        <script src="js/bootstrap-datetimepicker.min.js"></script>
    </head>
        <body>
            <form name="myForm"   >
                <div ng-controller="MyController" ng-app="myApp">
                    <div class="container">
                        <div style="padding-top: 25px;">
                            <center><h2>Form Data Diri</h2></center>
                        </div>
                            <br/>
                                    <div class="row">
                                        <div class='col-sm-4'></div>
                                            <div class='col-sm-5'>
                                                <table class='table table-bordered'>
                                                    <tr>
                                                        <td>Nama Mahasiswa</td>
                                                        <td ><input  ng-model="form.nama"  name="nama" type='text'   class='form-control'  ></td>
                                                    </tr>

                                                    <tr>
                                                        <td>Tanggal</td>
                                                        <td>
                                                            <div class="form-group">
                                                                    <div class='input-group date' id='datepicker'>
                                                                        <input type="text" name="tanggal" ng-model="form.tanggal"  class="form-control" >
                                                                            <span class="input-group-addon">
                                                                                <span class="glyphicon glyphicon-calendar"></span>
                                                                            </span>
                                                                    </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Alamat</td>
                                                        <td><textarea  size="10" name="alamat" ng-model="form.alamat" ></textarea></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Telpon</td>
                                                        <td><input type="text" id="telpon" name="telpon" ng-model="form.telpon" onkeypress="return isNumber(event)" class='form-control'></td>
                                                    </tr>
                                                <div class="control-group">
                                                    <tr>
                                                        <td>Jenis Kelamin</td>
                                                        <div class="controls">
                                                        <td>
                                                            <div class="form-group">
                                                                <div class="col-sm-6">
                                                                    <input type="radio" name="jenis" ng-model="form.jenis"  value='Laki-laki'> Laki - Laki &nbsp;
                                                                    <input type="radio" name="jenis" ng-model="form.jenis"  value='Perempuan'> Perempuan
                                                                </div>
                                                              </div>    
                                                        </td>
                                                    </tr>
                                                        </div>
                                                </div>
                                                    <div ng-init="country=['Indonesia','Malaysia','Singapura','China']"></div>
                                                <tr>
                                                    <td>Kewarganegaraan</td>
                                                    <td>
                                                        <select class="form-control" name="negara" ng-model="form.negara"  >
                                                            <option>-</option>
                                                            <option ng-repeat="tampilan in country">{{tampilan}}</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="center" colspan="2">
                                                        <button type="button" name="submit"  ng-click="addDatabase()"   class="btn btn-primary"  >
                                                            <span class="glyphicon glyphicon-plus"></span> Save </button>
                                                    </td>
                                                </tr>

                                            </div>
                                                </table>
            </form>
                                            <div ng-repeat="database in databases" >
                                                <h3>Output Hasil </h3>
                                                    <table  class='table table-bordered'>
                                                        <tr>
                                                            <td>Nama Mahasiswa</td>
                                                            <td><input type='text' value={{database.nama}}  class='form-control' ></td>
                                                        </tr>
                                                        <tr>
                                                            <td>Tanggal</td>
                                                            <td>
                                                                <div class="form-group">
                                                                    <div class='input-group date' id='date'>
                                                                        <input  type='text' name="tanggal" value={{database.tanggal}}  class="form-control"  />
                                                                            <span class="input-group-addon">
                                                                                <span class="glyphicon glyphicon-calendar"></span>
                                                                            </span>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>Alamat</td>
                                                            <td><textarea size="10">{{database.alamat}}</textarea></td>
                                                        </tr>
                                                        <tr>
                                                            <td>Telpon</td>
                                                            <td><input type="text"  name="itelepon" value={{database.telpon}} class='form-control'></input></td>
                                                        </tr>
                                                        <div class="control-group">
                                                            <tr>
                                                            <td>Jenis Kelamin</td>
                                                                <div class="controls">
                                                                    <td>
                                                                        <input type="text" name="jenis" value={{database.jenis}} class='form-control'>
                                                                    </td>
                                                            </tr>
                                                                </div>
                                                        </div>
                                                        <div ng-init="country=['Indonesia','Malaysia','Singapura','China']"></div>
                                                        <tr>
                                                            <td>Kewarganegaraan</td>
                                                            <td>
                                                                <input type="text" name="inegara" value={{database.negara}} class='form-control'>
                                                            </td>
                                                        </tr>
                                                            <td align="center" colspan="2">
                                                                <button type="submit" name="delete" ng-click="remove(database)"  onClick="return confirm(' Data Yakin Mau dihapus ?');" class="btn btn-danger"  >
                                                                    <span class="glyphicon glyphicon-remove"></span> Delete </button>
                                                                <button type="button" ng-click="edit(database)" onClick="return confirm(' Data Yakin Mau Edit Data ?');" name="edit"  class="btn btn-md btn-primary"><span class="glyphicon glyphicon-check"></span> Edit</button>
                                                            </td>


                                                    </table>
                                            </div>
                                    </div>
                    </div>
                </div>

        <script type="text/javascript">
            $(function () {
                $('#datetimepicker').datetimepicker({
                    format: 'DD MMMM YYYY HH:mm',
                });

                $('#datepicker').datetimepicker({
                    format: 'DD MMMM YYYY',
                });

                $('#date').datetimepicker({
                    format: 'DD MMMM YYYY',
                });

                $('#timepicker').datetimepicker({
                    format: 'HH:mm'
                });
            });
        </script>

        <script type="text/JavaScript">
        function isNumber(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode > 31 && (charCode < 48 || charCode > 57)) {
                return false;
            }
            return true;
        }
        </script>


    </body>
</html>  

Source Code berikut digunakan untuk menampilkan hasil dari inputan .

Syntax ini digunakan untuk melakukan looping pada data . yang diambil pada function databases . database digunakan sebagai inisialisasi data .
<div ng-repeat="database in databases" > Syntax value={{database.nama}} digunakan untuk mengambil nilai yang ditampung pada function database .

Source Code berikut digunakan untuk menampilkan hasil dari dari input data .

<div ng-repeat="database in databases" >  
    <h3>Output Hasil </h3>
        <table  class='table table-bordered'>
            <tr>
                <td>Nama Mahasiswa</td>
                <td><input type='text' value={{database.nama}}  class='form-control' ></td>
            </tr>
            <tr>
                <td>Tanggal</td>
                <td>
                    <div class="form-group">
                        <div class='input-group date' id='date'>
                            <input  type='text' name="tanggal" value={{database.tanggal}}  class="form-control"  />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Alamat</td>
                <td><textarea size="10">{{database.alamat}}</textarea></td>
            </tr>
            <tr>
                <td>Telpon</td>
                <td><input type="text"  name="itelepon" value={{database.telpon}} class='form-control'></input></td>
            </tr>
                <div class="control-group">
                    <tr>
                        <td>Jenis Kelamin</td>
                            <div class="controls">
                                <td>
                                    <input type="text" name="jenis" value={{database.jenis}} class='form-control'>
                                </td>
                    </tr>
                            </div>
                </div>
                    <div ng-init="country=['Indonesia','Malaysia','Singapura','China']"></div>
                        <tr>
                            <td>Kewarganegaraan</td>
                            <td>
                                <input type="text" name="inegara" value={{database.negara}} class='form-control'>
                            </td>
                        </tr>
                            <td align="center" colspan="2">
                                <button type="submit" name="delete" ng-click="remove(database)"  onClick="return confirm(' Data Yakin Mau dihapus ?');" class="btn btn-danger"  >
                                    <span class="glyphicon glyphicon-remove"></span> Delete </button>
                                <button type="button" ng-click="edit(database)" onClick="return confirm(' Data Yakin Mau Edit Data ?');" name="edit"  class="btn btn-md btn-primary">
                                    <span class="glyphicon glyphicon-check"></span> Edit</button>
                            </td>


            </table>
</div>  

Berikut merupakan file angular js yang digunakan untuk menampung data dan melakukan proses data.Pada pembahasan ini file disimpan dengan nama proses.js terdapat pada folder js .

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

    app.controller('MyController', ['$scope', function($scope){
    $scope.form = {};

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

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

    $scope.edit = function(database){
            $scope.dataedit.push($scope.form);
            $scope.form = {};
     }

}]);

Syntax berikut digunakan untuk mendeklarasikan data yang akan digunakan untuk melakukan simpan, edit dan delete

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

Pada source code berikut digunakan untuk melakukan proses data.

app.controller('MyController', ['$scope', function($scope){  
    $scope.form = {};

/*function addDatabase digunakan untuk menyimpan data*/
$scope.addDatabase = function(){
        $scope.databases.push($scope.form);
        $scope.form = {};
    }


    $scope.databases = [];

/*function remove digunakan untuk mengedit data*/    
$scope.remove=function(database){ 
      var index=$scope.databases.indexOf(database)
      $scope.databases.splice(index,1);     
    }


/*function edit digunakan untuk mengedit data*/
 $scope.edit = function(database){
            $scope.dataedit.push($scope.form);
            $scope.form = {};
     }
}]);

Berikut Hasil dari output :

alt

Untuk lebih detail anda bisa download data membuat form biodata menggunakan Angular JS di
https://github.com/era-belajar/Form-Biodata-AngularJS

Marfi Saputra

Web Programmer di erabelajar.com (PT Ridaka Indonesia Cerdas) . Mengambil Kosentrasi Informatika Komputer di LP3I JAKARTA Kampus Depok