AngularJS Inline PHP CRUD (Create,Read,Update,Delete) Operations

Inline CRUD means that the process of creating, reading, updating and deleting records is carried out in the grid of the table. Adding, editing and deleting data online is done with AngularJS with PHP Mysql. In some of our publications where we discussed the push update, delete MySQL data using Jquery Ajax with PHP. But now we want to do that with the AngularJS script. Live Inline CRUD has expanded the website where we can dynamically add new records, edit or update existing data, and delete or delete mysql records to dynamically display the remaining data on the website without updating the website with AngularJS with PHP Mysql .

Fetch Data from Mysql and Display on Webpage using AngularJS with PHP

In the CRUD operation "Live Table" we would first like to use PHP and AngularJS to retrieve data from the mysql table and then to display it in a tabular grid format on the website using the "Edit and Delete" button. To display data in table format, we use the AngularJS directive ng-repeat. Here we cannot use the contenteditable HTML5 attribute because AngularJS is not compatible with this attribute. If we click the Edit button here, the data in the respective table row must be converted to the text field format and the Edit and Delete button converted to the Save and Cancel button. We can use the ng-template directive in AngularJS. With this directive, we can create a dynamic HTML template for various purposes if we only want to display data, it is displayed in plain text format and if we want to edit data, it must be converted to a text field format. With this function, which we can execute with the ng-template directive and the ng-include directive, we can determine which template should be used in which event. In this way we can retrieve data from the MySQL table and load it into the website in a table format using AngularJS and PHP.

Inline Table Insert or Add Data into Mysql using AngularJS with PHP

Inserting or adding data online in MySQL means that we don't have to navigate to a URL and insert data and submit the form and redirect to the entire page of the data table after submitting the page. But in the table we will insert data into the MySQL database using AngularJS using PHP. For online table insertion, we add an empty table row with the text field at the beginning of the table using the Add button. In order to then insert data, we have to complete the data in the text field of the online table and click on the Send button. After you click the "Submit" button, the data is inserted into or added to the MySQL table. The latest data on the website is displayed in a tabular grid format without the entire website being updated. Before inserting data, however, we would like to check whether the user has filled in the data in the text field or not. For form validation, we need to write JavaScript code to validate whether we used Jquery, but here we used AngularJS. For the user who entered some data or not, we used AngularJS's ng-required and ng-disabled directives. The ng-required statement does something like the required HTML attribute, but does not display a verification message on the website. However, we used the ng-disabled statement for the submit button. If you have not filled in the "html" field of the instruction ng-required, this button will be deactivated. However, when the user has filled in all records, only the submit button is activated. This form validation can therefore be carried out with this AngularJS directive for ng-required and ng-disabled. Once the user completes the form and clicks the Add button, the data is published in the PHP script and when the PHP script is used, data is added or added to the MySQL table. In this way we can use PHP with AngularJS to insert or add data online to the mysql database.

Inline Table Edit or Update Mysql Data using AngularJS with PHP

The online output or update of the MySQL data offers the user an easy way to edit or update the grid table data in the table itself without navigating the page to another page in order to edit the form field. However, this is possible. Edit points or update the data operation in the grid of the table. As we know, we didn't use the contenteditable HTML attribute. So how can we edit the table data field? We used the AngularJS ng-template directive for processing. With this instruction we convert the plain text data of the table data field into a text field. Then we can simply edit the data. We can choose a dynamic template with the ng-include directive. With this directive we can use a dynamic template according to the requirements. If you use this AngularJS directive when you click the Edit button, data from specific rows is converted to an editable text field with the Save and Undo button. So when we click the "Edit" button, the data in the row is in a PHP script to edit or update data. We used the AngularJS directive ng-model to send data from the online table to the PHP script. This is how we performed the online output or update of the MySQL table data with AngularJS with PHP.

Inline Delete or remove mysql data using AngularJS with PHP

This is the last inline CRUD operation that AngularJS uses with PHP. Here we see how we can use AngularJS to delete or delete data from the live table using PHP. It is a very important process. To do this, we need to run a single AngularJS function, which will be executed when we click the Delete a specific row of data button. When we click the delete button, a PHP script request to delete data from the MySQL database is sent. As soon as the data has been deleted, the remaining data is displayed on the website in a tabular grid format on the website.

So this is the simple process of building a one-page online CRUD application using AngularJS with PHP. In this application, we can create, read, update, and delete the mysql data process on a single page without going to another page. The entire process is carried out without updating the website. Below is the full source code of this AngularJS inline crud application with PHP MySQL.

Source Code

database_connection.php

<?php

//database_connection.php

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

?>

index.php

