index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>insert data dengan angular js</title>
</head>
<link rel="stylesheet" href="js/sweetalert2.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> -->
<script src="angular.min.js"></script>
<script src="js/sweetalert2.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> -->
<body>
<div ng-app="moduleapp" ng-controller="inicon">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="card mt-4">
<center> <b> Membuat Insert data pada Angular --learn of today</b></center>
<div class="card-body">
<form>
<div class="form-group">
<label for="">nomor</label>
<input type="text" ng-model="id" name="id" ng-disabled="obj.idisable"
class="form-control">
</div>
<div class="form-group">
<label>Name :</label>
<input type="text" ng-model="nama" name="nama" class="form-control">
</div>
<div class="form-group">
<label>Absen :</label>
<input type="text" ng-model="absen" name="absen" class="form-control">
</div>
<div class="form-group">
<label>Kelas :</label>
<input type="text" ng-model="kelas" name="kelas" class="form-control">
</div>
<input type="button" class="btn btn-primary" value="{{btnName}}"
ng-click="insertdata()">
<input type="reset" value="Reset" class="btn btn-danger">
</form>
</div>
</div>
</div>
<div class="col-md-6 mt-4">
<table class="table table-hover table-bordered">
<tr>
<th>id</th>
<th>nama</th>
<th>alamat</th>
<th>jenis kelamin</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr ng-repeat="row in isi">
<td>{{row.id}}</td>
<td>{{row.nama}}</td>
<td>{{row.absen}}</td>
<td>{{row.kelas}}</td>
<td><button ng-click="edit(row.id, row.nama, row.absen, row.kelas);"
class="btn btn-primary">Edit</button></td>
<td><button ng-click="delete(row.id)" class="btn btn-danger">delete</button></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app = angular.module('moduleapp', []);
app.controller('inicon', function ($scope, $http) {
show();
$scope.obj = { 'idisable': false };
$scope.btnName = "Simpan";
//funsgsi insert data
$scope.insertdata = function () {
$http.post("input.php", {
'nama': $scope.nama,
'absen': $scope.absen,
'kelas': $scope.kelas,
'btnName': $scope.btnName
}).then(function successCallback(response) {
console.log(response);
$scope.msg =
// let timerInterval
Swal.fire({
title: 'Success Insert Data!',
html: 'I will close in <strong></strong> seconds.',
timer: 2000,
onBeforeOpen: () => {
Swal.showLoading()
timerInterval = setInterval(() => {
Swal.getContent().querySelector('strong')
.textContent = Swal.getTimerLeft()
}, 100)
},
onClose: () => {
clearInterval(timerInterval)
}
}).then((result) => {
if (
// Read more about handling dismissals
result.dismiss === Swal.DismissReason.timer
) {
console.log('I was closed by the timer')
}
})
// $scope.displayStud();
show();
}, function errorCallback(response) {
$scope.msg = alert("gagal di simpan");
// $scope.displayStud();
});
}
//fungsi show data
function show() {
$http({
method: 'GET',
url: 'tampildata.php'
}).then(function (woy) {
// debugger
$scope.isi = woy.data;
}, function (error) {
console.log(error)
});
}
$scope.delete = function (studid) {
$http({
method: 'POST',
url: 'hapus.php',
data: {
id: studid
}
}).then(function (woy) {
// debugger;
// console.log(woy);
$scope.msg = Swal.fire(
'Succes Delete Data!',
'Succes Delete Data!',
'success'
);
show();
}, function (error) {
console.log(error)
});
}
$scope.edit = function (id, nama, absen, kelas) {
$scope.id = id;
$scope.nama = nama;
$scope.absen = absen;
$scope.kelas = kelas;
$scope.btnName = "Update";
$scope.obj.idisable = true;
// $scope.displayStud();
}
});
</script>
</body>
</html>
untuk komplit nya ane taro di gitlab ane om
