CRUD Client Side Rendering Menggunakan Spring Data JPA dan AngularJS

Memulai AngularJS

Membuat file html (src/main/resources/templates/materi/listMateri.html)

Kotlin

Copy

<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="utf-8">
      <title>Daftar Materi</title>
   </head>
   <body ng-app="">
      <h1>Daftar Materi</h1>
      <script th:src="@{/js/angular.min.js}"></script>  
   </body>
</html>

Register view(src/main/java/domain/config/KonfigurasiWeb)

Kotlin

Copy

registry.addViewController("/materi/list").setViewName("materi/listMateri");

Binding

Binding yaitu menggunakan data input untuk di outputkan secara dinamis(tanpa submit/client side). Prosesnya adalah user menginputkan data. Kemudian data itu disimpan ke sebuah variabel. Kemudian variabel itu dioutputkan lagi. Contoh

Kotlin

Copy

<body ng-app="">
   Nama anda : <input type="text" ng-model="nama"/>  Selamat datang {{nama}}  <script th:src="@{/js/angular.min.js}"></script>
</body>

Menggunakan $scope

$scope digunakan untuk menghubungkan variabel di html dengan javascript.

Mencetak data Array

(src/main/resources/templates/materi/listMateri.html)

Kotlin

Copy

<div ng-controller="MateriController">
   Input Materi <input type="text" ng-model="namaMateri"/><br/>  Materi {{namaMateri}} berhasil diinput.  
   <ul>
      <li ng-repeat="materi in daftarMateri">{{materi}}</li>
   </ul>
</div>
<script th:src="@{/js/materi.js}"></script>

Membuat file JS(/src/main/resources/static/js/materi.js)

JavaScript

Copy

var materiapp = angular.module('materiapp', []);
materiapp.controller('MateriController', function($scope) {
    $scope.daftarMateri = ['Java Fundamental', 'Spring Framework'];
});

Memasukkan Data ke Array

(src/main/resources/templates/materi/listMateri.html)

JavaScript

Copy

<button ng-click="tambahMateri()">Tambahkan</button>

(/src/main/resources/static/js/materi.js)

JavaScript

Copy

$scope.tambahMateri = function(){  
	$scope.daftarMateri.push($scope.namaMateri);
}

Menghapus Data dari Array

(src/main/resources/templates/materi/listMateri.html)

JavaScript

Copy

<button ng-click="tambahMateri()">Tambahkan</button>

(/src/main/resources/static/js/materi.js)

JavaScript

Copy

$scope.tambahMateri = function(){  $scope.daftarMateri.push($scope.namaMateri);}

Generate daftar Materi

membuat controller

JavaScript

Copy

@RestController @RequestMapping("/api") 
public class MateriApiController {
  @Autowired private MateriDao md;
  @RequestMapping(value = "/materi", method = RequestMethod.GET) 
	public Page < Materi > daftarMateri(Pageable page) {
    return md.findAll(page);
  }
}

Karena kita menggunakan RestController maka hasil output akan berupa rest(biasanya json).

javascript

JavaScript

Copy

materiapp.controller('GenerateMateriController', function($http, $scope) {
    $scope.daftarMateri = {};
    $scope.listMateri = function() {
        $http.get('/api/materi').then(sukses, gagal);

        function sukses(response) {
            $scope.daftarMateri = response.data;
            console.log($scope.daftarMateri);
        };

        function gagal(response) {
            console.log(response);
            alert('Error' + response);
        };
    };
    $scope.listMateri();
});

Kita membuat controller baru dengan nama GenerateMateriController. Lalu kita membuat daftarMateri sebagai penampung data json yang akan kita dapat dari /api/materi menggunakan fungsi listMateri.

html

JavaScript

Copy

<div ng-controller="GenerateMateriController">
    <table border="1">
        <thead>
            <tr>
                <td>Kode</td>
                <td>Nama</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="materi in daftarMateri.content">
                <td>{{materi.kode}}</td>
                <td>{{materi.nama}}</td>
            </tr>
        </tbody>
    </table>
</div>

membuat div yang telah diinjek dengan GenerateMateriController. kemudian menggenerate materi dari daftarMateri menggunakan ng-repeat.

Menghapus materi

membuat fungsi hapus (javascript)

JavaScript

Copy

$scope.hapusMateri = function(materi) {
    $http.delete('/api/materi/' + materi.id).then(sukses, gagal);

    function sukses(response) {
        $scope.listMateri();
    }

    function gagal(response) {
        console.log(response);
        alert('Error : ' + response);
    };
};

menambahkan button hapus (html)

JavaScript

Copy

<td><button ng-click="hapusMateri(materi)">hapus</button></td>

Menyimpan materi

membuat fungsi simpan (javascript)

JavaScript

Copy

$scope.simpanMateri = function() {
    $http.post('/api/materi', $scope.materi).then(sukses, gagal);

    function sukses(response) {
        $scope.listMateri();
    }

    function gagal(response) {
        console.log(response);
        alert('Error : ' + response);
    };
};

menambahkan form input (html)

JavaScript

Copy

<table>
    <tr>
        <td>Kode</td>
        <td><input type="text" ng-model="materi.kode" required="true" /></td>
        <td>Kode</td>
    </tr>
    <tr>
        <td>Nama</td>
        <td><input type="text" ng-model="materi.nama" required="true" /></td>
        <td>Kode</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td><button ng-click="simpanMateri()">Simpan</button></td>
        <td>Kode</td>
    </tr>
</table>