Laravel PHP Framework and AngularJS Search and Pagination with CRUD Example

Laravel PHP Framework and AngularJS Search and Pagination with CRUD Example
Posted 8 years ago By Ajay Gupta 105471
Share

Search and Pagination with CRUD  Example in Laravel PHP Framework and AngularJS 

In my previous post, you learn how you can create a simple CRUD(Create Read Update Delete) application with Laravel 5.2 , i hope after following steps you will create your first admin panel.

Now I will tell you that how to create application with search , pagination and CRUD in Laravel 5.2 and AngularJS, kindly follow each step to create your first web application having modules with create, edit, delete, list, search and pagination functionality. Using AngularJS it is much more easier to work with events and workin with Laravel AngularJs then it make your application awesome. You must have knowledge about basic AngularJS before goint to create CRUD Application in Laravel AngularJS.

Step 1: Create Product Table and Module

In First step, create migration file for product table using Laravel 5 php artisan command.Run following command :

php artisan make:migration create_products_table

After this command, you will see a migration file in following path database/migrations and you have to simply put following code in migration file to create products table.


  1. use Illuminate\Database\Schema\Blueprint;
  2. use Illuminate\Database\Migrations\Migration;
  3. class CreateProductsTable extends Migration
  4. {
  5.     public function up()
  6.     {
  7.         Schema::create('products', function (Blueprint $table) {
  8.             $table->increments('id');
  9.             $table->string('name');
  10.             $table->text('details');
  11.             $table->timestamps();
  12.         });
  13.     }
  14.     public function down()
  15.     {
  16.         Schema::drop("products");
  17.     }
  18. }

Save this migration file and run following command

php artisan migrate

After create `products` table, yor should create model for product table.Create file in following path app/Product.php and put bellow couple of code in Product.php file:

app/Product.php

  1. namespace App;
  2. use Illuminate\Database\Eloquent\Model;
  3. class Product extends Model
  4. {
  5.     public $fillable = ['name','details'];
  6. }
Step2: Create Product Controller

Now we will create ProductController.php in following path app/Http/Controllers, all request(lists, create, edit, delete ,search and pagination) will manage by this ProductCRUDController.php file.

app/Http/Controllers/ProductController.php

  1. namespace App\Http\Controllers;
  3. use Illuminate\Http\Request;
  5. use App\Http\Requests;
  6. use App\Http\Controllers\Controller;
  7. use App\Product;
  9. class ProductController extends Controller
  10. {
  12.     /**
  13.      * Display a listing of the resource.
  14.      *
  15.      * @return Response
  16.      */
  17.     public function index(Request $request)
  18.     {
  19.       
  20.         $input = $request->all();
  21.         $products=Product::query();
  22.         if($request->get('search')){
  23.             $products = $products->where("name", "LIKE", "%{$request->get('search')}%");
  24.         }
  25.           $products = $products->paginate(5);
  26.         
  27.         return response($products);
  28.     }
  30.     /**
  31.      * Store a newly created resource in storage.
  32.      *
  33.      * @return Response
  34.      */
  35.     public function store(Request $request)
  36.     {
  37.         $input = $request->all();
  38.         $create = Product::create($input);
  39.         return response($create);
  40.     }
  42.     /**
  43.      * Show the form for editing the specified resource.
  44.      *
  45.      * @param  int  $id
  46.      * @return Response
  47.      */
  48.     public function edit($id)
  49.     {
  50.         $product = Product::find($id);
  51.         return response($product);
  52.     }
  54.     /**
  55.      * Update the specified resource in storage.
  56.      *
  57.      * @param  int  $id
  58.      * @return Response
  59.      */
  60.     public function update(Request $request,$id)
  61.     {
  62.         $input = $request->all();
  64.         $product=Product::find($id);
  65.         $product->update($input);
  66.         $product=Product::find($id);
  67.         return response($product);
  68.     }
  70.     /**
  71.      * Remove the specified resource from storage.
  72.      *
  73.      * @param  int  $id
  74.      * @return Response
  75.      */
  76.     public function destroy($id)
  77.     {
  78.         return Product::where('id',$id)->delete();
  79.     }
  80. }
Step3: Route File

Now we will add some route in routes.php. First add resource route for products module and another route for template route. using template route we will get html template for our app. So let's add below content in route file :

