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

<?php
$connect = new PDO("mysql:host=localhost;dbname=member_list", "root", "atmiya2548");

?>

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.

Also Read :  PHP - MySQLi Insert Update Delete CRUD Operation using AngularJS

<html>  
    <head>  
        <title>ANGULARJS PHP MySQL Inline CRUD Example Tutorial From Scratch</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="pakainfo container">  
   <br />
            <h3 align="center">ANGULARJS PHP MySQL Inline CRUD Example Tutorial From Scratch</h3><br />
   <div class="table-responsive pakainfo" ng-app="liveApp" ng-controller="liveController" ng-init="getMemData()">
                <div class="pakainfo alert alert-success alert-dismissible" ng-show="success" >
                    <a href="#" class="close" data-dismiss="alert" ng-click="closeMsg()" aria-label="close">×</a>
                    {{memMsgSuccess}}
                </div>
                <form name="testform" ng-submit="insertData()">
                    <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><input type="text" ng-model="addData.member_fname" class="form-control" placeholder="Enter Member Name" ng-required="true" /></td>
                                <td><input type="text" ng-model="addData.member_lname" 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 memberNames" ng-include="addDatatemplate(data)">
                            </tr>
                            
                        </tbody>
                    </table>
                </form>
                <script type="text/ng-template" id="display">
                    <td>{{data.member_fname}}</td>
                    <td>{{data.member_lname}}</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="memberData.member_fname" class="memfield form-control"  /></td>
                    <td><input type="text" ng-model="memberData.member_lname" class="memfield form-control" /></td>
                    <td>
                        <input type="hidden" ng-model="memberData.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.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();
            }); 
        }
    };

});

</script>

Step 3: ANGULARJS PHP MySQL Select Data

select.php

<?php  
//ANGULARJS PHP MySQL Inline CRUD Example Tutorial From Scratch
include('db_config.php');

$query = "SELECT * FROM member_table ORDER BY id DESC";
$statement = $connect->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

<?php  
//ANGULARJS PHP MySQL Inline CRUD Example Tutorial From Scratch
include('db_config.php');

$status = '';

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

$data = array(
 ':member_fname'  => $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

<?php  
//ANGULARJS PHP MySQL Inline CRUD Example Tutorial From Scratch
include('db_config.php');

$status = '';

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

$data = array(
 ':member_fname'  => $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

<?php

include('db_config.php');

$status = '';

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

$query = "DELETE FROM member_table WHERE id = '".$mem_data_retrive->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 :  PHP Laravel check Object is empty or not

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.

Gondaliya Jaydeep

Hi, I’m Jaydeep Gondaliya, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]