Cara Membuat CRUD Menggunakan AngularJS dan PHP Mysql
Hallo rekan rekan seluruh,semoga pada keadaan baik-baik dan selalu semangat. Pada pembahasan kali ini kita kakn belajar mengenai Cara Membangun CRUD Menggunakan AngularJS dan PHP Mysql. Dimana nanti langkah demi langkah kita akan belajar membangun Cread, Read, Update, dan Delete kemudian akan seketika berhubungan dengan database PHPMyadmin.
Baiklah kita lanjutkan dengan proses perancangan database serta struktutnya seperti berikut ini:
rekan rekan bikin database baru beri nama database test kemudian table baru dengan nama table tbl_customer.
berikutnya kita seketika membangun sebuah konfigurasi koneksi ke database, bikin file baru kemudian beri nama config.php
<?php
//konfigurasi database
$connect = new PDO(mysql:host=localhost;dbname=test, dumet, school);
?>
kalau telah simpan terlebih dahulu. Rekan rekan lanjutkan dengan membangun struktur tampilan awal bagi menampilkan data dari database serta form yang digunakan bagi mengerjakan proses insert maupun modifikasi data.
bikin file baru beri nama index.php
pada bagian head berisi library Bootstrap dan library AngularJS.
<html>
<head>
<title>Membangun CRUD Menggunakan AngularJS dan PHP Mysql</title>
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css />
<script src=http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js></script>
</head>
berikutnya bagian pada body seperti code berikut ini:
<body>
<div class=container my-5>
<h3 class=text-center>Membangun CRUD Menggunakan AngularJS dan PHP Mysql</h3><br />
<div class=table-responsive ng-app=crudApp ng-controller=crudController ng-init=fetchData()>
<div class=alert alert-success alert-dismissible ng-show=success >
<a href=# class=close data-dismiss=alert ng-click=closeMsg() aria-label=close>×</a>
{{successMessage}}
</div>
<form name=testform ng-submit=insertData()>
<table class=table table-bordered table-striped>
<thead>
<tr>
<th>Nama Customer</th>
<th>Tempat tinggal</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type=text ng-model=addData.Cust_Name class=form-control placeholder=Masukan Nama ng-required=true /></td>
<td><input type=text ng-model=addData.Address class=form-control placeholder=Masukan Tempat tinggal ng-required=true /></td>
<td><button type=submit class=btn btn-success btn-sm ng-disabled=testform.$invalid>Add</button></td>
</tr>
<tr ng-repeat=data in namesData ng-include=getTemplate(data)>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</body>
</html>
oke berikutnya membangun bagian tampilan dimana bagi menampilkan daftar data yang berasal dari database dan bagian proses modifikasi data seperti dibawah ini
<script type=text/ng-template id=display>
<td>{{data.Cust_Name}}</td>
<td>{{data.Address}}</td>
<td>
<button type=button class=btn btn-primary btn-sm ng-click=showEdit(data)>Modifikasi</button>
<button type=button class=btn btn-danger btn-sm ng-click=deleteData(data.id)>Delete</button>
</td>
</script>
<script type=text/ng-template id=modifikasi>
<td><input type=text ng-model=formData.Cust_Name class=form-control /></td>
<td><input type=text ng-model=formData.Address class=form-control /></td>
<td>
<input type=hidden ng-model=formData.data.id />
<button type=button class=btn btn-info btn-sm ng-click=editData()>Save</button>
<button type=button class=btn btn-default btn-sm ng-click=reset()>Cancel</button>
</td>
</script>
script diatas dapat rekan rekan sisipkan setelah form , berikutnya kita akan menambahkan script bagi menginisialisasikan ng-app, ng-controller,ng-init serta function lainnya.
<script>
var app = angular.module('crudApp', []);
app.controller('crudController', function($scope, $http){
$scope.formData = {};
$scope.addData = {};
$scope.success = false;
$scope.getTemplate = function(data){
if (data.id === $scope.formData.id)
{
return 'modifikasi';
}
else
{
return 'display';
}
};
$scope.fetchData = function(){
$http.get('view_data.php').success(function(data){
$scope.namesData = data;
});
};
$scope.insertData = function(){
$http({
method:POST,
url:insert.php,
data:$scope.addData,
}).success(function(data){
$scope.success = true;
$scope.successMessage = data.message;
$scope.fetchData();
$scope.addData = {};
});
};
$scope.showEdit = function(data) {
$scope.formData = angular.copy(data);
};
$scope.editData = function(){
$http({
method:POST,
url:modifikasi.php,
data:$scope.formData,
}).success(function(data){
$scope.success = true;
$scope.successMessage = data.message;
$scope.fetchData();
$scope.formData = {};
});
};
$scope.reset = function(){
$scope.formData = {};
};
$scope.closeMsg = function(){
$scope.success = false;
};
$scope.deleteData = function(id){
if(confirm(Apakah telah yakin hapus data ini?))
{
$http({
method:POST,
url:delete.php,
data:{'id':id}
}).success(function(data){
$scope.success = true;
$scope.successMessage = data.message;
$scope.fetchData();
});
}
};
});
</script>
Di script diatas terdapat bebrapa fuction seperti bagi menampilkan data, mengerjakan modifikasi, maupun delete.
Saya kira lumayan pada pembahasan kali ini dan akan dilanjutkan di artikel berikutnya bagi script petunjuk menampilkan data, modifikasi data serta proses delete.
terima kasih.
Sumber https://kursuswebsite.org
