Membuat Aplikasi Web CRUD, Menggunakan MEAN Stack

Dalam tutorial ini penulis akan membuat aplikasi form guru menggunakan MEAN ( MongoDB, ExpressJS, AngularJS, NodeJS ). Artikel ini merupakan kelanjutan dari tutorial Membuat aplikasi web CRUD menggunakan NodeJS, dengan database MongoDB. Untuk Repository-nya lihat di sini. Langkah-langkah pembuatan aplikasi adalah:
1. Buat tampilan form aplikasi menggunakan AngularJS.
2. Hubungkan form AngularJS dengan database.
3. Buat fungsi Create, Update, dan Delete.

1. Buat Form Tampilan dengan AngularJS
Tutorial untuk AngularJS dapat dilihat pada artikel ini. Berikut adalah script untuk form tampilan listGuru.html:

<!DOCTYPE html>  
<html ng-app = "app">  
<head>  
    <title>List Guru</title>
</head>  
<body>

<!-- Muat tampilan HTML -->  
<ng-view></ng-view>

<!-- Template -->  
<script type="text/ng-template" id="/guru.html">  
    Cari Nama Guru: <input type = "text" ng-model="search.nama">
        <ul>
            <li ng-repeat="guru in guru | filter: search">
            <p>Nama: {{guru.nama}}</p>
            <p>Lokasi: {{guru.lokasi}}</p>
            <p>Biaya: {{guru.biaya}}</p>
            </li>
        </ul>
</script>

<!-- library -->  
<script type="text/javascript" src="angular.min.js"></script>  
<script type="text/javascript" src="angular-route.min.js"></script>  
<script type="text/javascript" src="controller.js"></script>

</body>  
</html>  

Download modul angular.min.js dan angular-route.min.js di sini. Berikut adalah penjelasan script:

  • ng-view adalah directive yang digunakan oleh fungsi $routeProvider untuk menampilkan template pada halaman HTML.
  • Template berisi element HTML dan Angular, fungsi ini dapat dimuat dalam halaman dengan dengan memanggil nilai id.
  • Library berisi modul yang digunakan, controller.js akan dibuat pada tahap berikutnya

Untuk controller.js isi dengan kode:

//buat modul angular ---
var app = angular.module('app', ['ngRoute']);

//service ---
app.factory('Guru', function(){  
    return [
    {nama: 'Rudi', lokasi: 'depok', biaya: 80000},
    {nama: 'Sinta', lokasi: 'cibubur', biaya: 120000},
    {nama: 'Angga', lokasi: 'depok', biaya: 100000},
    ];
})

//controller ---
app.controller('GuruController', ['$scope', 'Guru', function($scope, Guru){  
    $scope.guru = Guru;
}]);

//route ---
app.config(['$routeProvider', function($routeProvider){  
    $routeProvider.when('/', {
        templateUrl: '/guru.html',
        controller: 'GuruController'
    });
}]);
  • controller.js berfungsi untuk menentukan fungsi apa yang harus dijalankan pada form tampilan.
  • service atau factory digunakan sebagai variabel yang dapat dipanggil pada controller.
  • route berfungsi untuk menentukan tampilan apa yang digunakan pada HTML, fungsi ini biasanya berhubungan template.

Berikut adalah tampilan listGuru.html jika dijalankan:
alt

2. Hubungkan Form AngularJS dengan Database
Masuk ke folder aplikasi Erabelajar yang dibuat pada tutorial sebelumnya. Penulis akan menjelaskan sistem routing pada aplikasi ini:

  • app.js memuat semua route.
  • root path (`/`) di-set pada `routes/index.js`
  • `routes/index.js` menentukan variable title dan memuat `views/index.js` pada HTML.

Ubah judul aplikasi pada index.js:

var express = require('express');  
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {  
  res.render('index', { title: 'Erabelajar App' });
});

module.exports = router;

