Laravel 5.3 and AngularJS CRUD – Search and Pagination.

It is time to create a 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.3.

 

Preview

laravel-angular

 

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:

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 pathapp/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();
    }
}

Step 3: Route file

In this step you have to add some route in your route file. so first we will add resource route for items module and another one for templates route. this templates route through we will get html template for our application, so put the bellow content in route file:

routes/web.php

Route::get('/', function () {
    return view('app');
});
Route::group(['middleware' => ['web']], function () {
    Route::resource('items', 'ItemController');
});
// Templates
Route::group(array('prefix'=>'/templates/'),function(){
    Route::get('{template}', array( function($template)
    {
        $template = str_replace(".html","",$template);
        View::addExtension('html','php');
        return View::make('templates.'.$template);
    }));
});

Step 4: use AngularJS

Now we will manage AngularJS route and controller, so first cretae “app” directory in your public folder(public/app) and create route.js(public/app/route.js) file for write all angular js. and put the bellow code in that file.

route.js

var app =  angular.module('main-App',['ngRoute','angularUtils.directives.dirPagination']);
app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'templates/home.html',
                controller: 'AdminController'
            }).
            when('/items', {
                templateUrl: 'templates/items.html',
                controller: 'ItemController'
            });
}]);

now we have to create one folder in your app folder “controllers” and create one file “ItemController.js”(public/app/controllers/ItemController.js) file in that folder.

ItemController.js

app.controller('AdminController', function($scope,$http){
  $scope.pools = [];
});
app.controller('ItemController', function(dataFactory,$scope,$http){
  $scope.data = [];
  $scope.libraryTemp = {};
  $scope.totalItemsTemp = {};
  $scope.totalItems = 0;
  $scope.pageChanged = function(newPage) {
    getResultsPage(newPage);
  };
  getResultsPage(1);
  function getResultsPage(pageNumber) {
      if(! $.isEmptyObject($scope.libraryTemp)){
          dataFactory.httpRequest('/items?search='+$scope.searchText+'&page='+pageNumber).then(function(data) {
            $scope.data = data.data;
            $scope.totalItems = data.total;
          });
      }else{
        dataFactory.httpRequest('/items?page='+pageNumber).then(function(data) {
          $scope.data = data.data;
          $scope.totalItems = data.total;
        });
      }
  }
  $scope.searchDB = function(){
      if($scope.searchText.length >= 3){
          if($.isEmptyObject($scope.libraryTemp)){
              $scope.libraryTemp = $scope.data;
              $scope.totalItemsTemp = $scope.totalItems;
              $scope.data = {};
          }
          getResultsPage(1);
      }else{
          if(! $.isEmptyObject($scope.libraryTemp)){
              $scope.data = $scope.libraryTemp ;
              $scope.totalItems = $scope.totalItemsTemp;
              $scope.libraryTemp = {};
          }
      }
  }
  $scope.saveAdd = function(){
    dataFactory.httpRequest('items','POST',{},$scope.form).then(function(data) {
      $scope.data.push(data);
      $(".modal").modal("hide");
    });
  }
  $scope.edit = function(id){
    dataFactory.httpRequest('items/'+id+'/edit').then(function(data) {
    	console.log(data);
      	$scope.form = data;
    });
  }
  $scope.saveEdit = function(){
    dataFactory.httpRequest('items/'+$scope.form.id,'PUT',{},$scope.form).then(function(data) {
      	$(".modal").modal("hide");
        $scope.data = apiModifyTable($scope.data,data.id,data);
    });
  }
  $scope.remove = function(item,index){
    var result = confirm("Are you sure delete this item?");
   	if (result) {
      dataFactory.httpRequest('items/'+item.id,'DELETE').then(function(data) {
          $scope.data.splice(index,1);
      });
    }
  }
});

we have to create another folder “helper” in app directory for myHelper.js(public/app/helper/myHelper.js)file because that file will help to define helper function.

myHelper.js

 

function apiModifyTable(originalData,id,response){
    angular.forEach(originalData, function (item,key) {
        if(item.id == id){
            originalData[key] = response;
        }
    });
    return originalData;
}

create one another folder “packages” and create file dirPagination.js(public/app/packages/dirPagination.js) and put code of following link:

dirPagination.js

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

Get File.

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

Get File

3.resources/views/templates/dirPagination.html

Get File.

 

Step 6: File .env must be correctly setup

The data from database should be correctly set.

 

Step 6: Lauch Migration

We now need to load data into the database. Data & tables.

php artisan migrate
0 réponses

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire