Chương 12-Bài 8. Tạo API trong Laravel và sử dụng AngularJS để hiển thị giao diện

• routes/web.php: là file cấu hình quy định các route dành cho Web
• routes/api.php: là file cấu hình quy định các route dành cho API. Khi sử dụng các route này thì mặc định đường dẫn URL sẽ có tiền tố /api/url-route-cua-ban

Ví dụ Tạo chức năng thống kê Top 3 sản phẩm mới nhất

Step 1: tạo controller quản lý các API

php artisan make:controller Api/ApiController

Step 2: tạo route API

• Hiệu chỉnh file routes/api.php
• Bổ sung code đăng ký route API

<?php
use App\Http\Controllers\Api\ApiController;

Route::get('/thongke/top3_sanpham_moinhat', [ApiController::class,  'thongke_top3_sanpham_moinhat'])->name('api.thongke.top3_sanpham_moinhat');

Step 3: viết action lấy dữ liệu thống kê và trả về Response theo định dạng JSON

• Hiệu chỉnh file app/Http/Controllers/Api/ApiController
• Bổ sung action thongke_top3_sanpham_moinhat()

<?php
use DB;

public function thongke_top3_sanpham_moinhat() {
    // Sử dụng Query Builder
    // Query top 3 loại sản phẩm (có sản phẩm) mới nhất
    $ds_top3_newest_loaisanpham = DB::table('cusc_sanpham')
        ->join('cusc_loai', 'cusc_loai.l_ma', '=', 'cusc_sanpham.l_ma')
        ->orderBy('l_capNhat')->take(3)->get();

    return response()->json(array(
        'code'  => 200,
        'result' => $ds_top3_newest_loaisanpham,
    ));
}

Step 4: tạo route hiển thị trang Thống kê bên Frontend

• Hiệu chỉnh file routes/web.php

Route::get('/thongke', 'Frontend\FrontendController@thongke')->name('frontend.pages.thongke');

Step 5: tạo action thongke() hiển thị view trong Frontend

• Hiệu chỉnh file Frontend/FrontendController.php

public function thongke() {
    // Hiển thị view Thống kê
    return view('frontend.pages.thongke');
}

Step 6: tạo view Thống kê số liệu

• Tạo file resources/views/frontend/pages/thongke.blade.php

{{-- View này sẽ kế thừa giao diện từ `frontend.layouts.master` --}}
@extends('frontend.layouts.master')

{{-- Thay thế nội dung vào Placeholder `title` của view `frontend.layouts.master` --}}
@section('title')
Thống kê số liệu Shop Hoa tươi - Sunshine
@endsection

{{-- Thay thế nội dung vào Placeholder `custom-css` của view `frontend.layouts.master` --}}
@section('custom-css')
<style>
  .img-hinhdaidien {
    width: 50px;
    height: 50px;
  }
</style>
@endsection

{{-- Thay thế nội dung vào Placeholder `main-content` của view `frontend.layouts.master` --}}
@section('main-content')


<div class="container">
  <h1 class="text-center">Thống kê Số liệu Shop Hoa Tươi</h1>

  <div id="thongke_sanpham" ng-controller="thongKeSanPhamController">
    <h2>Thống kê về Sản phẩm</h2>

    <div class="card card-info">
        <div class="card-header">Top 3 sản phẩm mới nhất</div>
        <div class="card-body">
          <table class="table table-bordered">
            <thead>
              <tr>
                <td>STT</td>
                <td>Hình đại diện</td>
                <td>Tên sản phẩm</td>
                <td>Giá</td>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="sp in danhsach_top3_sanpham_moinhat">
                <td><% $index + 1 %></td>
                <td>
                  <img ng-src="/storage/photos/<% sp.sp_hinh %>" class="img-hinhdaidien"/></td>
                <td><% sp.sp_ten %></td>
                <td><% sp.sp_giaBan | number:0 %></td>
              </tr>
            </tbody>
          </table>
        </div>
    </div>
  </div>
</div>

@endsection


{{-- Thay thế nội dung vào Placeholder `custom-scripts` của view `frontend.layouts.master` --}}
@section('custom-scripts')
<script>
  // Khai báo controller `thongKeSanPhamController`
  app.controller('thongKeSanPhamController', function($scope, $http) {
    // Dữ liệu
    $scope.danhsach_top3_sanpham_moinhat = [];

    // sử dụng service $http của AngularJS để gởi request GET đến route `api.thongke.top3_sanpham_moinhat`
    $http({
        url: "{{ route('api.thongke.top3_sanpham_moinhat') }}",
        method: "GET"
    }).then(function successCallback(response) {
      // Nếu gởi request thành công thì chuyển dữ liệu sang cho AngularJS hiển thị
      $scope.danhsach_top3_sanpham_moinhat = response.data.result;
      console.log(response.data.result);
      console.log($scope.danhsach_top3_sanpham_moinhat);

    }, function errorCallback(response) {
        // Lấy dữ liệu không thành công, thông báo lỗi cho khách hàng biết
        swal('Có lỗi trong quá trình lấy dữ liệu!', 'Vui lòng thử lại sau vài phút.', 'error');
        console.log(response);
    });

  });
</script>
@endsection

Bài tập

Viết API thống kê số liệu và hiển thị giao diện bằng AngularJS

1. Thống kê danh sách các sản phẩm nào đã bán gần hết số lượng (số lượng < 10 xem như gần hết), để Chủ SHOP nhập thêm hàng về?
2. Hình thức thanh toán phổ biến nhất là gì?
3. Tìm top 3 Khách hàng mua nhiều nhất trong năm nay để tri ân khách hàng?
4. Tìm nhà cung cấp không bán được sản phẩm nào trong Hệ thống?

Thực hiện trang Tìm kiếm Sản phẩm theo nhiều tiêu chí (Tên, Giá bán, ...)

1. Tạo API GET tìm kiếm sản phẩm theo nhiều tiêu chí (mỗi tiêu chí là một tham số truyền vào). Ví dụ: ?search_by_name=""&search_by_price=""
2. Thực hiện action() để tạo câu truy vấn SQL với các tiêu chí có được
3. Thực thi SQL và trả về dữ liệu JSON