Laravel 5.2 and AngularJS CRUD with Search and Pagination Example.

Admin   PHP   16  2020-08-03 15:36:18

Now i show you how to create CRUD(Create, Read, Update, Delete) using AngularJS and Laravel 5. In Following step by step you can create web application of create, edit, delete, lists, search with pagination of items modules. In this post through you can make simple crud, search and pagination module and easily use in your laravel project. I am going to show preview of items module that we will do using angularJS and Laravel 5.2.

Preview

Step 1: Create items table and module

In First step we have to create migration for items table using Laravel 5 php artisan command, so first fire bellow command:

php artisan make:migration create_items_table

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create items table.

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateItemsTable extends Migration

{

public function up()

{

Schema::create('items', function (Blueprint $table) {

$table->increments('id');

$table->string('title');

$table->text('description');

$table->timestamps();

});

}

public function down()

{

Schema::drop("items");

}

}

After craete "items" table you should craete Item model for items, so first create file in this path app/Item.php and put bellow content in item.php file:

app/Item.php

namespace App;

use Illuminate\Database\Eloquent\Model;

use DB;

class Item extends Model

{

public $fillable = ['title','description'];

}

Step 2: Create controller

Ok, now we should create new controller as ItemController in this path app/Http/Controllers/ItemController.php. this controller will manage all lists, create, edit, delete ,search and pagination request and return json response, so put bellow content in controller file:

app/Http/Controllers/ItemController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use App\Item;

class ItemController extends Controller

{

public function index(Request $request)

{

$input = $request->all();

if($request->get('search')){

$items = Item::where("title", "LIKE", "%{$request->get('search')}%")

->paginate(5);

}else{

$items = Item::paginate(5);

}

return response($items);

}

public function store(Request $request)

{

$input = $request->all();

$create = Item::create($input);

return response($create);

}

public function edit($id)

{

$item = Item::find($id);

return response($item);

}

public function update(Request $request,$id)

{

$input = $request->all();

Item::where("id",$id)->update($input);

$item = Item::find($id);

return response($item);

}

public function destroy($id)

{

return Item::where('id',$id)->delete();

}

}

Ok, at last you have create another one folder call "services" and create file myServices.js(public/app/services/myServices.js).

myServices.js

app.factory('dataFactory', function($http) {

var myService = {

httpRequest: function(url,method,params,dataPost,upload) {

var passParameters = {};

passParameters.url = url;

if (typeof method == 'undefined'){

passParameters.method = 'GET';

}else{

passParameters.method = method;

}

if (typeof params != 'undefined'){

passParameters.params = params;

}

if (typeof dataPost != 'undefined'){

passParameters.data = dataPost;

}

if (typeof upload != 'undefined'){

passParameters.upload = upload;

}

var promise = $http(passParameters).then(function (response) {

if(typeof response.data == 'string' && response.data != 1){

if(response.data.substr('loginMark')){

location.reload();

return;

}

$.gritter.add({

title: 'Application',

text: response.data

});

return false;

}

if(response.data.jsMessage){

$.gritter.add({

title: response.data.jsTitle,

text: response.data.jsMessage

});

}

return response.data;

},function(){

$.gritter.add({

title: 'Application',

text: 'An error occured while processing your request.'

});

});

return promise;

}

};

return myService;

});

Step 5: Create View

This is a last step and you have to create first app.blade.php file for theme setting, so let's create app.blade.php(resources/views/app.blade.php) and put following code :

app.blade.php

<html lang="en">

<head>

<title>Laravel 5.2</title>

<!-- Fonts -->

<link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

<!-- Angular JS -->

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.min.js"></script>

<!-- MY App -->

<script src="{{ asset('/app/packages/dirPagination.js') }}"></script>

<script src="{{ asset('/app/routes.js') }}"></script>

<script src="{{ asset('/app/services/myServices.js') }}"></script>

<script src="{{ asset('/app/helper/myHelper.js') }}"></script>

<!-- App Controller -->

<script src="{{ asset('/app/controllers/ItemController.js') }}"></script>

