Cara Membuat Edit Inline Dengan AngularJs Part1

Edit Inline adalah suatu kegiatan edit atau merubah data dengan posisi di baris yang tetap pada data yang akan di ubah. Dan pada kesempatan kali ini akan saya bahas Cara Membuat Edit Inline Dengan AngularJs Part1. Dimana saya memiliki table data dan saya melakukan edit atau ubah data di dalam table data langsung dan di baris yang sama.

Untuk tampilan tabel pada artikel tentangÂ Cara Membuat Edit Inline Dengan AngularJs Part1 saya membuatnya dengan menggunakan bootstrap seperti pada script di bawah ini.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>

    <title>Cara Membuat Edit Inline Dengan AngularJs</title>
  </head>
  <body ng-app="myApp" ng-controller="myCtrl" ng-init="fetchData()">
  <div class="container">
    <div class="row">
      <div class="col">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Name</th>
              <th scope="col">Description</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="data in namesData" ng-include="getTemplate(data)">
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
</html>

<!doctype html>

<head>

<title>Cara Membuat Edit Inline Dengan AngularJs</title>

</head>

<thead>

<tr>

<th scope="col">Description</th>

<th scope="col">Action</th>

</tr>

</thead>

<tbody>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Karena disini saya akan edit langsung di dalam table data maka saya gunakan ng-template untuk mengubah tampilan data ketika di edit menggunakan tag input. Sebelumnya saya sudah sediakan ng-repeat=”data in namesData” untuk melooping datanya. Dan ” ng-include=”getTemplate(data)” untuk mengubah templatenya.

Kita lanjutkan untuk menampilkan data terlebih dahulu dan berikut ini scriptnya.

<script>
    var app = angular.module("myApp",[]);
    app.controller("myCtrl", function($scope, $http){
      // Tampil Data
      $scope.fetchData = function(){
        $http.get('data.php').then(function(response){
          $scope.namesData = response.data;
        })
      }
})
</script>

var app = angular.module("myApp",[]);

app.controller("myCtrl", function($scope, $http){

// Tampil Data

$scope.fetchData = function(){

$http.get('data.php').then(function(response){

$scope.namesData = response.data;

})

}

})

</script>

Didalam controller saya sudah membuat fungsi fetchData() untuk menampilkan datanya. Dan untuk menjalankan fungsi tersebut saya berikan ng-init=”fetchData()” di tag body. Selanjutnya kita buat file baru dengan nama data.php untuk mengambil data dari database.

<?php

$host = 'localhost';
$user = 'dumet';
$pass = 'school';
$db = 'webmaster';

$conn = mysqli_connect($host,$user,$pass,$db);
if(!$conn){
	die("Connection :Failed ".mysqli_connect_error());
}

$query = $conn->query("SELECT * FROM shelli_posts");
$posts = [];

if($query->num_rows > 0) :
	while($row = $query->fetch_assoc()) :
		extract($row);
		$data = array(
			'id' => $id,
			'title' => $title,
			'body' => $body,
			'created_at' => $created_at
		);
		#push data
		array_push($posts, $data);
	endwhile;
	#output json
	echo json_encode($posts);
else:
	echo json_encode(array(
		'message' => 'No Posts Found'
	));
endif;	
?>

<?php

$host = 'localhost';

$user = 'dumet';

$pass = 'school';

$db = 'webmaster';

$conn = mysqli_connect($host,$user,$pass,$db);

if(!$conn){

die("Connection :Failed ".mysqli_connect_error());

}

$query = $conn->query("SELECT * FROM shelli_posts");

$posts = [];

if($query->num_rows > 0) :

while($row = $query->fetch_assoc()) :

extract($row);

$data = array(

'id' => $id,

'title' => $title,

'body' => $body,

'created_at' => $created_at

);

#push data

array_push($posts, $data);

endwhile;

#output json

echo json_encode($posts);

else:

echo json_encode(array(

'message' => 'No Posts Found'

));

endif;

Oke, langkah terakhir untuk menampilkan datanya kita buat terlebih dahulu ng-template display untuk menampilkan data dan ng-template edit untuk tampilan edit data.

<script type="text/ng-template" id="display">
    <td>{{data.title}}</td>
    <td>{{data.body}}</td>
    <td><input type="submit" class="btn btn-sm btn-success" value="Edit" ng-click="showEdit(data)"></td>
  </script>
  <script type="text/ng-template" id="edit">
    <td><input type="text" ng-model="formData.title" class="form-control"></td>
    <td><input type="text" ng-model="formData.body" class="form-control"></td>
    <td><input type="submit" class="btn btn-sm btn-primary" value="Save" ng-model="formData.id" ng-click="editData()">
        <input type="submit" class="btn btn-sm btn-primary" value="Cancel" ng-click="reset()"></td>
  </script>

<td>{{data.title}}</td>

</script>

</script>

Pembahasannya akan kita sambung pada artikel Cara Membuat Edit Inline Dengan AngularJs Part2. Demikian artikel tentang Cara Membuat Edit Inline Dengan AngularJs Part1. Terima Kasih

Facebook DUMET School

Categories