Skip to main content
cara buat edit multiple data AngularJS

Cara Buat Edit Multiple Data AngularJS

Pendahuluan Cara Buat Edit Multiple Data AngularJS

Salam Sejahtera semuanya, kembali lagi kita membahas materi pembahasan tentang Teknik CRUD Multiple data Menggunakan AngularJS dengan topik pembahasan yaitu Cara Buat Edit Multiple Data AngularJS. Kita balik sebentar ke tentang belajar FrameworkAngularJS, yang mana kita ketahui dengan menggunakan AngularJS kita bisa membuat aplikasi mobile khususnya di framework Ionic. 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) multiple data, tahap ini merupakan sambungan nya yaitu tentang Cara Buat Edit Multiple Data AngularJS. Hal lumrah dalam operasi Database, setelah data diinput maka selanjutnya data tersebut bisa dilakukan perubahan.

Topik Pembahasan Cara Buat Edit Multiple Data AngularJS:

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

Baca materi sebelumnya : Teknik Insert Multiple Data

TEKNIK EDIT MULTIPLE DATA MENGGUNAKAN ANGULARJS

langsung kita menuju topik pembahasan utama tetang Cara Buat Edit Multiple Data AngularJS. Untuk edit multiple data yang telah kita insert sebelumnya, kita perlu membuat sebuah file baru dan disimpan dalam folder yang sama sebelumnya. Langsung saja, buat sebuah file baru dengan nama : edit.html, simpan di folder : C:/xampp/htdocs/angularcrud, isikan kode berikut :

<!DOCTYPE html>
<html data-ng-app="angularcrud">
<head>
    <meta charset="utf-8" />
    <title>Edit Multiple Data</title>
    <script src="./lib/angular/angular.js"></script>
</head>
<body ng-controller="MainController" >

<table>
<tr>
<td>No</td>
<td>NPM</td>
<td>Nama</td>
<td>Jurusan</td>
<td>Semester</td>
<td>Action</td>
        </tr>
<tr data-ng-repeat="(k,v) in data">
<td>{{ $index +1 }}</td>
<td> <input type="text" data-ng-model="v.npm" data-ng-if="v.isedit">
{{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>

<td> <input type="text" data-ng-model="v.semester" data-ng-if="v.isedit">

{{v.semester}}
</td>
<td><button data-ng-click="edit($index)">Edit</button></td>

        </tr>
  </table>
<button data-ng-click="update()">Update</button>
{{ pesan }}
</body>
</html>
<script>
        angular.module('angularcrud', [])

        .controller('MainController',function($scope,$http){
        // set type data dataedit dengan array kosong
        $scope.dataedit = [];
        // 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.edit = function(index){
            //set agar ketika user input
            //munculkan input type
            $scope.data[index]['isedit'] = true;
            // masukan data yang di pilih ke array dataedit
            $scope.dataedit.push($scope.data[index]);
        };
        $scope.update = function(){
            //kirim data yang di edit saja ke server
            $http.post('http://localhost/angularcrud/server.php?action=update',$scope.dataedit).success(function(response){
                if(response > 0){
                    //munculkan list baru yang sudah berhasil di edit
                    $scope.getdata();
                    //tampilkan pesna sukses
                    $scope.pesan = response +' Data telah berhasil di update';
                    $scope.$apply();
                }
            });
        }
    });
</script>

Kemudian Tambahkan kode skrip baru di file : server.php , tambahkan yang di tandai dengan skript tebal (bold).

<?php $hostname = "localhost"; 
$user = "root"; 
$pass = ""; 
$database = "db_angularcrud"; 
$conn = mysql_connect($hostname,$user,$pass);
if(!$conn) die ("gagal melakukan koneksi"); 
mysql_select_db($database,$conn) or die("database tidak ditemukan"); 
switch($_GET['action']){ 
case 'insert' : 
$data = json_decode(file_get_contents("php://input")); 
$i = 0; foreach($data as $k => $v){
            $query = "INSERT INTO mahasiswa(npm,nama,jurusan,semester) VALUES ('".$v->npm."','".$v->nama."','".$v->jurusan."','".$v->semester."')";
            mysql_query($query);
            $i++;
        };
        echo json_encode($i);
        break;
 <strong>case 'get' :
        $query = "SELECT * FROM mahasiswa";
        $sql  = mysql_query($query);
        $data = array();
        while($row=mysql_fetch_array($sql)) {
            $data[] = $row;
        }

        echo json_encode($data);
        break;
    case'update' :
        $data = json_decode(file_get_contents("php://input"));
        $i = 0;
        foreach($data as $k => $v){
            $query = "UPDATE mahasiswa set nama = '".$v->nama."' , jurusan = '".$v->jurusan."', semester='".$v->semester."' where npm = '".$v->npm."'";
            mysql_query($query);
            $i++;
        };
        echo json_encode($i);
        break;</strong>
   
}
?>

Selanjutnya, buka browser dan ketikkan http://angularcrud/edit.html, maka akan tampil data yang disertai Action tombol “edit” disebelah kanan datanya. lihat gambar berikut:

cara buat edit multiple data AngularJS
cara buat edit multiple data

Sekarang, coba klik tombol Edit untuk data nomor 1, maka data tersebut akan berubah akan berubah menjadi baris form yang bisa di edit. lihat gambar:

cara buat edit multiple data AngularJS
cara buat edit multiple data

Kemudian klik tombol edit untuk data nomor 2, maka data tersebut akan berubah menjadi baris form yang bisa diedit, artinya kita bisa langsung mengedit lebih dari 1 data sekaligus (multiple edit). Lihat gambar :

cara buat edit multiple data AngularJS
cara buat edit multiple data

Jika data berhasil diubah, maka tampil informasi berapa jumlah data yang berhasil diupdate kedatabase. artinya juga kita baru saja mengedit/update lebih dari satu data sekaligus. Lihat gambaran berikut :

cara buat edit multiple data AngularJS
cara buat edit multiple data

Video Petunjuk Materi

VIDEO 1

Next Teknik CRUD Multiple data Menggunakan AngularJS

Untuk tahapan awal belajar CRUD yaitu Insert dan Update data selesai, selanjutnya akan kita bahas tentang Delete (hapus) data juga dengan model Multiple.

Bersambung.

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