Laravel 5 Tutorial : Laravel 5.3 Simple CRUD Application With Angular JS

0 0 07 December, 2016

Laravel 5.3 tutorial : how to create simple CRUD operations in laravel and Angular JS backend (REST API) for beginners full tutorial with video

Laravel 5.3 tutorial for beginners : Create simple Laravel 5.3 CRUD Operations with laravel 5.3 and Angular JS backend (REST API). At the previews lessons, we have create simple crud with laravel too, please read :
  1. Laravel 5.3 Crud Operation with Ajax
  2. Laravel 5.3 Crud Application with Resource Controller
  3. Laravel 5.3 Crud Opeartion with Vue.Js Full video
This lessons will use Laravel 5 for the backend and AngularJS for the front end. In accordance with the laws of beauty, we will use twitter bootstrap to add beauty to our simple application.

Video Tutorial Laravel CRUD with Angular Js


Create New Laravel Project

cd c:\server\htdocs\
....
composer create-project laravel/laravel laravelangularjs

Connect with Database (MySQL Database)

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravelangularjs
DB_USERNAME=root
DB_PASSWORD=yourpasswqord

Create Migration and Tables

php artisan make:migration create_supplier_table

Create tables

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateSupplierTable extends Migration {

    public function up(){
        // create supplier table
        Schema::create('supplier', function (Blueprint $table) {
         $table->increments('id');
         $table->string('supplierName')->unique();
         $table->string('supplierEmail')->unique();
         $table->string('supplierContact');
         $table->string('supplierPosition');
         $table->timestamps();
        });
    }

    public function down() {
        // Drop supplier table
        Scheme::drop('supplier');
    }
}

Run Migration

php artisan migrate

Create Model

php artisan make:model Supplier

Supplier.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Supplier extends Model{
    protected $table ='supplier';
    protected $fillable = array('id','supplierName','supplierEmail','supplierContact','supplierPosition');
}

Create Controller

php artisan make:controller SupplierController --resource

SupplierController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Supplier; // use our supplier model

class SupplierController extends Controller {

    public function index($id = null) {
      if ($id == null){
        return Supplier::orderBy('id', 'asc')->get();
      } else {
        return $this->show($id);
      }
    }

    public function store(Request $request) {
        $supplier = new Supplier;
        $supplier->supplierName = $request->input('supplierName');
        $supplier->supplierEmail = $request->input('supplierEmail');
        $supplier->supplierContact = $request->input('supplierContact');
        $supplier->supplierPosition = $request->input('supplierPosition');
        $supplier->save();
        return 'Supplier record successfully created with id' . $supplier->id;
    }
    public function show($id) {
        return Supplier::find($id);
    }
    public function update(Request $request, $id) {
        $supplier = Supplier::find($id);
        $supplier->supplierName = $request->input('supplierName');
        $supplier->supplierEmail = $request->input('supplierEmail');
        $supplier->supplierContact = $request->input('supplierContact');
        $supplier->supplierPosition = $request->input('supplierPosition');
        $supplier->save();
        return 'Supplier record successfully updated with id ' . $supplier->id;
    }
    public function destroy($id) {
        $supplier = Supplier::find($id)->delete();
        return 'Employee record successfully deleted';
    }
}

Create New Routes

Route::get('/', function () {
    return view('index');
});
Route::get('/api/supplier/{id?}', 'SupplierController@index');
Route::post('/api/supplier', 'SupplierController@store');
Route::post('/api/supplier/{id}', 'SupplierController@update');
Route::delete('/api/supplier/{id}', 'SupplierController@destroy');

Create New Views (index.blade.php)

