AngularJS Insert,Edit,Update,Delete in DataTable Using PHP MySQLi

AngularJS Insert,Edit,Update,Delete in DataTable Using PHP MySQLi

In this Post We Will Explain About is AngularJS Insert,Edit,Update,Delete in DataTable Using PHP MySQLi With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS CRUD: Example Using MySQLi Database Example

In this post we will show you Best way to implement CRUD RESTful php service used with AngularJS and MySQLi, hear for AngularJS PHP Jquery Ajax CRUD(insert update delete) tutorial example with source code with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Phase 1:- Database Connection

First of all create a new Mysql table Name as student_details with below some table structure. PHP angular mysql insert some more dumping data.

CREATE TABLE `student_details` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `email` varchar(100) NOT NULL,
  `education` varchar(50) NOT NULL,
  `age` date NOT NULL
)

DB Configuration

Make a create new file Like name as db_config_live.php and then simple copy and paste the copied below source code inside the main SQL file.

<?php
    $stud = 'root';
    $password = 'Password_here';
    $database = 'Your_database_name';
    $db = new mysqli('localhost',$stud,$password,$database);
    if(!$db):
        echo 'Your simple database connection not exist'; exit;
    endif;
?>

Phase 2:- Include Bootstrap and Angularjs CDN CSS and JS

Include here Bootstrap CDN file to your HTML Main section under tag. angular directive ng-app – The main angular module ng-app directive says AngularJS that this is source code main index.html or header file the root HTML tags of the AngularJS web SPA’s application.

Also Read :   PHP HTTP POST JSON data using cURL

<html ng-app="liveApp">
<head>
    <title>Angular Js applications – Insert, Fetch , Edit – update , Delete Operations</title>
    <link href='http://www.live24u.com/favicon.ico' rel='icon' type='image/x-icon'/>
    <!--live24u.com Bootstrap CSS --> 
    <link href="live24u/css/bootstrap.min.css" rel="stylesheet">
    <link href="live24u/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link href="live24u/css/custom-style.css" rel="stylesheet">
    <!--live24u.com /Bootstrap CSS --> 
    
    <!--live24u.com JQuery DataTables--> 
    <script type="text/javascript" src="jquery-1.12.4.js"></script>
    <script src="live24u/js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="live24u/js/dataTables/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="live24u/js/dataTables/dataTables.bootstrap.min.js"></script>
    <!--live24u/JQuery DataTables --> 
    
    <!--live24u/Angualrjs --> 
        <script type="text/javascript" src="live24u/js/angularjs/angular.min.js"></script>
        <script type="text/javascript" src="live24u/js/angularjs/angular-datatables.min.js"></script>
        <script type="text/javascript" src="live24u/js/angularjs/users_dump.angular.js"></script>
    <!--live24u/Angualrjs --> 
</head>

Load HTML Template

Make a create new file Like name is index.html file get or load Data angular ajax dynemic call dynamic retrive data more records responses.

<div ng-controller="students" data-ng-init="studentDetails()" class="container">
    <div class="col-md-12">
        <div class="live24u add_panel">
            <a ng-click="liveModal();" class="live24u model_form btn btn-success">
                <i class="live24u glyphicon glyphicon-plus"></i> Add Student</a>
            <div class="live24u clearfix"></div>
        </div>
        <div class="live24u table-responsive">
            <table datatable="ng"  id="examples" 
                class="live24u table table-striped table-bordered" cellspacing="0" 
                    width="100%">
                <thead>
                    <tr>
                        <th>Student No</th>
                        <th>Student Name</th>
                        <th>StudEmail</th>
                        <th>education</th>
                        <th>Age</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="stud in student_list">
                        <td>{{$index + 1}}</td>
                        <td>{{stud.name}}</td>
                        <td>{{stud.email}}</td>
                        <td>{{stud.education}}</td>
                        <td>{{stud.age | date: "yyyy-MM-dd"}}</td>
                        <td>
                            <a href="javascript:void(0);" ng-click="liveStudModal(stud);"> 
                                <i class="glyphicon glyphicon-pencil"></i>
                            </a>
                            <a href="javascript:void(0);" ng-click="RemoveModal(stud)"> 
                                <i class="glyphicon glyphicon-remove"></i> 
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div ng-if="live_success_msg" class="success_pop alert alert-success">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
             <strong> {{live_success_msg}} </strong> 
        </div>
    </div>
</div>   

Phase 3:- Angularjs Controller

Make a new angularjs controller file some stud.angular.js load insert update and delete curd functions.

Also Read :   jQuery AJAX Live Check Email Availability using PHP MySQLi

var liveApp = angular.module('liveApp',['datatables']);
liveApp.controller('students', function($scope,$http){
    $scope.listMst = {};
    $scope.studentDetails = function () {
        $http({ 
            method: 'GET',
            url: 'retrive_students.php'
        })
        .then(function (success){
            $scope.student_list = [];
            $scope.student_list =success.data;    
        },function (error){
                console.log(error);
        });
    };
$scope.liveModal = function() {
        $scope.student_frm = angular.copy($scope.listMst);
        $scope.my_frm_nm = 'Add New Student Information';
        $('#live_frm_mdl').modal('show');
    };
$scope.StudentInsertUpdate = function (student_frm) {
       var student_details = student_frm;
       $http({
         method: 'POST',
         url: 'StudentInsertUpdate.php',
         data: student_details,
        }).then(function(response) {
            $scope.studentDetails();
            $scope.live_success_msg = response.data;
        },function (error){
            console.log(error);
        });
       $('#live_frm_mdl').modal('hide');
    };
$scope.liveStudModal = function(stud) {
        $scope.my_frm_nm = 'Edit Student Information';
        var live_edit_frm = {};
        angular.copy(stud, live_edit_frm);
        $scope.student_frm = live_edit_frm;
        $scope.student_frm.age = new Date($scope.student_frm.age);        
        $('#live_frm_mdl').modal('show');
    };
$scope.RemoveModal = function(stud) {
        var r = confirm("Are you sure want to Remove ?");
        if (r == true) {
            var students_rec_id = stud.id;
            $http({
                method: 'POST',
                url: 'StudentRemove.php',
                data: students_rec_id,
            }).then(function(response) {
                var index = $scope.student_list.indexOf(stud);
                $scope.student_list.splice(index, 1); 
                $scope.live_success_msg = response.data;
            },function (error){
                console.log(error);
            });
        }
    };
});

Phase 4:- PHP Script Response

Get Users Information(retrive_students.php)

Retrive all the Data rows in the all student_details Mysql table. Convert simple server side PHP Data response has more JSON parse.

<?php
    include('db_config_live/db_config_live.php');
    $student_details = array();
    if ($result = $db->query("SELECT * FROM student_details")) {

        while($row = $result->fetch_array(MYSQL_ASSOC)) {
                $student_details[] = $row;
        }
        echo json_encode($student_details);
    }
    
?>

StudentInsertUpdate.php

Create or New stud Add/Update (StudentInsertUpdate.php)

<?php
    include('db_config_live/db_config_live.php');
    if($_SERVER['REQUEST_METHOD'] == 'POST') {
        $data_retrive = json_decode(file_get_contents('php://input'), true);
        $name       = $db->real_escape_string($data_retrive['name']);
        $email      = $db->real_escape_string($data_retrive['email']);
        $education   = $db->real_escape_string($data_retrive['education']);
        $date       = new DateTime($db->real_escape_string($data_retrive['age']));
        $user_dob   = $date->format('Y-m-d');
        $id         = (@$data_retrive['id']!="") ? 
        $db->real_escape_string(@$data_retrive['id']) : '';
        if($id!="") :
            $query = " UPDATE student_details SET name= '$name', email='$email',
             education='$education',age='$user_dob' WHERE id=$id";
            $res_message = "Successfully Updated Your Record";
        else: 
            $query = " INSERT INTO student_details SET name= '$name', email='$email',
             education='$education',age='$user_dob'";
            $res_message = "Successfully Inserted Your Record";         
        endif;
        $sql = $db->query($query);
        echo $res_message;
    }   
?>

StudentRemove.php

Delete stud information (StudentRemove.php)

<?php
    include('db_config_live/db_config_live.php');
    if($_SERVER['REQUEST_METHOD'] == 'POST') {
        $data_retrive = json_decode(file_get_contents('php://input'), true);
        $id = ($data_retrive!="") ? $db->real_escape_string($data_retrive) : '';
        if($id!="") :
            $query = "DELETE FROM student_details WHERE id=$id";
            $sql = $db->query($query);
            $res_message = "Successfully Removed Your Record";
        else:  
            $res_message = "Something went wrong(Student) Please Check Reload your File.";
        endif;
        echo $res_message;
    }   
?>

Bootstrap Modal

Simple CSS and Dynemic Bootstrap model HTML form model simple copy and paste this source code to Like main Page index.php file.

Also Read :   Angularjs Input Tags List autocomplete textbox - ngTagsInput

<form  method="post" ng-submit="StudentInsertUpdate(student_frm);" id="cat_form">
  <div class="modal-body with-padding">
    <div class="form-group">
      <div class="row">
        <div class="col-sm-12">
          <label>Student Name :</label>
           <input type="text" name="name" ng-model="student_frm.name" 
                id="name" required="required" class="live24u form-control">
        </div>
      </div>
    </div>            
    <div class="live24u form-group">
      <div class="row">
        <div class="col-sm-12">
          <label>Email :</label>
           <input type="email" name="email" ng-model="student_frm.email" 
                id="email" required="required"  class="live24u form-control email">
        </div>
      </div>
    </div>
    <div class="live24u form-group">
      <div class="live24u row">
        <div class="live24u col-sm-12">
          <label>Student education :</label>
           <input type="text" name="education" ng-model="student_frm.education" 
                id="education" required="required"  class="live24u form-control">
        </div>
      </div>
    </div>
      <div class="live24u row">
        <div class="live24u col-sm-12">
          <label>Age :</label>
           <input type="date" placeholder="yyyy-MM-dd" id="age" 
                    max="<?php echo date('Y-m-d'); ?>" ng-model="student_frm.age" 
            class="live24u form-control" required="required"  name="age">
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
      <button type="submit" name="form_data" class="btn btn-success">Submit</button>
    </div>
</form>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is Angular Js applications – Insert, Fetch , Edit – update , Delete Operations And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.