<html>  
    <head>  
        <title>AngularJS Inline PHP  CRUD (Create,Read,Update,Delete) Operations</title>  
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>  
    </head>  
    <body>  
        <div class="container">  
   <br />
            <h3 align="center">AngularJS Inline PHP  CRUD (Create,Read,Update,Delete) Operations</h3><br />
   <div class="table-responsive" ng-app="liveApp" ng-controller="liveController" ng-init="fetchData()">
                <div class="alert alert-success alert-dismissible" ng-show="success" >
                    <a href="#" class="close" data-dismiss="alert" ng-click="closeMsg()" aria-label="close">&times;</a>
                    {{successMessage}}
                </div>
                <form name="testform" ng-submit="insertData()">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="text" ng-model="addData.first_name" class="form-control" placeholder="Enter First Name" ng-required="true" /></td>
                                <td><input type="text" ng-model="addData.last_name" class="form-control" placeholder="Enter Last Name" ng-required="true" /></td>
                                <td><button type="submit" class="btn btn-success btn-sm" ng-disabled="testform.$invalid">Add</button></td>
                            </tr>
                            <tr ng-repeat="data in namesData" ng-include="getTemplate(data)">
                            </tr>
                            
                        </tbody>
                    </table>
                </form>
                <script type="text/ng-template" id="display">
                    <td>{{data.first_name}}</td>
                    <td>{{data.last_name}}</td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm" ng-click="showEdit(data)">Edit</button>
                        <button type="button" class="btn btn-danger btn-sm" ng-click="deleteData(data.id)">Delete</button>
                    </td>
                </script>
                <script type="text/ng-template" id="edit">
                    <td><input type="text" ng-model="formData.first_name" class="form-control"  /></td>
                    <td><input type="text" ng-model="formData.last_name" class="form-control" /></td>
                    <td>
                        <input type="hidden" ng-model="formData.data.id" />
                        <button type="button" class="btn btn-info btn-sm" ng-click="editData()">Save</button>
                        <button type="button" class="btn btn-default btn-sm" ng-click="reset()">Cancel</button>
                    </td>
                </script>         
   </div>  
  </div>
    </body>  
</html>  
<script>
var app = angular.module('liveApp', []);

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

    $scope.formData = {};
    $scope.addData = {};
    $scope.success = false;

    $scope.getTemplate = function(data){
        if (data.id === $scope.formData.id)
        {
            return 'edit';
        }
        else
        {
            return 'display';
        }
    };

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

    $scope.insertData = function(){
        $http({
            method:"POST",
            url:"insert.php",
            data:$scope.addData,
        }).success(function(data){
            $scope.success = true;
            $scope.successMessage = data.message;
            $scope.fetchData();
            $scope.addData = {};
        });
    };

    $scope.showEdit = function(data) {
        $scope.formData = angular.copy(data);
    };

    $scope.editData = function(){
        $http({
            method:"POST",
            url:"edit.php",
            data:$scope.formData,
        }).success(function(data){
            $scope.success = true;
            $scope.successMessage = data.message;
            $scope.fetchData();
            $scope.formData = {};
        });
    };

    $scope.reset = function(){
        $scope.formData = {};
    };

    $scope.closeMsg = function(){
        $scope.success = false;
    };

    $scope.deleteData = function(id){
        if(confirm("Are you sure you want to remove it?"))
        {
            $http({
                method:"POST",
                url:"delete.php",
                data:{'id':id}
            }).success(function(data){
                $scope.success = true;
                $scope.successMessage = data.message;
                $scope.fetchData();
            }); 
        }
    };

});

</script>

select.php

<?php  

//select.php
 
include('database_connection.php');

$query = "SELECT * FROM tbl_sample ORDER BY id DESC";
$statement = $connect->prepare($query);
if($statement->execute())
{
  while($row = $statement->fetch(PDO::FETCH_ASSOC))
  {
    $data[] = $row;
  }
  echo json_encode($data);
}

?>

insert.php

<?php  

//insert.php

include('database_connection.php');

$message = '';

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

$data = array(
 ':first_name'  => $form_data->first_name,
 ':last_name'  => $form_data->last_name
);

$query = "
 INSERT INTO tbl_sample 
 (first_name, last_name) VALUES 
 (:first_name, :last_name)
";

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

if($statement->execute($data))
{
 $message = 'Data Inserted';
}

$output = array(
 'message' => $message
);

echo json_encode($output);

?>

edit.php

<?php  

//edit.php

include('database_connection.php');

$message = '';

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

$data = array(
 ':first_name'  => $form_data->first_name,
 ':last_name'  => $form_data->last_name,
 ':id'    => $form_data->id
);

$query = "
 UPDATE tbl_sample 
 SET first_name = :first_name, last_name = :last_name 
 WHERE id = :id
";

$statement = $connect->prepare($query);
if($statement->execute($data))
{
 $message = 'Data Edited';
}

$output = array(
 'message' => $message
);

echo json_encode($output);

?>

delete.php

<?php

//delete.php

include('database_connection.php');

$message = '';

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

$query = "DELETE FROM tbl_sample WHERE id = '".$form_data->id."'";

$statement = $connect->prepare($query);
if($statement->execute())
{
 $message = 'Data Deleted';
}

$output = array(
 'message' => $message
);

echo json_encode($output);

?>