app/Http/routes.php

  1. <?php
  3. /*
  4. |--------------------------------------------------------------------------
  5. | Routes File
  6. |--------------------------------------------------------------------------
  7. |
  8. | Here is where you will register all of the routes in an application.
  9. | It's a breeze. Simply tell Laravel the URIs it should respond to
  10. | and give it the controller to call when that URI is requested.
  11. |
  12. */
  14. Route::get('/', function () {
  15.     return view('app');
  16. });
  18. /*
  19. |--------------------------------------------------------------------------
  20. | Application Routes
  21. |--------------------------------------------------------------------------
  22. |
  23. | This route group applies the "web" middleware group to every route
  24. | it contains. The "web" middleware group is defined in your HTTP
  25. | kernel and includes session state, CSRF protection, and more.
  26. |
  27. */
  29. Route::group(['middleware' => ['web']], function () {
  30.     Route::resource('products', 'ProductController');
  31. });
  33. // Angular HTML Templates
  34. Route::group(array('prefix'=>'/htmltemplates/'),function(){
  35.     Route::get('{htmltemplates}', array( function($htmltemplates)
  36.     {
  37.         $htmltemplates = str_replace(".html","",$htmltemplates);
  38.         View::addExtension('html','php');
  39.         return View::make('htmltemplates.'.$htmltemplates);
  40.     }));
  41. });
Step4: Manage AngularJS route and controller

First we will create a separate directory with name `app` in public directory public/app where we will put all angularjs files so that it will be easier to manage files

Create route.js file in following path public/app/route.js

route.js

  1. var app =  angular.module('main-App',['ngRoute','angularUtils.directives.dirPagination']);
  3. app.config(['$routeProvider',
  4.     function($routeProvider) {
  5.         $routeProvider.
  6.             when('/', {
  7.                 templateUrl: 'htmltemplates/home.html',
  8.                 controller: 'AdminController'
  9.             }).
  10.             when('/products', {
  11.                 templateUrl: 'htmltemplates/products.html',
  12.                 controller: 'ProductController'
  13.             });
  14. }]);
  16. app.value('apiUrl', 'public path url');

app.value define global variable which will be injected in controller where we use this variable

Now we will create a controller directory in app directory with name `controllers` and create ProductController.js file in following path public/app/controllers/ProductController.js

ProductController.js

  1. app.controller('AdminController', function($scope,$http){
  2.  
  3.   $scope.pools = [];
  4.    
  5. });
  7. app.controller('ProductController', function(dataFactory,$scope,$http,apiUrl){
  8.  
  9.   $scope.data = [];
  10.   $scope.libraryTemp = {};
  11.   $scope.totalProductsTemp = {};
  13.   $scope.totalProducts = 0;
  14.   $scope.pageChanged = function(newPage) {
  15.     getResultsPage(newPage);
  16.   };
  18.   getResultsPage(1);
  19.   function getResultsPage(pageNumber) {
  20.       if(! $.isEmptyObject($scope.libraryTemp)){
  21.           dataFactory.httpRequest(apiUrl+'/products?search='+$scope.searchInputText+'&page='+pageNumber).then(function(data) {
  22.             $scope.data = data.data;
  23.             $scope.totalProducts = data.total;
  24.           });
  25.       }else{
  26.         dataFactory.httpRequest(apiUrl+'/products?page='+pageNumber).then(function(data) {
  27.           console.log(data);
  28.           $scope.data = data.data;
  29.           $scope.totalProducts = data.total;
  30.         });
  31.       }
  32.   }
  34.   $scope.dbSearch = function(){
  35.       if($scope.searchInputText.length >= 3){
  36.           if($.isEmptyObject($scope.libraryTemp)){
  37.               $scope.libraryTemp = $scope.data;
  38.               $scope.totalProductsTemp = $scope.totalProducts;
  39.               $scope.data = {};
  40.           }
  41.           getResultsPage(1);
  42.       }else{
  43.           if(! $.isEmptyObject($scope.libraryTemp)){
  44.               $scope.data = $scope.libraryTemp ;
  45.               $scope.totalProducts = $scope.totalProductsTemp;
  46.               $scope.libraryTemp = {};
  47.           }
  48.       }
  49.   }
  51.   $scope.saveAdd = function(){
  52.     dataFactory.httpRequest('products','POST',{},$scope.form).then(function(data) {
  53.       $scope.data.push(data);
  54.       $(".modal").modal("hide");
  55.     });
  56.   }
  58.   $scope.edit = function(id){
  59.     dataFactory.httpRequest(apiUrl+'/products/'+id+'/edit').then(function(data) {
  60.         console.log(data);
  61.           $scope.form = data;
  62.     });
  63.   }
  65.   $scope.updateProduct = function(){
  66.     dataFactory.httpRequest(apiUrl+'/products/'+$scope.form.id,'PUT',{},$scope.form).then(function(data) {
  67.           $(".modal").modal("hide");
  68.         $scope.data = apiModifyTable($scope.data,data.id,data);
  69.     });
  70.   }
  72.   $scope.remove = function(product,index){
  73.     var result = confirm("Are you sure delete this product?");
  74.        if (result) {
  75.       dataFactory.httpRequest(apiUrl+'/products/'+product.id,'DELETE').then(function(data) {
  76.           $scope.data.splice(index,1);
  77.       });
  78.     }
  79.   }
  80.    
  81. });

