Halo teman teman pada tutorial Cara Membuat CRUD Pada AngularJs Menggunakan PHP Myadmin Part 3, kita akan membuat untuk proses delete datanya, pada tutorial Cara Membuat CRUD Pada AngularJs Menggunakan PHP Myadmin Part 2, kita telah membahas cara menampilkan data dari database, nah sekarang kita akan mencoba untuk cara delete data menggunakan AngularJS kalau teman teman lupa silahkan dilihat lagi tutorial saya sebelumnya pada Cara Membuat CRUD Pada AngularJs Menggunakan PHP Myadmin Part 1
Oke teman teman untuk proses delete datanya kita masih menggunakan file yang sebelumnya, pastikan teman teman telah membuat database dan file koneksinya terlebih dahulu ya, kemudian silahkan teman teman simpan script dibawah ini dengan nama index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <style type="text/css"> p{color:green; font-weight: bold} .button{cursor:pointer;} </style> </head> <body> <div ng-app="myApp" ng-controller="cntrl"> <form> <table> <tr> <td>id</td> <td>:</td> <td><input type="text" ng-model="id" name="id"></td> </tr> <tr> <td>nama</td> <td>:</td> <td><input type="text" ng-model="nama" name="id"></td> </tr> <tr> <td>Alamat</td> <td>:</td> <td><textarea type="text" ng-model="alamat" name="id"></textarea></td> </tr> <tr> <td>Jenis Kelamin</td> <td>:</td> <td> <input type="radio" ng-model="jenis" name="id" value="laki-laki" selected>Laki-laki <input type="radio" ng-model="jenis" name="id" value="perempuan">Perempuan</td> <p>{{msg}}</p> </tr> <tr> <td colspan="3"><input type="button" class="button" value="simpan" ng-click="insertdata()"> <input type="reset" class="button" value="clear"></td> </tr> </table> </form> <!-- table untuk menampilkan data--> <table border="1" cellspacing="0"> <tr> <th>id</th> <th>nama</th> <th>alamat</th> <th>jenis kelamin</th> <th>Action</th> </tr> <tr ng-repeat="murid in data"> <td>{{murid.id}}</td> <td>{{murid.nama}}</td> <td>{{murid.alamat}}</td> <td>{{murid.jeniskelamin}}</td> <td><button ng-click="deleteStud(murid.id);">Delete</button></td> </tr> </table> </div> <script type="text/javascript"> var app=angular.module('myApp',[]); app.controller('cntrl', function($scope,$http){ $scope.insertdata=function(){ $http.post("input.php",{'id':$scope.id, 'nama':$scope.nama, 'alamat':$scope.alamat,'jenis':$scope.jenis}) .success(function(){ $scope.msg="Data Berhasil Disimpan"; $scope.displayStud(); }) } //proses untuk menampilkan data dari file tampil.php $scope.displayStud=function(){ $http.get("tampil.php") .success(function(data){ $scope.data=data }) } //proses untuk Delete data dari file hapus.php $scope.deleteStud=function(studid){ $http.post("hapus.php",{'id':studid}) .success(function(){ $scope.msg="Data Berhasil Dihapus"; $scope.displayStud(); }) } }); </script> </body> </html> |
Jika sudah berikutnya kita akan buat sebuah file untuk delete data, dan silahkan teman teman simpan script dibawah ini dengan nama hapus.php
|
1 2 3 4 5 6 7 8 |
<?php include "connectdb.php"; $data=json_decode(file_get_contents("php://input")); $id=$data->id; $query="DELETE FROM murid WHERE id=".$id; $conn->query($query); ?> |
Kemudian di save dan jalankan dijalankan pada browser nya, maka hasilnya akan seperti dibawah ini,
Oke teman teman cukup mudah ya. Untuk proses edit data akan saya bahas pada tutorial Cara Membuat CRUD Pada AngularJs Menggunakan PHP Myadmin Part 4.
Sekian dulu tutorial Cara Membuat CRUD Pada AngularJs Menggunakan PHP Myadmin Part 3, tentang delete data menggunakan AngularJS nya, semoga bermanfaat
Terimakasih