Lalu pada index.ejs tambahkan ng-app="app" pada tag <html> agar AngularJS dapat digunakan dalam file ini. Selanjutnya paste isi dari listGuru.html pada tag <body> di index.ejs:

<!DOCTYPE html>  
<html ng-app="app">  
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>

    <ng-view></ng-view>

    <script type="text/ng-template" id="/guru.html">
        Cari Nama Guru: <input type = "text" ng-model="search.nama">
            <ul>
                <li ng-repeat="guru in guru | filter: search">
                <p>Nama: {{guru.nama}}</p>
                <p>Lokasi: {{guru.lokasi}}</p>
                <p>Biaya: {{guru.biaya}}</p>
                </li>
            </ul>
    </script>

    <script type="text/javascript" src="javascripts/angular.min.js"></script>
    <script type="text/javascript" src="javascripts/angular-route.min.js"></script>
    <script type="text/javascript" src="javascripts/controller.js"></script>

  </body>
</html>  

Untuk library seperti angular.min.js dan controller.js letakkan pada folder public/javascripts/. Sekarang lakukan tes untuk mengetahui apakah angularJS sudah bisa dipanggil melalui server. Jalankan MongoDB dengan mengetik di cmd:

mongod  

Jalankan server dengan cmd:

nodemon  

Setelah database dan web server berjalan, ketik localhost:3000 pada browser. Jika angularJS sudah terhubung maka pada browser akan keluar tampilan form guru.

Sekarang kita akan memanggil data guru langsung dari database, bukan dari data yang sudah ditentukan sendiri seperti pada contoh sebelumnya. Untuk melakukan ini kita akan menggunakan fungsi Angular $resource. Fungsi ini terdapat dalam modul Angular angular-resource.min.js, download di sini. Paste modul tersebut di public/javascript/, lalu panggil pada index.ejs sebagai library.

Selanjutnya ubah code dalam public/javascripts/controller.js:

//modul---
var app = angular.module('app', ['ngRoute', 'ngResource']);

//service---
app.factory('Guru', ['$resource', function($resource){  
          return $resource('/guru/:id', null, {
            'update': { method:'PUT' }
          });
}])

//controller---
app.controller('GuruController', ['$scope', 'Guru', function($scope, Guru){  
    $scope.guru = Guru.query();
}]);

//route---
app.config(['$routeProvider', function($routeProvider){  
    $routeProvider.when('/', {
        templateUrl: '/guru.html',
        controller: 'GuruController'
    });
}]);

Code yang diubah terdapat pada bagian modul, controller, dan route. Jalankan aplikasi ini di browser dan data guru sekarang sudah sesuai dengan yang ada pada database.

3. Buat fungsi CREATE guru
Buat form tambah guru pada Template di file index.ejs:

<!--template-->  
    <script type="text/ng-template" id="/guru.html">
        Cari Nama Guru: <input type = "text" ng-model="search.nama">
            <ul>
                <li ng-repeat="guru in guru | filter: search">
                <p>Nama: {{guru.nama}}</p>
                <p>Lokasi: {{guru.lokasi}}</p>
                <p>Biaya: {{guru.biaya}}</p>
                </li>
            </ul>

        <!--Form input-->   
        <h3>Tambah Data Guru</h3>
        <form ng-submit='save()'>
        Nama: <input ng-model='newNama' type="text"><br><br>
        Lokasi: <input ng-model='newLokasi' type="text"><br><br>
        Biaya: <input ng-model='newBiaya' type="number"><br><br>
        <input type='submit' value='Simpan Data'>
        </form>

    </script>

Pada controller.js, tambahkan fungsi save() di controller:

