Cara Membuat Auto Refresh Menggunakan AngularJs di PHP

Auto Refresh disini adalah disaat melakukan reload atau loading suatu halaman dilakukan secara otomatis tanpa kita harus melakukan refresh manual. Dalam kesempatan ini saya akan membagikan tutorial Membuat Auto Refresh Menggunakan AngularJs di PHP. Saat kita melakukan input data maka secara otomatis data yang baru dimasukan atau diinput akan menampilkan data yang terupdate. Jadi tanpa harus melakukan refresh browser untuk melihat data yang baru di input.

Baiklah bagaimana cara membuat auto refresh menggunakan AngularJs di PHP, yuk simak langkah-langkah berikut ini:

Pertama sahabat buat file PHP baru ,lalu ketikkan struktur HTML seperti berikut:

<!DOCTYPE html>
<html>
 <head>
  <title>Auto Refresh Div Content using AngularJS in PHP</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
 <body>
<div class="container mt-5">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      
   <h2 class="text-center">Membuat Auto Refresh Dengan AngularJS di PHP</h2>
  <br />
  <div ng-app="myApp" ng-controller="autoRefreshController" class="container" style="width:100%; max-width:600px;">

   <div class="alert alert-success alert-dismissible py-3" ng-show="success">
    <a href="#" class="close" aria-label="close">×</a>
    {{ successMessage }}
   </div>

   <form method="post" ng-model="form_data" ng-submit="submitForm()">
    <div class="form-group">
     <label>Input Paket Kursus</label>
     <input name="kursus" class="form-control" ng-model="form_data.kursus">
    </div>
    <div class="form-group" align="right">
     <input type="submit" name="submit" class="btn btn-info" value="Save" />
    </div>
   </form>
   <div class="list-kursus">
    <ul>
     <li ng-repeat="messageData in messagesData">
      {{ messageData.nama_paket }}
     </li>
    </ul>
   </div>
  </div>

    </div>
  </div>
</div>
 </body>
</html>

Pada syntax diatas saya gunakan Bootstrap agar mudah digunakan , kemudian terdapat form input dan ada tag ul li yang nanti akan menampilkan hasil inputan pada expression {{ messageData.nama_paket }}

Kedua yaitu membuat controller, dimana didalamnya terdapat fungsi submitForm() untuk proses tambah data dan fetchData() untuk menampilkan data.

<script>

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

app.controller('autoRefreshController', function($scope,$interval,$http){

 $scope.success = false;

 $scope.submitForm = function(){
  $http({
   method:"POST",
   url:'insert.php', 
   data:$scope.form_data
  }).success(function(data){
   if(data.message != '')
   {
    $scope.form_data = null;
    $scope.success = true;
    $scope.successMessage = data.message;
    $interval(function(){
     $scope.success = false;
    }, 1000);
   }
  });
 };

 $scope.fetchData = function(){
  $http.get('view_data.php').success(function(data){
   $scope.messagesData = data;
  });
 };

 $interval(function(){
  $scope.fetchData();
 }, 1000);

});



</script>

Pada script diatas ada file proses data serta umtuk menampilkan data ,tapi sebelumnya saya meyetel interval waktu 1000 agar lebih cepat,jika sahabat ingin sedikit lama tinggal diubah saja nilai intervalnya.

Langkah selanjutnya membuat code dari file insert.php dan view.php seperti dibawah ini:

insert.php

<?php

// konfigurasi koneksi ke database
include("config.php");

$form_data = json_decode(file_get_contents("php://input"));

if(!empty($form_data->kursus))
{
 $data = array(
  ':kursus'  => $form_data->kursus
 );
 $query = "
 INSERT INTO pkt_kursus 
 (nama_paket) VALUES (:kursus)
 ";
 $statement = $connect->prepare($query);
 if($statement->execute($data))
 {
  $output = array(
   'message' => 'Data Berhasil Disimpan'
  );
  echo json_encode($output);
 }
}

?>

view_data.php

<?php

// konfigurasi koneksi ke database
include("config.php");

$query = "SELECT * FROM pkt_kursus ORDER BY id_kursus DESC";

$statement = $connect->prepare($query);

if($statement->execute())
{
 while($row = $statement->fetch(PDO::FETCH_ASSOC))
 {
  $data[] = $row;
 }
 echo json_encode($data);
}

?>

Apabila sudah simpan semua file yang sudah diketikkan, sekarang buka pada browser masing-masing dan berikut tampilan yang sudah saya buat:

saya kira cukup dalam pembahasan artikel ini mengenai cara Membuat Auto Refresh Menggunakan AngularJs di PHP. Semoga bermanfaat dan sampai jumpa lagi dengan pembahasan lainnya.

selamat mencoba,

Cara Membuat Auto Refresh Menggunakan AngularJs di PHP

Kategori