Skip to main content
cara hapus multiple data AngularJS

Cara Hapus Multiple Data Menggunakan AngularJS

Pendahuluan Cara Hapus Multiple Data Menggunakan AngularJS

Salam Sejahtera semuanya, kembali lagi kita membahas materi pembahasan tentang Teknik CRUD Multiple data Menggunakan AngularJS dengan topik pembahasan yaitu Cara Hapus Multiple Data Menggunakan AngularJS. Jika kita ingin menguasai pembuatan aplikasi Hybrid menggunakan Ionic,pastinya AngularJS harus kita pahami. Untuk tahapan belajar AngularJS, kali ini akan kita bahas tentang pemahaman AngularJS lanjut dan contoh kasusnya yaitu teknik Insert Multiple Data memanfaatkan database MYSQL. Sekilas CRUD adalah Create (Input), Read (Tampil), Update (Ubah) dan Delete (Hapus). 

Sebelumnya, kita sudah bahasa cara Insert (input) dan Update (ubah) secara multiple data, tahap ini merupakan sambungan nya yaitu tentang Cara Hapus Multiple Data Menggunakan AngularJS. Hal lumrah dalam operasi Database, setelah data diinput maka selanjutnya data tersebut bisa dilakukan perubahan dan proses hapus.

Topik Pembahasan Cara Hapus Multiple Data Menggunakan AngularJS:

  1. Pendahuluan
  2. Teknik Hapus Multiple Data
  3. Source Code
  4. Video Petunjuk

Baca materi sebelumnya : Teknik  Edit Multiple Data

TEKNIK HAPUS MULTIPLE DATA MENGGUNAKAN ANGULARJS

Untuk hapus multiple data, kita akan menggunakan data yang telah sebelumnya kita simpan. Pastikan anda ikuti materi sebelumnya tentang cara Input data secara multiple. Langsung saja kita praktekkan tentang proses Hapus data secara multiple. Sekilas, multiple artinya kita bisa melakukan penghapusan data secara langsung lebih dari satu data secara bersamaan. Buka kembali Folder Project di htdocs, kemudian buat file baru beri nama : delete.html. Berikut source code untuk file delete.html

Source code : delete.html

<!DOCTYPE html>
<html data-ng-app="angularcrud">
<head>
    <meta charset="utf-8" />
    <title>Delete Multiple Data</title>
    <script src="./lib/angular/angular.js"></script>
</head>
<body ng-controller="MainController" >
<table>
<tr>
<td></td>
<td>Nama</td>
<td>Jurusan</td>
        </tr>
<tr data-ng-repeat="(k,v) in data">
<td><input type="checkbox" data-ng-click="check(v.npm)"></td>
<td> <input type="text" data-ng-model="v.nama" data-ng-if="v.isedit">
{{v.nama}}
</td>
<td><input type="text" data-ng-model="v.jurusan" data-ng-if="v.isedit">
{{v.jurusan}}
</td>
        </tr>
  </table>
<button data-ng-click="delete()">Delete</button>
{{ pesan }}
</body>
</html>
<script>
    angular.module('angularcrud', [])
    .controller('MainController',function($scope,$http){
        // set type data datadelete dengan array kosong
        $scope.datadelete = [];
        // fugsin menggambil data ke server
        $scope.getdata = function(){
            $http.get('http://localhost/angularcrud/server.php?action=get').success(function(response){
                $scope.data = response;
                $scope.$apply();
            });
        };
        // init data
        $scope.getdata();
        //ketika user klik button edit
        $scope.check = function(npm){
            //buat variabel tmp bernilai true
            //ini digunakan untuk chek apakah sudah ada
            //siswa id di dalah array data delete
            //jika sudah ada delete array dengan splce dan set
            // tmp jadi false agar tidak di push(dimasukan ke dalam array) kembali di bawah
            var tmp = true;
            for(var i = 0; i < $scope.datadelete.length;i++){ if($scope.datadelete[i] == npm){ $scope.datadelete.splice(i); tmp = false; break; } } if(tmp)$scope.datadelete.push(npm); }; $scope.delete = function(){ //kirim data yang di edit saja ke server $http.post('http://localhost/angularcrud/server.php?action=delete',$scope.datadelete).success(function(response){ if(response > 0){
                    //munculkan list baru yang sudah berhasil di delete
                    $scope.getdata();
                    //tampilkan pesan sukses
                    $scope.pesan = response +' Data telah berhasil di delete';
                    $scope.$apply();
                }
            });
        }
    });
</script>

Setelah script untuk menampilkan dan menghapus data selesai dibuat, selanjutnya kita tambahkan pilihan di file server.php, lihat penambahan source code dibagian “delete”. Berikut source codenya:

    case'delete' :
        $data = json_decode(file_get_contents("php://input"));
        $i = 0;
        foreach($data as $k => $v){
            $query = "DELETE FROM mahasiswa where npm = '".$v."'";
            mysql_query($query);
            $i++;
        };
        echo json_encode($i);
        break;

Selanjutnya, buka browser dan ketikkan alamat : http://localhost/angularcrud/delete.html, maka akan tampil data yang disertai pilihan checkbox di sebelah kiri datanya. berikut gambaran nya:

cara hapus multiple data AngularJS
Materi cara hapus multiple data AngularJS

Sekarang coba klik pada checkbox, misalnya akan menghapus 2 data dengan mencentang checkBox nya kemudian klik tombol “delete”.

cara hapus multiple data AngularJS
Materi cara hapus multiple data AngularJS

Apabila data berhasil dihapus, maka akan tampil informasi berapa jumlah data yang dihapus di database, mungkin dalam contoh ini ada 2 data, artinya kita baru saja menghapus lebih dari satu data sekaligus, inilah yang dimaksud dengan delete multiple data.

cara hapus multiple data AngularJS
Materi cara hapus multiple data AngularJS

jika kita cek di tabel mahasiswa di database, datanya jadi kosong, lihat gambar:

cara hapus multiple data AngularJS
Tampilan Database Kosong

Video Petunjuk Materi

VIDEO 1

Demikian sekilas pembahasan tentang proses CRUD secara multiple menggunakan Frmaework AngularJS.

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com