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..!

Speech Recognition Module

          Hi Friends. Till now, We saw the various type of validation in the previous posts. Here comes the most interesting part that you will enjoy for sure. That's the speech recognition that works on any languages has, no dependencies and its just 2KB in size.


                               Its a simple small java script library that lets your users can control your site with their voice commands,
It works perfect on all updated browsers that support speech recognition.  Now let's try something for real, Here we will see how to create a ToDoList App step by step,

Get a Download link : Click

Step1:

                 It runs only on the server. so you have to install the server on your system.

Npm users:    npm install http-server -g

Alternative : It works on servers like XAMPP & WAMP Etc.

Step2:

You have to enable the pop-ups

//Click to Access your microphone

//Click to allow

Get a Download link : Click

Let's go to the coding part :

1.Install AngularJS And  annyang JS

          For NPM users,
                1. npm install angularjs -g
                2. npm install annyang -g

      others,

          1. Angularjs
           2. Annyang 

2.Add Library Files

<script type="text/javascript" src="Lib/angular.min.js"></script>

<script type="text/javascript" src="Lib/annyang.min.js"></script>

        
3.Body

<div  ng-controller="ToDoController">

<form name="frm" ng-submit="addTodo()">
  <div class="form-group">
   <label for="exampleInputNewItem">Say NewItem</label>

    <input type="text" class="form-control" id="exampleInputEmail1"  ng-model="newTodo" name="newtodo" >

  </div>

<button ng-disabled="frm.$invalid" class="btn btn-success">Go</button>


</form>
<br>

<button ng-click="clearselected()"  class="btn btn-danger">     Clear selected 
</button>

<ul>
<li ng-repeat="todo in todos">

<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done':todo.done }">
{{$index+1}}  {{todo.title}}
</span>
</li>
</ul>

</div>

4.Javascript File



<var myApp=angular.module("myApp",[]);

//Creating a TODo

myApp.controller('ToDoController',['$scope',function($scope){

$scope.todos=[

{ 'title':'This is rajkumar',

 'done' :false

}

];

$scope.addTodo=function(){

$scope.todos.push(

{

'title':$scope.newTodo,

'done':false

});

$scope.done="";

};

$scope.clearselected=function(){

$scope.todos=$scope.todos.filter(function(item){

return !item.done

})

};

//Voice command 

var commands={

'new item *val' : function(val){

$scope.newTodo=val;

$scope.addTodo();

$scope.$apply();

},

'check number *val' :function(val){

$scope.todos[parseInt(val)-1].done=true;

$scope.$apply();

},

'remove number *val':function(val){

$scope.todos.splice(parseInt(val)-1,1)

$scope.$apply();

},

'clear Selected':function(){

$scope.clearselected();

$scope.$apply();

},

}

annyang.addCommands(commands);

annyang.debug();

annyang.start();

}]);

                     By using this script, you can navigate through any other pages by the voice commands easily. Also you can control the various functionalities.  

Get a Download link : Click

 How it works?

1.say New Item "Anything"  It will be any word that gives some meaning.

2. say Check Number 'any number that are in the list' 

3. say Remove Number 'any number that are in the list'

4. say check number 'any number that are in the list' &  say Clear Selected to delete the selected iteams.

 

Get a Download link : Click

Thank You..! Have a nice Day