</head>

<body ng-app="main-App">

<nav class="navbar navbar-default">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle Navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">Laravel 5.2</a>

</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li><a href="#/">Home</a></li>

<li><a href="#/items">Item</a></li>

</ul>

</div>

</div>

</nav>

<div class="container">

<ng-view></ng-view>

</div>

</body>

</html>

Ok, now we need to create templates folder in views folder and need to add three html file, i am going to create that so give name properly and add that.

1.resources/views/templates/home.html

<h2>Welcome to Dashboard</h2>

2.resources/views/templates/items.html

<div class="row">

<div class="col-lg-12 margin-tb">

<div class="pull-left">

<h1>Item Management</h1>

</div>

<div class="pull-right" style="padding-top:30px">

<div class="box-tools" style="display:inline-table">

<div class="input-group">

<input type="text" class="form-control input-sm ng-valid ng-dirty" placeholder="Search" ng-change="searchDB()" ng-model="searchText" name="table_search" title="" tooltip="" data-original-title="Min character length is 3">

<span class="input-group-addon">Search</span>

</div>

</div>

<button class="btn btn-success" data-toggle="modal" data-target="#create-user">Create New</button>

</div>

</div>

</div>

<table class="table table-bordered pagin-table">

<thead>

<tr>

<th>No</th>

<th>Title</th>

<th>Description</th>

<th width="220px">Action</th>

</tr>

</thead>

<tbody>

<tr dir-paginate="value in data | itemsPerPage:5" total-items="totalItems">

<td>{{ $index + 1 }}</td>

<td>{{ value.title }}</td>

<td>{{ value.description }}</td>

<td>

<button data-toggle="modal" ng-click="edit(value.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>

<button ng-click="remove(value,$index)" class="btn btn-danger">Delete</button>

</td>

</tr>

</tbody>

</table>

<dir-pagination-controls class="pull-right" on-page-change="pageChanged(newPageNumber)" template-url="templates/dirPagination.html" ></dir-pagination-controls>

<!-- Create Modal -->

<div class="modal fade" id="create-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

<div class="modal-dialog" role="document">

<div class="modal-content">

<form method="POST" name="addItem" role="form" ng-submit="saveAdd()">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

<h4 class="modal-title" id="myModalLabel">Create Item</h4>

</div>

<div class="modal-body">

<div class="container">

<div class="row">

<div class="col-xs-12 col-sm-6 col-md-6">

<strong>Title : </strong>

<div class="form-group">

<input ng-model="form.title" type="text" placeholder="Name" name="title" class="form-control" required />

</div>

</div>

<div class="col-xs-12 col-sm-6 col-md-6">

<strong>Description : </strong>

<div class="form-group" >

<textarea ng-model="form.description" class="form-control" required>

</textarea>

</div>

</div>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="submit" ng-disabled="addItem.$invalid" class="btn btn-primary">Submit</button>

</div>

</div>

</form>

</div>

</div>

</div>

</div>

<!-- Edit Modal -->

<div class="modal fade" id="edit-data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

<div class="modal-dialog" role="document">

<div class="modal-content">

<form method="POST" name="editItem" role="form" ng-submit="saveEdit()">

<input ng-model="form.id" type="hidden" placeholder="Name" name="name" class="form-control" />

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

<h4 class="modal-title" id="myModalLabel">Edit Item</h4>

</div>

<div class="modal-body">

<div class="container">

<div class="row">

<div class="col-xs-12 col-sm-6 col-md-6">

<div class="form-group">

<input ng-model="form.title" type="text" placeholder="Name" name="title" class="form-control" required />

</div>

</div>

<div class="col-xs-12 col-sm-6 col-md-6">

<div class="form-group">

<textarea ng-model="form.description" class="form-control" required>

</textarea>

</div>

</div>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="submit" ng-disabled="editItem.$invalid" class="btn btn-primary create-crud">Submit</button>

</div>

</div>

</form>

</div>

</div>

</div>

</div>

3.resources/views/templates/dirPagination.html