CRUD in AngularJS With PHP

                  Hi. Already we created a posts for Perfect Validation & Speech Recognition If you missed that check it .  

                             Here, we are going to see the CRUD operations in AngularJS with PHP. Normally we know that operations in PHP. That contains more code and it loads the whole page for the every single process. In the OOP concept by using MVC pattern we can do this oprations in back-end. In the AngularJS we can use the MVC pattern in front-end itself. 

                By using AngularJS we can create this CRUD operations in a single page and it will be more efficient than a normal backend process. In this process we are using Model(Business Logic or DB Queries) only in PHP. 

               In AngularJs we can use the controllers to pass the data to PHP. so we are having the advantage of reusability .

Here am attached the source code for your convenience. 

Preview: 

Download Here : Click me

Let's go to the coding part :

1.Html Code 

<h1>Insert Update Delete</h1>

<div ng-controller="Register">

<form >

  <div class="form-group">

    <label for="exampleInputEmail1">Email address</label>

    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"name="Email" ng-model="Email"  ng-disabled="obj.idisable"  >

  </div>

  <div class="form-group">

    <label for="exampleInputPassword1">Password</label>

    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Password" name="password" ng-model="password" >

  </div>

  <button type="submit" value="{{btnName}}" class="btn btn-default" ng-click="insert_data()">{{btnName}}</button>

</form>

<table  class="table table-condensed">

    <thead>

      <tr>

        <th>s_id</th>

        <th>Email</th>

        <th>Password</th>

      </tr>

    </thead>

    <tbody>

      <tr ng-repeat="Detail in Details" >

      <td>{{Detail.s_id}} </td>

        <td>{{Detail.Email}}</td>

        <td>{{Detail.password}}</td>

        <td><button type="button"  class="btn btn-danger" ng-click="delete_data(Detail.s_id);" >Delete</button></td>

         <td><button type="button"  class="btn btn-danger" ng-click="edit_data(Detail.s_id,Detail.Email,Detail.password);" >Edit</button></td>

      </tr>

      

    </tbody>

  </table>

</div>

Download Here : Click me

2.Controllers

//Insert Controller

$scope.insert_data=function(){

$http.post("Server/insert.php",{'Email':$scope.Email,'password':$scope.password,'btnName':$scope.btnName})

.success(function(){

$scope.msg="Data Inserted";

$scope.display_data();

})

}

//Delete Controller

$scope.delete_data=function(s_id){

$http.post("Server/delete.php",{'s_id':s_id})

.success(function(){

$scope.msg="Data Deleted";

$scope.display_data();

})

}

//Update Controller

$scope.obj={'idisable':false};

$scope.btnName="Insert";

$scope.edit_data=function(s_id,Email,password){

$scope.s_id=s_id;

$scope.Email=Email;

$scope.password=password;

$scope.btnName="Update";

$scope.obj.idisable=true;

$scope.display_data();

}

//Display Controller

$scope.display_data=function(){

$http.get("Server/fetch_data.php").success(function(response){

$scope.Details=response;

});

}

Download Here : Click me

3. PHP File:

Connection for DB :

<?php

mysql_connect("localhost","root","123");

mysql_select_db("rajkumar");

?>

Insert.PHP

<?php

include("connection.php");

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

$btnName=mysql_real_escape_string($data->btnName);

if($btnName=='Insert'){

$Email=mysql_real_escape_string($data->Email);

$password=mysql_real_escape_string($data->password);

mysql_query("INSERT INTO register(`Email`, `password`)VALUES('".$Email."','".$password."')");

}

else{

$Email=mysql_real_escape_string($data->Email);

$password=mysql_real_escape_string($data->password);

mysql_query("UPDATE register SET password='".$password."' WHERE   Email='".$Email."'"); 

}

?>

Delete.PHP

<?php

include("connection.php");

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

$s_id=$data->s_id;

mysql_query("DELETE FROM register WHERE s_id='".$s_id."' ");

?>

Fetch.php

<?php

include('connection.php');

$sql=mysql_query("SELECT s_id,Email,password FROM register");

if(mysql_num_rows($sql)){

$data=array();

while($row=mysql_fetch_array($sql)){

$data[]=array(

's_id'=>$row['s_id'],

'Email'=>$row['Email'],

'password'=>$row['password']

);

}

header('Content-type: application/json');

echo json_encode($data);

}

?>

Download Here : Click me

4.Database File:

Rajkumar.SQL

-- phpMyAdmin SQL Dump
-- version 4.2.11
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Jul 28, 2016 at 10:13 PM
-- Server version: 5.6.21
-- PHP Version: 5.6.3

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `rajkumar`
--

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

--
-- Table structure for table `register`
--

CREATE TABLE IF NOT EXISTS `register` (
`s_id` int(11) NOT NULL,
  `Username` varchar(200) NOT NULL,
  `Email` varchar(200) NOT NULL,
  `password` varchar(300) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `register`
--
ALTER TABLE `register`
 ADD PRIMARY KEY (`s_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `register`
--
ALTER TABLE `register`
MODIFY `s_id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=15;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;


Download Here : Click me

   These type of code is lightweight than normal PHP code. It contains very less(370KB) In size. 

Thank you..! Have a nice Day..!