10-Apr-2023
.
Admin
hii guys,
In this example,I will show you how to do angularjs crud in laravel 6 application.
we will use angularjs to perform CRUD(Create, Read, Update, Delete) easily in laravel 6 application.
Here we will make simple crud example of item module.if you are fresher in angularjs than you dont need to worry about this because i will present as simple as possible.
Follow below step to perform CRUD using angularjs in your laravel 6 application:
Install Laravel 6
you will create laravel 6 fresh application.
composer create-project --prefer-dist laravel/laravel AngularJsCrud
Create Item Table
In this step we will create migration for item table.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateItemTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('item', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->string('quantity');
$table->string('price');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('item');
}
}
Create Controller
Run below command in terminal to make item controller :
php artisan make:controller API/ItemController --api
app/controller/API/ItemController.php
Now update ItemController like as below :
<?php
namespace App\Http\Controllers\API;
use App\Item;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Validator;
use Illuminate\Database\Eloquent\ModelNotFoundException;
class ItemController extends Controller
{
public function index()
{
return response()->json([
'error' => false,
'items' => Item::all(),
], 200);
}
public function store(Request $request)
{
$validation = Validator::make($request->all(),[
'name' => 'required',
'quantity' => 'required',
'price' => 'required',
]);
if($validation->fails()){
return response()->json([
'error' => true,
'messages' => $validation->errors(),
], 200);
}
else
{
$item = new Item;
$item->name = $request->input('name');
$item->quantity = $request->input('quantity');
$item->price = $request->input('price');
$item->save();
return response()->json([
'error' => false,
'item' => $item,
], 200);
}
}
public function show($id)
{
$item = Item::find($id);
if(is_null($item)){
return response()->json([
'error' => true,
'message' => "Record with id # $id not found",
], 404);
}
return response()->json([
'error' => false,
'item' => $item,
], 200);
}
public function update(Request $request, $id)
{
$validation = Validator::make($request->all(),[
'name' => 'required',
'quantity' => 'required',
'price' => 'required',
]);
if($validation->fails()){
return response()->json([
'error' => true,
'messages' => $validation->errors(),
], 200);
}
else
{
$item = Item::find($id);
$item->name = $request->input('name');
$item->quantity = $request->input('quantity');
$item->price = $request->input('price');
$item->save();
return response()->json([
'error' => false,
'item' => $item,
], 200);
}
}
public function destroy($id)
{
$item = Item::find($id);
if(is_null($item)){
return response()->json([
'error' => true,
'message' => "Record with id # $id not found",
], 404);
}
$item->delete();
return response()->json([
'error' => false,
'message' => "Item record successfully deleted id # $id",
], 200);
}
}
Create a Model
php artisan make:model Item
app/item.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Item extends Model
{
protected $table = 'item';
protected $fillable = [
'name', 'quantity', 'price'
];
}
routes/api.php
Route::group(['prefix' => 'api/v1','namespace' => 'API'], function(){
Route::apiResource('items', 'ItemController');
});
/public/app/app.js
Create app.js file and put below code :
var app = angular.module('itemRecords', [])
.constant('API_URL', 'http://localhost:8000/api/v1/');
/public/app/controllers/items.js
Create items.js file and put below code :
app.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
app.controller('itemsController', function ($scope, $http, API_URL) {
//fetch items listing from
$http({
method: 'GET',
url: API_URL + "items"
}).then(function (response) {
$scope.items = response.data.items;
console.log(response);
}, function (error) {
console.log(error);
alert('This is embarassing. An error has occurred. Please check the log for details');
});
//show modal form
$scope.toggle = function (modalstate, id) {
$scope.modalstate = modalstate;
$scope.item = null;
switch (modalstate) {
case 'add':
$scope.form_title = "Add New Item";
break;
case 'edit':
$scope.form_title = "Item Detail";
$scope.id = id;
$http.get(API_URL + 'items/' + id)
.then(function (response) {
console.log(response);
$scope.item = response.data.item;
});
break;
default:
break;
}
console.log(id);
$('#myModal').modal('show');
}
//save new record and update existing record
$scope.save = function (modalstate, id) {
var url = API_URL + "items";
var method = "POST";
//append item id to the URL if the form is in edit mode
if (modalstate === 'edit') {
url += "/" + id;
method = "PUT";
}
$http({
method: method,
url: url,
data: $.param($scope.item),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function (response) {
console.log(response);
location.reload();
}), (function (error) {
console.log(error);
alert('This is embarassing. An error has occurred. Please check the log for details');
});
}
//delete record
$scope.confirmDelete = function (id) {
var isConfirmDelete = confirm('Are you sure you want this record?');
if (isConfirmDelete) {
$http({
method: 'DELETE',
url: API_URL + 'items/' + id
}).then(function (response) {
console.log(response);
location.reload();
}, function (error) {
console.log(error);
alert('Unable to delete');
});
} else {
return false;
}
}
});
index.blade.php
create index.blade.php and put below code :
<!doctype html>
<html lang="en" ng-app="itemRecords">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Laravel 6 Crud application Angular JS Tutorial</title>
</head>
<body>
<div class="container" ng-controller="itemsController">
<header>
<h2>items Database</h2>
</header>
<div>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
<th><button id="btn-add" class="btn btn-primary
btn-xs"
ng-click="toggle('add', 0)">Add New item</button></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>[[ item.id ]]</td>
<td>[[ item.name ]]</td>
<td>[[ item.quantity ]]</td>
<td>[[ item.price ]]</td>
<td>
<button class="btn btn-default btn-xs
btn-detail"
ng-click="toggle('edit', item.id)">Edit</button>
<button class="btn btn-danger btn-xs btn-delete"
ng-click="confirmDelete(item.id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1"
role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">[[ form_title ]]</h5>
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form name="frmitems" class="form-horizontal"
novalidate="">
<div class="form-group error">
<label for="inputEmail3" class="col-sm-12
control-label">Name</label>
<div class="col-sm-12">
<input type="text" class="form-control
has-error" id="name" name="name"
placeholder="Name"
value="[[ name ]]"
ng-model="item.name"
ng-required="true">
<span class="help-inline"
ng-show="frmitems.name.$invalid
&& frmitems.name.$touched">Name
field is required</span>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-12
control-label">Quantity</label>
<div class="col-sm-12">
<input type="text" class="form-control"
id="quantity" name="Quantity"
placeholder="quantity"
value="[[ quantity ]]"
ng-model="item.quantity"
ng-required="true">
<span class="help-inline"
ng-show="frmitems.quantity.$invalid
&& frmitems.quantity.$touched">Quantity field is required</span>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-12
control-label">Price</label>
<div class="col-sm-12">
<input type="text" class="form-control"
id="price"
name="price"
placeholder="Price"
value="[[ price ]]"
ng-model="item.price"
ng-required="true">
<span class="help-inline"
ng-show="frmitems.price.$invalid
&&
frmitems.price.$touched">Price field is required</span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary"
id="btn-save" ng-click="save(modalstate, id)"
ng-disabled="frmitems.$invalid">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) -->
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-animate.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.min.js"></script>
<!-- AngularJS Application Scripts -->
<script src="<?= asset('app/app.js') ?>"></script>
<script src="<?= asset('app/controllers/items.js') ?>"></script>
</body>
</html>
routes/web.php
In web.php file change welcome to index like this :
Route::get('/', function () {
return view('index');
});
It will help you....
#Laravel
#Laravel 6