Now we will create a folder with name `myhelper` in app directory for helper.js file, which will help to define helper functions.

helper.js

  1. function apiModifyTable(mainData,id,response){
  2.     angular.forEach(mainData, function (product,key) {
  3.         if(product.id == id){
  4.             mainData[key] = response;
  5.         }
  6.     });
  7.     return mainData;
  8. }

Now we will create another directory `packages` and create dirPagination.js file in following path public/app/packages/dirPagination.jsand put code of following link :

dirPagination.js

Now We will create another directory `services` and create services.js file in following path public/app/myservices/services.js and put code of following link :

services.js

Step5: Create View

This is final step, where you have to create view files. So first start to create angularapp.blade.php in following path resources/views/angularapp.blade.php and put following code :

angularapp.blade.php

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Laravel 5.2</title>
  9.     <!-- Fonts -->
  10.     <link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
  12.     
  13.     <link rel="stylesheet" href="http://www.expertphp.in/css/bootstrap.css">
  15.     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  16.     <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
  17.     
  18.     <!-- Angular JS -->
  19.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>  
  20.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.min.js"></script>
  22.     <!-- MY App -->
  23.     <script src="{{ asset('app/packages/dirPagination.js') }}"></script>
  24.     <script src="{{ asset('app/routes.js') }}"></script>
  25.     <script src="{{ asset('app/myservices/services.js') }}"></script>
  26.     <script src="{{ asset('app/myhelper/helper.js') }}"></script>
  28.     <!-- App Controller -->
  29.     <script src="{{ asset('/app/controllers/ProductController.js') }}"></script>
  30.     
  31. </head>
  32. <body ng-app="main-App">
  33.     <nav class="navbar navbar-default">
  34.         <div class="container-fluid">
  35.             <div class="navbar-header">
  36.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1-example">
  37.                     <span class="sr-only">Toggle Navigation</span>
  38.                     <span class="icon-bar"></span>
  39.                     <span class="icon-bar"></span>
  40.                     <span class="icon-bar"></span>
  41.                 </button>
  42.                 <a class="navbar-brand" href="#">Laravel 5.2</a>
  43.             </div>
  45.             <div class="collapse navbar-collapse" id="collapse-1-example">
  46.                 <ul class="nav navbar-nav">
  47.                     <li><a href="#/">Home</a></li>
  48.                     <li><a href="#/products">Product</a></li>
  49.                 </ul>
  50.             </div>
  51.         </div>
  52.     </nav>
  54.     <div id="container_area" class="container">
  55.         <ng-view></ng-view>
  56.     </div>
  58.     <!-- Scripts -->
  60. </body>
  61. </html>

Now we will create htmltemplates folder in following path resources/views/ and then create home.html file in htmltemplates folder.

resources/views/htmltemplates/home.html

  1. <h2>Welcome to Landing Page</h2>

