Halo teman teman pada tutorial Cara Membuat CRUD Pada AngularJs Menggunakan PHP Myadmin Part 4 ini kita akan membahas untuk cara mengedit data menggunakan AngularJS, pada tutorial sebelumnya kita telah membahas tentang cara input data, menampilkan data, dan delete data dari database menggunakan AngularJs, kalau teman teman lupa bisa lihat bisa lihat tutorial saya yang sebelumnya.
Oke teman teman kita langsung saja masuk ke study casenya Cara Membuat CRUD Pada AngularJs Menggunakan PHP Myadmin Part 4, cara mengedit data menggunakan AngularJs
Untuk proses edit data kali ini kita masih menggunakan script yang sebelumnya hanya saja ada penambahan pada bagian controller, berikutnya 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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<!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" ng-disabled="obj.idisable"></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="{{btnName}}" 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> <button ng-click="editStud(murid.id, murid.nama, murid.alamat, murid.jeniskelamin);">Edit</button></td> </tr> </table> </div> <script type="text/javascript"> var app=angular.module('myApp',[]); app.controller('cntrl', function($scope,$http){ //--------- $scope.obj={'idisable':false}; $scope.btnName="Insert"; //----- $scope.insertdata=function(){ $http.post("input.php",{'id':$scope.id, 'nama':$scope.nama, 'alamat':$scope.alamat,'jenis':$scope.jenis, 'btnName':$scope.btnName}) .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(); }) } //proses menampilkan data saat di update $scope.editStud=function(id, nama, alamat, jeniskelamin){ $scope.id=id; $scope.nama=nama; $scope.alamat=alamat; $scope.jenis=jeniskelamin; $scope.btnName="Update"; $scope.obj.idisable=true; $scope.displayStud(); } }); </script> </body> </html> |
Selanjutnya kita akan buat untuk proses update datanya, silahkan teman teman simpan script dibawah ini pada file input.php
|
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 |
<?php include "connectdb.php"; $data=json_decode(file_get_contents("php://input")); //....... $btnName=$conn->real_escape_string($data->btnName); if($btnName=='Insert'){ //....... //proses input data $id=$conn->real_escape_string($data->id); $nama=$conn->real_escape_string($data->nama); $alamat=$conn->real_escape_string($data->alamat); $jenis=$conn->real_escape_string($data->jenis); $query="INSERT INTO murid VALUES($id,'".$nama."','".$alamat."','".$jenis."')"; $conn->query($query); } // proses update data else{ $id=$conn->real_escape_string($data->id); $nama=$conn->real_escape_string($data->nama); $alamat=$conn->real_escape_string($data->alamat); $jenis=$conn->real_escape_string($data->jenis); $query="UPDATE murid SET nama = '".$nama."', alamat= '".$alamat."', jeniskelamin='".$jenis."' WHERE id=$id "; $conn->query($query); } ?> |
Nah jika kita jalankan pada browser maka hasilnya seperti dibawah ini
Oke teman teman sekian dulu tutorial saya kali ini tentang Cara Membuat CRUD Pada AngularJs Menggunakan PHP Myadmin Part 4, tentang edit data menggunakan AngularJSnya.
Semoga bermanfaat, Terimakasih..