Thursday, February 6, 2020

How to Refresh Div Content Automatically using AngularJS in PHP

      , , , , , , ,      No comments   
How to Refresh Div Content Automatically using AngularJS in PHP

In this post we learn how we can automatically update content or dynamic div tag data with AngularJS using PHP Script. Because the updating content of a specific HTML element of the web application page is one of the functions that are required for dynamic web development. For this reason JavaScript has provided us with the setInterval () method to perform the same task at regular intervals at a certain point in time. However, we want to do this in AngularJS, so AngularJS has the setInterval () container in the $ Interval angle service module. With this angular service module we can repeat the same task at regular intervals.

We used the $ interval service to update a DIV or content or article data at a certain time. This Angular service did the same job we did with the javascript setInterval () method, but with $ interval we have more control, e.g. B. via the celebrity callback, which can cancel or stop the execution of the data update.

To find out how we can use the $ interval service to automatically update div content without updating the website. Here we used a PHP script and created a simple chat application using AngularJS and PHP. In this chat application we have seconds loaded into the div tag using the AngularJS function which calls the PHP script to retrieve data from the MySQL data and display it under the div tag, we have that uses Angular's $ interval service here. We can use this service just like setInterval (). In this service we have also set our function fetchData () and a time interval of 5 seconds, so that the service $ interval has called the function fetchData () every 5 seconds. It sends the request to the PHP script, data from the MySQL chat Table, and then appears in Div without refreshing the webpage. If you want to build a robust web application with AngularJS and PHP, this source code is helpful. This way, the div content is automatically updated with PHP using the AngularJS $ Interval Service.


Source Code



--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `chat`
--

CREATE TABLE `chat` (
  `chat_id` int(11) NOT NULL,
  `chat_content` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `chat`
--
ALTER TABLE `chat`
  ADD PRIMARY KEY (`chat_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `chat`
--
ALTER TABLE `chat`
  MODIFY `chat_id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

database_connection.php



<?php

//database_connection.php

$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");



?>

index.php



<!DOCTYPE html>
<html>
 <head>
  <title>How to Refresh Div Content Automatically  using AngularJS in PHP</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <style>
  #load_tweets
    {
      padding:16px;
      background-color:#f1f1f1;
      margin-bottom:30px;
    }
    #load_tweets li
    {
      padding:12px;
      border-bottom:1px dotted #ccc;
      list-style: none;
    }
  </style>
 </head>
 <body>
  <br />
   <h3 align="center">How to Refresh Div Content Automatically  using AngularJS in PHP</h3>
  <br />
  <div ng-app="autoRefreshApp" ng-controller="autoRefreshController" class="container" style="width:100%; max-width:600px;">
   <h3 align="center">Chat Page</h3>

   <div class="alert alert-success alert-dismissible" ng-show="success">
    <a href="#" class="close" aria-label="close">&times;</a>
    {{ successMessage }}
   </div>

   <form method="post" ng-model="form_data" ng-submit="submitForm()">
    <div class="form-group">
     <label>Enter Your Message</label>
     <textarea name="content" class="form-control" ng-model="form_data.content"></textarea>
    </div>
    <div class="form-group" align="right">
     <input type="submit" name="submit" class="btn btn-info" value="Send" />
    </div>
   </form>
   <div id="load_tweets">
    <ul>
     <li ng-repeat="messageData in messagesData">
      {{ messageData.chat_content }}
     </li>
    </ul>
   </div>
  </div>
 </body>
</html>

<script>

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

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

 $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;
    }, 5000);
   }
  });
 };

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

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

});



</script>

insert.php



<?php

//insert.php

include("database_connection.php");

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

if(!empty($form_data->content))
{
 $data = array(
  ':chat_content'  => $form_data->content
 );
 $query = "
 INSERT INTO chat 
 (chat_content) VALUES (:chat_content)
 ";
 $statement = $connect->prepare($query);
 if($statement->execute($data))
 {
  $output = array(
   'message' => 'Message Sended'
  );
  echo json_encode($output);
 }
}

?>

fetch_data.php



<?php

//fetch_data.php

include("database_connection.php");

$query = "SELECT * FROM chat ORDER BY chat_id DESC";

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

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

?>


0 comments:

Post a Comment

Please don't enter any spam link in the comment box.