resources/views/htmltemplates/products.html


  1. <div class="row">
  2.     <div class="col-lg-12 margin-tb">
  3.         <div class="pull-left">
  4.             <h1>Product Management</h1>
  5.         </div>
  6.         <div class="pull-right" style="padding-top:30px">
  7.             <div class="box-tools" style="display:inline-table">
  8.               <div class="input-group">
  9.                   <input type="text" class="form-control input-sm ng-valid ng-dirty" placeholder="Search" ng-change="dbSearch()" ng-model="searchInputText" name="table_search" title="" tooltip="" data-original-title="Minimum length of character is 3">
  10.                   <span class="input-group-addon">Search</span>
  11.               </div>
  12.             </div>
  13.             <button class="btn btn-success" data-toggle="modal" data-target="#add-new-product">Create New Product</button>
  14.         </div>
  15.     </div>
  16. </div>
  19. <table class="table table-bordered pagin-table">
  20.     <thead>
  21.         <tr>
  22.             <th>No</th>
  23.             <th>Name</th>
  24.             <th>Details</th>
  25.             <th width="220px">Action</th>
  26.         </tr>
  27.     </thead>
  28.     <tbody>
  29.         <tr dir-paginate="value in data | productsPerPage:5" total-products="totalProducts">
  30.             <td>{{ $index + 1 }}</td>
  31.             <td>{{ value.name }}</td>
  32.             <td>{{ value.details }}</td>
  33.             <td>
  34.             <button data-toggle="modal" ng-click="edit(value.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
  35.             <button ng-click="remove(value,$index)" class="btn btn-danger">Delete</button>
  36.             </td>
  37.         </tr>
  38.     </tbody>
  39. </table>
  40. <dir-pagination-controls class="pull-right" on-page-change="pageChanged(newPageNumber)" template-url="htmltemplates/dirPagination.html" ></dir-pagination-controls>
  42. <!-- Create Modal -->
  43. <div class="modal" id="add-new-product" tabindex="-1" role="dialog" aria-labelledby="myModalForLabel">
  44.     <div class="modal-dialog" role="document">
  45.         <div class="modal-content">
  47.             <form method="POST" name="addProduct" role="form" ng-submit="saveAdd()">
  48.             <input type="hidden" name="_token" value="{!! csrf_token() !!}">
  49.             <div class="modal-header">
  50.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  51.                 <h4 class="modal-title" id="myModalForLabel">Create Product</h4>
  52.             </div>
  53.             <div class="modal-body">
  54.                 
  55.                     <div class="row">
  56.                         <div class="col-xs-12 col-sm-12 col-md-12">
  57.                             <strong>Name : </strong>
  58.                             <div class="form-group">
  59.                                 <input ng-model="form.name" type="text" placeholder="Product Name" name="name" class="form-control" required />
  60.                             </div>
  61.                         </div>
  62.                         <div class="col-xs-12 col-sm-12 col-md-12">
  63.                             <strong>Details : </strong>
  64.                             <div class="form-group" >
  65.                                 <textarea ng-model="form.details" class="form-control" required>
  66.                                 </textarea>
  67.                             </div>
  68.                         </div>
  69.                     </div>
  70.                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  71.                     <button type="submit" ng-disabled="addProduct.$invalid" class="btn btn-primary">Submit</button>
  72.                 
  73.             </div>
  74.             </form>
  75.         </div>
  76.     </div>
  77. </div>
  78. </div>
  80. <!-- Edit Modal -->
  81. <div class="modal fade" id="edit-data" tabindex="-1" role="dialog" aria-labelledby="myModalForLabel">
  82.     <div class="modal-dialog" role="document">
  83.         <div class="modal-content">
  84.             <form method="POST" name="editProduct" role="form" ng-submit="updateProduct()">
  85.                 <input ng-model="form.id" type="hidden" placeholder="Name" name="name" class="form-control" />
  86.             <div class="modal-header">
  87.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  88.                 <h4 class="modal-title" id="myModalForLabel">Edit Product</h4>
  89.             </div>
  90.             <div id="modal_body_container" class="modal-body">
  91.               
  92.                     <div class="row">
  93.                         <div class="col-xs-12 col-sm-12 col-md-12">
  94.                             <div class="form-group">
  95.                                <input ng-model="form.name" type="text" placeholder="Name" name="name" class="form-control" required />
  96.                             </div>
  97.                         </div>
  98.                         <div class="col-xs-12 col-sm-12 col-md-12">
  99.                             <div class="form-group">
  100.                                <textarea ng-model="form.details" class="form-control" required>
  101.                                 </textarea>
  102.                             </div>
  103.                         </div>
  104.                     </div>
  105.                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  106.                     <button type="submit" ng-disabled="editProduct.$invalid" class="btn btn-primary create-crud">Submit</button>
  107.                 
  108.             </div>
  109.             </form>
  110.         </div>
  111.     </div>
  112. </div>
  113. </div>