<!DOCTYPE html>
<html lang="en" ng-app="getSupplier">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 5 and Angular CRUD Application</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="container">
      <h2>Simple CRUD Application with AngularJs</h2>
      <div ng-controller="SupplierController">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>ID</th>
              <th>Supplier Name</th>
              <th>Supplier Email</th>
              <th>Supplier Contact</th>
              <th>Supplier Position</th>
              <th>
                <button id="btn-add" class="btn btn-success btn-xs" ng-click="toggle('add', 0)">Add New Supplier</button>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="supplier in suppliers">
              <td>@{{ supplier.id }}</td>
              <td>@{{ supplier.supplierName }}</td>
              <td>@{{ supplier.supplierEmail }}</td>
              <td>@{{ supplier.supplierContact }}</td>
              <td>@{{ supplier.supplierPosition }}</td>
              <td>
                <button class="btn btn-warning btn-xs btn-detail" ng-click="toggle('edit', supplier.id)">
                  <span class="glyphicon glyphicon-edit"></span>
                </button>
                <button class="btn btn-danger btn-xs btn-delete" ng-click="confirmDelete(supplier.id)">
                  <span class="glyphicon glyphicon-trash"></span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- show modal  -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <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">@{{form_title}}</h4>
              </div>
              <div class="modal-body">
                <form name="frmSupplier" class="form-horizontal" novalidate="">
                  <div class="form-group">
                    <label class="col-sm-3 control-label">Supplier Name</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="supplierName" name="supplierName" placeholder="Supplier Name" value="@{{supplierName}}" ng-model="supplier.supplierName" ng-required="true">
                      <span ng-show="frmSupplier.supplierName.$invalid && frmSupplier.supplierName.$touched">Supplier Name field is required</span>
                    </div>
                  </div>

                    <div class="form-group">
                      <label class="col-sm-3 control-label">Supplier Email</label>
                      <div class="col-sm-9">
                        <input type="email" class="form-control" id="supplierEmail" name="supplierEmail" placeholder="Supplier Email" value="@{{supplierEmail}}" ng-model="supplier.supplierEmail" ng-required="true">
                        <span ng-show="frmSupplier.supplierEmail.$invalid && frmSupplier.supplierEmail.$touched">Supplier Email field is required</span>
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="col-sm-3 control-label">Supplier Contact</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" id="supplierContact" name="supplierContact" placeholder="Supplier Contact" value="@{{supplierContact}}" ng-model="supplier.supplierContact" ng-required="true">
                        <span ng-show="frmSupplier.supplierContact.$invalid && frmSupplier.supplierContact.$touched">Supplier Contact field is required</span>
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="col-sm-3 control-label">Supplier Position</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" id="supplierPosition" name="supplierPosition" placeholder="Supplier Position" value="@{{supplierPosition}}" ng-model="supplier.supplierPosition" ng-required="true">
                        <span ng-show="frmSupplier.supplierPosition.$invalid && frmSupplier.supplierPosition.$touched">Supplier Position field is required</span>
                      </div>
                    </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btn-save" ng-click="save(modalstate, id)" ng-disabled="frmSupplier.$invalid">Save Changes</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- Aangular Material load from CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>

    <!-- Angular Application Scripts Load  -->
    <script src="{{ asset('angular/app.js') }}"></script>
    <script src="{{ asset('angular/controllers/SupplierController.js') }}"></script>
  </body>
</html>

AngularJS application structure

Laravel 5 Tutorial : Laravel 5.3 Simple CRUD Application With Angular JS

Create new folder (angular) in public\angular, and create new file (app.js) in there (public\angular\app.js)

public\angular\app.js

var app = angular.module('getSupplier', [])
        .constant('API_URL','http://localhost:8080/api/');

Create new folder (controller) in public\angular directory, and create new file (SupplierController.js) in public\angular\controller\SupplierController.js folder

public\angular\controller\SupplierController.js

app.controller('SupplierController', function($scope, $http, API_URL) {
  // retrieve Supplier listing from API
  $http.get(API_URL + "supplier")
  .success(function(response){
    $scope.suppliers = response;
  });

  // show modal Form
  $scope.toggle = function(modalstate, id) {
      $scope.modalstate = modalstate;
      switch(modalstate) {
        case 'add':
          $scope.form_title = "Add New Supplier";
          break;
        case 'edit':
          $scope.form_title = "Supplier Detail";
          $scope.id = id;
          $http.get(API_URL + 'supplier/' + id).success(function(response){
            console.log(response);
            $scope.supplier = response;
          });
          break;
        default:
          break;
      }
      console.log(id);
      $('#myModal').modal('show');
  }

  // save new supplier and update existing supplier
  $scope.save = function(modalstate, id) {
    var url = API_URL + "supplier";
    if (modalstate === 'edit') {
      url += "/" + id;
    }
    $http({
      method: 'POST',
      url: url,
      data: $.param($scope.supplier),
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function(response){
      console.log(response);
      location.reload();
    }).error(function(response){
      console.log(response);
      alert('This is embarassing. An error has occured. Please check the log for details');
    });
  }

 // delete supplier record
 $scope.confirmDelete = function(id) {
   var isConfirmDelete = confirm('Are you sure you want this record?');
   if (isConfirmDelete) {
     $http({
       method: 'DELETE',
       url: API_URL + 'supplier/' + id
     }).success(function(data){
       console.log(data);
       location.reload();
     }).error(function(data){
       console.log(data);
       alert('Unable to delete');
     });
   } else {
     return false;
   }
 }
});

Watch more Laravel videos

Laravel 5.3 CRUD with VueJS



Laravel 5.3 CRUD with AJAX


DOWNLOAD FULL SOURCE CODE Laravel 5.3 Simple CRUD Application With Angular JS HERE!!!.

See you next lessons ..

COMMENTS

DISQUS

Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,89,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,6,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: Laravel 5 Tutorial : Laravel 5.3 Simple CRUD Application With Angular JS
Laravel 5 Tutorial : Laravel 5.3 Simple CRUD Application With Angular JS
Laravel 5.3 tutorial : how to create simple CRUD operations in laravel and Angular JS backend (REST API) for beginners full tutorial with video
https://i.ytimg.com/vi/lw6xOu6ot30/hqdefault.jpg
https://i.ytimg.com/vi/lw6xOu6ot30/default.jpg
KODE AJAIB
https://scqq.blogspot.com/2016/12/laravel-53-crud-application-with-angularjs.html
https://scqq.blogspot.com/
https://scqq.blogspot.com/
https://scqq.blogspot.com/2016/12/laravel-53-crud-application-with-angularjs.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy