July 17, 2019

AngularJS Inline Table Add, Edit and Delete using PHP MySQL

In this article, we going to see AngularJS Inline table add, edit and delete using PHP MySQL. Inline CRUD also knows as create, read, update and delete. Using the CRUD only we going to do the following process. AngularJS is one of the best ways to reduce the loading capacity for the webpage and also using the AngularJS you can handle a huge collection of data on the webpage. By using AngularJS we going to add, edit and delete the data in the DataTable without refreshing the webpage. Here you can edit or update the record with the existing data also same for delete or removing the data on the webpage.

By fetching the data from the MySQL table we going to display the records in the webpage DataTable by using AngularJS and PHP. In the DataTable you can see the Edit and Delete option using that you can modify your records or else if you like to delete a record you can do. To display all the available data in the MySQL table where you need to use “ng-repeat” directive of AngularJS. The “ng-repeat” can display all records with the edit and delete option using that you can do the work in the single webpage without page refresh. By using “ng-template” you can get the save and cancel button and also when you click on the edit button the data table automatically converted into textbox format using that you can modify your data, Once you completed the modification now you can save or cancel.

The following example you can see Username and Email ID add, edit and delete options.

Database

--
-- Database: `tut`
--

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

--
-- Table structure for table `user_data`
--

CREATE TABLE `user_data` (
  `id` int(11) NOT NULL,
  `username` varchar(255) NOT NULL,
  `user_email` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `user_data`
--

INSERT INTO `user_data` (`id`, `username`, `user_email`) VALUES
(1, 'Mraj', 'mraj@softaox.info'),
(2, 'Madesh', 'madesh@gmail.com'),
(3, 'Vinoth', 'Vinoth@gmail.com'),
(4, 'Deepak', 'deepak@softaox.info'),
(5, 'Thoufiq', 'thoufiq@gmail.com'),
(6, 'Raja', 'raja@softaox.info');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `user_data`
--
ALTER TABLE `user_data`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `user_data`
--
ALTER TABLE `user_data`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21;
COMMIT;

-- Database: `tut`

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

-- Table structure for table `user_data`

CREATE TABLE `user_data` (

`id` int(11) NOT NULL,

`username` varchar(255) NOT NULL,

`user_email` varchar(255) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data for table `user_data`

INSERT INTO `user_data` (`id`, `username`, `user_email`) VALUES

(1, 'Mraj', '[email protected]'),

(2, 'Madesh', '[email protected]'),

(3, 'Vinoth', '[email protected]'),

(4, 'Deepak', '[email protected]'),

(5, 'Thoufiq', '[email protected]'),

(6, 'Raja', '[email protected]');

-- Indexes for dumped tables

-- Indexes for table `user_data`

ALTER TABLE `user_data`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `user_data`

ALTER TABLE `user_data`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21;

COMMIT;

conn.php

<?php
 $host = "localhost";  
 $db_user = "root";  
 $db_pass = "";  
 $dbname = "tut";  

 $connect = new PDO("mysql:host=$host; dbname=$dbname", $db_user, $db_pass); 
?>

<?php

$host = "localhost";

$db_user = "root";

$db_pass = "";

$dbname = "tut";

$connect = new PDO("mysql:host=$host; dbname=$dbname", $db_user, $db_pass);

index.php

<html>
<head>
    <title>AngularJS Inline Table Add, Edit and Delete using PHP MySQL - softAOX</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="container">
        <br />
        <h3 align="center">AngularJS Inline Table Add, Edit and Delete using PHP MySQL</h3>
        <br />
        <div class="table-responsive" ng-app="myApp" ng-controller="crudController" 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> {{displayMessage}}
            </div>
            <form name="myform" ng-submit="insertData()">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th><em class="fa fa-cog"></em></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input type="text" ng-model="addData.username" class="form-control" placeholder="Enter your name" ng-required="true" />
                            </td>
                            <td>
                                <input type="email" ng-model="addData.user_email" class="form-control" placeholder="Enter your email" ng-required="true" />
                            </td>
                            <td>
                                <button type="submit" class="btn btn-success btn-sm" ng-disabled="myform.$invalid"><em class="fa fa-plus"></em></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.username}}</td>
                <td>{{data.user_email}}</td>
                <td>
                    <a class="btn btn-default" ng-click="showEdit(data)"><em class="fa fa-pencil"></em></a>
                    <a class="btn btn-danger" ng-click="deleteData(data.id)"><em class="fa fa-trash"></em></a>
                </td>
            </script>
            <script type="text/ng-template" id="edit">
                <td>
                    <input type="text" ng-model="formData.username" class="form-control" />
                </td>
                <td>
                    <input type="email" ng-model="formData.user_email" class="form-control" />
                </td>
                <td>
                    <input type="hidden" ng-model="formData.data.id" />
                    <a class="btn btn-success" ng-click="editData()"><em class="fa fa-save"></em></a>
                    <a class="btn btn-danger" ng-click="reset()"><em class="fa fa-times"></em></a>
                </td>
            </script>
        </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);

        app.controller('crudController', 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('fetch.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.displayMessage = 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.displayMessage = 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 delete?")) {
                    $http({
                        method: "POST",
                        url: "delete.php",
                        data: {
                            'id': id
                        }
                    }).success(function(data) {
                        $scope.success = true;
                        $scope.displayMessage = data.message;
                        $scope.fetchData();
                    });
                }
            };

        });
    </script>
</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

<html>

<head>

<title>AngularJS Inline Table Add, Edit and Delete using PHP MySQL - softAOX</title>

</head>

<body>

<br />

<h3 align="center">AngularJS Inline Table Add, Edit and Delete using PHP MySQL</h3>

<br />

<a href="#" class="close" data-dismiss="alert" ng-click="closeMsg()" aria-label="close">×</a> {{displayMessage}}

</div>

<thead>

<tr>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</tr>

</tbody>

</table>

</form>

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

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

<td>

</td>

</script>

<td>

</td>

<td>

</td>

<td>

</td>

</script>

</div>

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

app.controller('crudController', 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('fetch.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.displayMessage = 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.displayMessage = 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 delete?")) {

$http({

method: "POST",

url: "delete.php",

data: {

'id': id

}

}).success(function(data) {

$scope.success = true;

$scope.displayMessage = data.message;

$scope.fetchData();

});

}

};

});

</script>

</body>

</html>

fetch.php

<?php  
// MySQL Connection 
include('conn.php');

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

<?php

// MySQL Connection

include('conn.php');

$query = "SELECT * FROM user_data 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  
// MySQL Connection 
include('conn.php');

$message = '';

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

$data = array(
 ':username'  => $form_data->username,
 ':user_email'  => $form_data->user_email
);

$query = "
 INSERT INTO user_data 
 (username, user_email) VALUES 
 (:username, :user_email)
";

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

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

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

echo json_encode($output);
?>

<?php

// MySQL Connection

include('conn.php');

$message = '';

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

$data = array(

':username' => $form_data->username,

':user_email' => $form_data->user_email

);

$query = "

INSERT INTO user_data

(username, user_email) VALUES

(:username, :user_email)

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

if($statement->execute($data))

{

$message = 'Record Inserted Successfully';

}

$output = array(

'message' => $message

);

echo json_encode($output);

edit.php

<?php  
// MySQL Connection 
include('conn.php');

$message = '';

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

$data = array(
 ':username'  => $form_data->username,
 ':user_email'  => $form_data->user_email,
 ':id'    => $form_data->id
);

$query = "
 UPDATE user_data 
 SET username = :username, user_email = :user_email 
 WHERE id = :id
";

$statement = $connect->prepare($query);
if($statement->execute($data))
{
 $message = 'Record Updated Successfully';
}

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

echo json_encode($output);
?>

<?php

// MySQL Connection

include('conn.php');

$message = '';

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

$data = array(

':username' => $form_data->username,

':user_email' => $form_data->user_email,

':id' => $form_data->id

);

$query = "

UPDATE user_data

SET username = :username, user_email = :user_email

WHERE id = :id

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

if($statement->execute($data))

{

$message = 'Record Updated Successfully';

}

$output = array(

'message' => $message

);

echo json_encode($output);

delete.php

<?php
// MySQL Connection 
include('conn.php');

$message = '';

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

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

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

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

echo json_encode($output);
?>

<?php

// MySQL Connection

include('conn.php');

$message = '';

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

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

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

if($statement->execute())

{

$message = 'Record Deleted Successfully';

}

$output = array(

'message' => $message

);

echo json_encode($output);

Preview & Download

CRUD

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

AngularJS Inline Table Add, Edit and Delete using PHP MySQL

Share:

Database

conn.php

index.php

fetch.php

insert.php

edit.php

delete.php

Preview & Download

Mraj

Don't miss on latest updates