resources/views/htmltemplates/dirPagination.html


  1. <ul class="pagination pull-right" ng-if="1 < pages.length">
  2.     <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }">
  3.         <a href="" ng-click="setCurrent(1)">&laquo;</a>
  4.     </li>
  5.     <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }">
  6.         <a href="" ng-click="setCurrent(pagination.current - 1)">&lsaquo;</a>
  7.     </li>
  8.     <li ng-repeat="pageNumber in pages track by $index" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }">
  9.         <a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a>
  10.     </li>
  12.     <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }">
  13.         <a href="" ng-click="setCurrent(pagination.current + 1)">&rsaquo;</a>
  14.     </li>
  15.     <li ng-if="boundaryLinks"  ng-class="{ disabled : pagination.current == pagination.last }">
  16.         <a href="" ng-click="setCurrent(pagination.last)">&raquo;</a>
  17.     </li>
  18. </ul>

Now you can create your first crud application with laravel angularjs.
Click here to download this project from github: GitHub

Tags :

PHP OOP Object Oriented Programming Laravel PHP Framework Angular JS Web Development

Related Posts

Bootstrap year picker example using datepicker js...
Show marker on google map using latitude and longi...
Working with jQuery DataTables server-side process...
jQuery - disable context menu right click, cut, co...
How to get last inserted id in laravel PHP Framewo...
jQuery How To Fix the “$ is not a function” Error...
How to get last record from table in PHP Laravel F...
How to use local storage for JavaScript
How to Send e-mail using Laravel 5 with Example
Laravel 5.3 - Creating MySQL Triggers from Migrati...
PHP - Classes & Object
How to count number of characters limit in textare...
Laravel Validate Form on Submit using Google reCap...
What is MySQLi? What does it do?
How to get location from its IP Address using Lara...
How to convert Collections object to array or json...
Laravel 5.6 Mongodb crud tutorial with example for...
How to build a REST API to perform CRUD operation...
How to generate slug using str_slug() helper funct...
How to Convert Object to String and String to Obje...
PHP CodeIgniter 4 - Basic CRUD operation with MySQ...
Search Comma Separated values using FIND_IN_SET in...
Submit PHP Bootstrap Form without Page Refresh usi...
How to use local storage for JavaScript
How to use Bootstrap Tags input jQuery plugin with...
Laravel 5 after login, redirect back to previous/i...
Static Methods and Properties in PHP with Example
Laravel PHP - Cropping and uploading an image with...
How to connect mysql database in node js with crud...
Validate multiple email addresses in single input...
Upload Multiple Images With Image Preview Using jQ...
PHP - basic concept of Polymorphism
Laravel Redirect to URL
Powerful jQuery Bootstrap Form Validation with Exa...
HOW TO MAKE A STAR POLYGON IN PHP ?
How to create a zip archive file for download in...
Laravel PHP guzzle http client GET and POST reques...
How to create first application in Node.js in Wind...
How to Use Multiple Database Connections in Larave...
Laravel 5 Installation in Ubuntu: command not foun...
jQuery Fullcalendar Integration with example
How to disable created_at and updated_at timestamp...
Constructor in PHP with example
How to delete multiple rows with checkbox using aj...
New Features in Laravel 5.3
Phone: (+91) 8800417876
Noida, 201301

© 2016 All Rights Reserved | Contact Us | Terms of use | Privacy Policy

sakarya escort akyazı escort arifiye escort erenler escort eve gelen escort ferizli escort geyve escort hendek escort otele gelen escort sapanca escort söğütlü escort taraklı escort
sakarya escort akyazı escort arifiye escort erenler escort eve gelen escort ferizli escort geyve escort hendek escort karapürçek escort karasu escort kaynarca escort kocaali escort otele gelen escort pamukova escort sapanca escort söğütlü escort taraklı escort
sakarya escort akyazı escort arifiye escort erenler escort eve gelen escort ferizli escort geyve escort hendek escort karapürçek escort karasu escort kaynarca escort kocaali escort otele gelen escort pamukova escort sapanca escort söğütlü escort taraklı escort
sakarya escort akyazı escort arifiye escort erenler escort eve gelen escort ferizli escort geyve escort hendek escort karapürçek escort karasu escort kaynarca escort kocaali escort otele gelen escort pamukova escort sapanca escort söğütlü escort taraklı escort
sakarya escort serdivan escort adapazarı escort sakarya escort bayan sakarya escort sakarya escort sakarya escort sakarya escort sakarya escort sakarya escort sakarya escort sakarya escort sakarya escort sakarya escort sapanca escort sakarya escort