I am trying to run the MySql Queries in Laravel framework using ANGULARJS but unable to delete the database record through the button. This code is inserting the data into the database, getting the data into the JSON file and Displaying the data row wise from JSON file. Now I am trying to delete the data from database with the corresponding delete button ad would like to update the existing data via update button.
Here is my view page
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h2>Registration</h2><br/>
<table border=1>
<tr><td>Name:</td><td><input type="text" ng-model="nam" name="nam"><br/></td></tr>
<tr><td>Email:</td><td><input type="email" ng-model="email" name="email"><br/></td></tr>
<tr><td>Password:</td><td><input type="password" ng-model="password" name="password"><br/></td></tr>
<tr><td>City:</td><td><input type="text" ng-model="city" name="city"><br/></td></tr>
<tr><td><button ng-click="addFunc()" type="submit">Submit</button></td></tr>
</table>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.addFunc = function() {
$http({
method : 'POST',
url : 'http://localhost/crud/public/registration_data_page',
data : {nam:$scope.nam,email:$scope.email,password:$scope.password,city:$scope.city}
}).then(function successCallback(response) {
console.log('successCallback');
console.log(response);
}, function errorCallback(response) {
console.log('errorCallback');
console.log(response);
});
}
$http({method:'GET', url:'http://localhost/crud/public/registration_json_page'}).success(function(response){
$scope.query = response;
});
});
</script>
<table style="width:100%" border=1>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Password</th>
<th>City</th>
<th>Delete</th>
</tr>
<tr ng-repeat="x in query">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.email}}</td>
<td>{{x.password}}</td>
<td>{{x.city}}</td><br/>
<td><input type="submit" name="delet" value="Delete"></td>
</tr>
</body>
</html>
Here is ,my controller.
<?php
namespace App\Http\Controllers;
use App\Http\Requests;
use Illuminate\Http\Request;
use DB;
use Session;
use Redirect;
class NewController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('auth');
}
public function registration_data_function(Request $request)
{
echo $nam_value = $request->nam;
echo $email_value = $request->email;
echo $password_value = $request->password;
echo $city_value = $request->city;
$reg = DB::table('angular_registration')->insert(['name' => $nam_value, 'email' => $email_value, 'password'=>$password_value, 'city'=>$city_value]);
}
public function registration_json_function(Request $request)
{
$query = DB::select('select * from angular_registration');
return response($query);
}
public function registration_function(Request $request)
{
$query = DB::select('select * from angular_registration');
return view('registration');
}
}
Here is my Route page
Route::get('/registration', 'NewController@registration_function');
Route::post('/registration_data_page', 'NewController@registration_data_function');
Route::get('/registration_json_page', 'NewController@registration_json_function');
Just the same way you have addFunction , create a removeFunction(id) function in angular JS , create the corresponding controller method and the route
<?php
//in your route
Route::get('/delete/{id}', 'NewController@delete')
->where('id'=>'[0-9]+');
//in your controller
public function delete($id)
{
//please use your models to delete no raw db queries for security
//prevent sql injection
Model::find($id)->delete()
return Response::json(['status'=>'deleted'])
}in angular
$scope.removeFunction=function(id){
//call your delete route with the parameters
ajax.get('/delete/'+id)
}in your template use
<td><input type="button" ng-click={{removeFunction(x.id) }} name="delet" value="Delete"></td>Sorry the delete method in php wont work as delete is already a key work so please change to deleteAngular or any other name update the route along the way
</div>