app.controller('GuruController', ['$scope', 'Guru', function($scope, Guru){  
    $scope.guru = Guru.query();

    //fungsi save---
    $scope.save = function(){
        if(!$scope.newNama || $scope.newNama.length < 1) return;
        if(!$scope.newLokasi || $scope.newLokasi.length < 1) return;
        if(!$scope.newBiaya || $scope.newBiaya.length < 1) return;
        var guruBaru = new Guru({
            nama: $scope.newNama,
            lokasi: $scope.newLokasi,
            biaya: $scope.newBiaya
        });

        guruBaru.$save(function(){
            $scope.guru.push(guruBaru);
            $scope.newNama = '';
            $scope.newLokasi = '';
            $scope.newBiaya = '';
        })
    }
}]);

Jalankan aplikasi di browser dengan mengetik localhost:3000. Sekarang sudah ada form tambah guru, coba masukkan data baru.
alt

4. Buat fungsi UPDATE guru
Buat tombol edit pada form, ubah code dalam index.ejs pada bagian template:

<!--template-->  
    <script type="text/ng-template" id="/guru.html">
        Cari Nama Guru: <input type = "text" ng-model="search.nama">
            <ul>
                <li ng-repeat="guru in guru | filter: search">
                  <p ng-show="!editing[$index]">Nama: {{guru.nama}}</p>
                  <p ng-show="!editing[$index]">Lokasi: {{guru.lokasi}}</p>
                  <p ng-show="!editing[$index]">Biaya: {{guru.biaya}}</p>
                  <button ng-show="!editing[$index]" ng-click="edit($index)">Edit</button>

                  <form ng-show="editing[$index]">
                  Nama: <input ng-show="editing[$index]" type="text" ng-model="guru.nama"><br><br>
                  Lokasi: <input ng-show="editing[$index]" type="text" ng-model="guru.lokasi"><br><br>
                  Biaya: <input ng-show="editing[$index]" type="number" ng-model="guru.biaya"><br><br>
                  <button ng-show="editing[$index]" ng-click="update($index)">Update</button>
                  <button ng-show="editing[$index]" ng-click="cancel($index)">Cancel</button>
                  </form>
                </li>
            </ul>

        <!--Form input-->   
        <h3>Tambah Data Guru</h3>
        <form ng-submit='save()'>
        Nama: <input ng-model='newNama' type="text"><br><br>
        Lokasi: <input ng-model='newLokasi' type="text"><br><br>
        Biaya: <input ng-model='newBiaya' type="number"><br><br>
        <input type='submit' value='Simpan Data'>
        </form>

    </script>

Pada controller.js tambahkan fungsi update, edit, dan cancel dalam controller, letakkan dibawah fungsi save:

//fungsi update, edit, & cancel ---
    $scope.update = function(index){
        var guruEdit = $scope.guru[index];
        Guru.update({id: guruEdit._id}, guruEdit);
        $scope.editing[index] = false;
    }
    $scope.edit = function(index){
        $scope.editing[index] = angular.copy($scope.guru[index]);
    }
    $scope.cancel = function(index){
        $scope.guru[index] = angular.copy($scope.editing[index]);
        $scope.editing[index] = false;
    }

    $scope.remove = function(index){
        var guruHapus = $scope.guru[index];
        Guru.remove({id: guruHapus._id}, function(){
            $scope.guru.splice(index, 1);
        });
    }

Coba jalankan aplikasi pada browser dan tes fungsi update.

5. Buat fungsi REMOVE guru
Tambahkan tombol hapus pada template di index.ejs:

<button ng-show="!editing[$index]" ng-click="remove($index)">Hapus</button>  

Selanjutnya pada controller.js tambahkan fungsi remove:

$scope.remove = function(index){
        var guruHapus = $scope.guru[index];
        Guru.remove({id: guruHapus._id}, function(){
            $scope.guru.splice(index, 1);
        });
    }

Dengan ini maka aplikasi CRUD database guru dengan menggunaka MEAN stack telah selesai dibuat, untuk melihat source code: https://github.com/era-belajar/CRUD_MEAN

Geri Muhano

Web programmer di erabelajar.com. Alumni UIN Jakarta.