[trick] Crud dengan menggunakan angular-js

berikut ini adalah tricky dari membuat crud dengan menggunakan php dan angular.js

Insert.html


<!DOCTYPE html>
<html data-ng-app="latihan">
<head>
<meta charset="utf-8" />
<title>Insert Multiple Data</title>
<script src="vendor/angular/angular.js"></script>
</head>
<body ng-controller="MainController" >
{{ data }}
<div data-ng-repeat="key in data">
Nama <input type="text" data-ng-model="data[$index].nama"> <br>
Kelas <input type="text" data-ng-model="data[$index].kelas"> <br>
</div>

<button data-ng-click="tambah()">Tambah Data</button>
<button data-ng-click="cancel()" data-ng-show="data.length > 1">Cancel</button>
<button data-ng-click="simpan()">Simpan</button>
<p>{{ pesan }}</p>
</body>
</html>
<script>
angular.module('latihan', [])

.controller('MainController',function($scope,$http){
//set type data 'data' dengan object
$scope.data = [{nama : '',kelas : ''} ];
//fungsi tambah inputan
$scope.tambah = function(){
$scope.data.push({nama : '', kelas : ''});
};
//fungsi kurangi inputan
$scope.cancel = function(){
$scope.data.splice($scope.data.length-1);
};
//fungsi simpan
$scope.simpan = function(){
$http.post('http://localhost/latihan/server.php?action=insert',$scope.data).success(function(response){
if(response > 0){
$scope.data = [{nama : '',kelas : ''} ];
$scope.pesan = response +' Data telah berhasil di simpan';
$scope.$apply();
}
});
}
})
</script>

Edit.html


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

<table>
<tr>
<td>No</td>
<td>Nama</td>
<td>Kelas</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.nama" data-ng-if="v.isedit"><p data-ng-if="!v.isedit">{{v.nama}}</p></td>
<td><input type="text" data-ng-model="v.kelas" data-ng-if="v.isedit"><p data-ng-if="!v.isedit">{{v.kelas}}</p></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('latihan', [])

.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/latihan/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/latihan/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>

delete .html


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

<table>
<tr>
<td></td>
<td>Nama</td>
<td>Kelas</td>
</tr>
<tr data-ng-repeat="(k,v) in data">
<td><input type="checkbox" data-ng-click="check(v.siswaid)"></td>
<td> <input type="text" data-ng-model="v.nama" data-ng-if="v.isedit"><p data-ng-if="!v.isedit">{{v.nama}}</p></td>
<td><input type="text" data-ng-model="v.kelas" data-ng-if="v.isedit"><p data-ng-if="!v.isedit">{{v.kelas}}</p></td>
</tr>
</table>
<button data-ng-click="delete()">Delete</button>
{{ pesan }}
</body>
</html>
<script>
angular.module('latihan', [])

.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/latihan/server.php?action=get').success(function(response){
$scope.data = response;
$scope.$apply();
});
};
// init data
$scope.getdata();
//ketika user klik button edit
$scope.check = function(siswaid){
//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] == siswaid){
$scope.datadelete.splice(i);
tmp = false;
break;
}
}
if(tmp)$scope.datadelete.push(siswaid);
};
$scope.delete = function(){
//kirim data yang di edit saja ke server
$http.post('http://localhost/latihan/server.php?action=delete',$scope.datadelete).success(function(response){
if(response > 0){
//munculkan list baru yang sudah berhasil di delete
$scope.getdata();
//tampilkan pesna sukses
$scope.pesan = response +' Data telah berhasil di delete';
$scope.$apply();
}
});
}
});
</script>

server.php


<?php

$hostname = "localhost";
$user = "root";
$pass = "";
$database = "latihan";

$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 siswa(nama,kelas) VALUES ('".$v->nama."','".$v->kelas."')";
mysql_query($query);
$i++;
};
echo json_encode($i);
break;
case 'get' :
$query = "SELECT * FROM siswa";
$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 siswa set nama = '".$v->nama."' , kelas = '".$v->kelas."' where siswaid = '".$v->siswaid."'";
mysql_query($query);
$i++;
};
echo json_encode($i);
break;
case'delete' :
$data = json_decode(file_get_contents("php://input"));
$i = 0;
foreach($data as $k => $v){
$query = "DELETE FROM siswa where siswaid = '".$v."'";
mysql_query($query);
$i++;
};
echo json_encode($i);
break;
}

Advertisements
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: