Today, We want to share with you ANGULARJS PHP MySQL Inline CRUD Example Tutorial From Scratch.In this post we will show you AngularJS Inline CRUD with PHP, hear for Inline Table Add Edit Delete using AngularJS in PHP Mysql we will give you demo and example for implement.In this post, we will learn about AngularJS Inline CRUD Example Using PHP MySQLi Database with an example.
ANGULARJS PHP MySQL Inline CRUD Example Tutorial From Scratch
There are the Following The simple About ANGULARJS PHP MySQL Inline CRUD Example Tutorial From Scratch Full Information With Example and source code.
As I will cover this Post with live Working example to develop AngularJS Inline CRUD operation using PHP & MySQL, so the some major files and Directory structures for this example is following below.
- index.php
- select.php
- insert.php
- edit.php
- delete.php
Step 1: Creating The Database connection
db_config.php
Step 2: AngularJS PHP Create, Read, Update, Delete
index.php
This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.php.
<title>ANGULARJS PHP MySQL Inline CRUD Example Tutorial From Scratch</title>
<div class="pakainfo container">
<br />
<h3 align="center">ANGULARJS PHP MySQL Inline CRUD Example Tutorial From Scratch</h3><br />
<div class="table-responsive pakainfo">
<div class="pakainfo alert alert-success alert-dismissible">
<a href="#" class="close">×</a>
{{memMsgSuccess}}
</div>
<form name="testform">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Member Name</th>
<th>Last Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td><button type="submit" class="btn btn-success btn-sm">Add</button></td>
</tr>
<tr>
</tr>
</tbody>
</table>
</form>
<td>{{data.member_fname}}</td>
<td>{{data.member_lname}}</td>
<td>
<button type="button" class="btn btn-primary btn-sm">Edit</button>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-info btn-sm">Save</button>
<button type="button" class="btn btn-default btn-sm">Cancel</button>
</td>
</div>
</div>
var app = angular.module('liveApp', []);
app.controller('liveController', function($scope, $http){
$scope.memberData = {};
$scope.addData = {};
$scope.success = false;
$scope.addDatatemplate = function(data){
if (data.id === $scope.memberData.id)
{
return 'edit';
}
else
{
return 'display';
}
};
$scope.getMemData = function(){
$http.get('select.php').success(function(data){
$scope.memberNames = data;
});
};
$scope.insertData = function(){
$http({
method:"POST",
url:"insert.php",
data:$scope.addData,
}).success(function(data){
$scope.success = true;
$scope.memMsgSuccess = data.status;
$scope.getMemData();
$scope.addData = {};
});
};
$scope.showEdit = function(data) {
$scope.memberData = angular.copy(data);
};
$scope.editData = function(){
$http({
method:"POST",
url:"edit.php",
data:$scope.memberData,
}).success(function(data){
$scope.success = true;
$scope.memMsgSuccess = data.status;
$scope.getMemData();
$scope.memberData = {};
});
};
$scope.reset = function(){
$scope.memberData = {};
};
$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.memMsgSuccess = data.status;
$scope.getMemData();
});
}
};
});
Step 3: ANGULARJS PHP MySQL Select Data
select.php
prepare($query);
if($statement->execute())
{
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row;
}
echo json_encode($data);
}
?>
Step 4: AngularJS Smart Table with Add Records
insert.php
$mem_data_retrive->member_fname,
':member_lname' => $mem_data_retrive->member_lname
);
$query = "
INSERT INTO member_table
(member_fname, member_lname) VALUES
(:member_fname, :member_lname)
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
$status = 'Data Inserted';
}
$output = array(
'status' => $status
);
echo json_encode($output);
?>
Step 5: AngularJS Smart Table with Edit and Delete Records
edit.php
$mem_data_retrive->member_fname,
':member_lname' => $mem_data_retrive->member_lname,
':id' => $mem_data_retrive->id
);
$query = "
UPDATE member_table
SET member_fname = :member_fname, member_lname = :member_lname
WHERE id = :id
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
$status = 'Data Edited';
}
$output = array(
'status' => $status
);
echo json_encode($output);
?>
delete.php
id."'";
$statement = $connect->prepare($query);
if($statement->execute())
{
$status = 'Data Deleted';
}
$output = array(
'status' => $status
);
echo json_encode($output);
?>
Angular 6 CRUD Operations Application Tutorials
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about ANGULARJS PHP MySQL Inline CRUD Example Tutorial From Scratch.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.