ANGULARJS PHP MySQL Inline CRUD Example Tutorial From Scratch

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

Also Read :  SQL Remove Numeric Characters in String

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 :

Also Read :  AngularJS Form Validation

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.