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

API nhìn chung đơn giản là các hàm xử lý, nhận các Request gởi đến từ Client và Response trả về từ Server theo định dạng JSON hoặc XML hoặc định dạng nào đó. Tuy nhiên khác biệt giữa route web và route api thường như sau:

	Route Web	Route API
URL	Đường dẫn thân thiện với Người dùng cuối. Ví dụ: /lien-he /danh-sach-san-pham /gioi-thieu	Đường dẫn thường phứt tạp, đặt theo quy cách đánh số phiên bản dành cho Lập trình viên sử dụng. Thường có tiền tố /api ở đầu. Ví dụ: /api/v1/thongke/top3_sanpham_moinhat /api/v1/thongke/doanhthu /api/v1/sanpham/danhsach
Xác thực	Sử dụng FORM Đăng nhập thông thường	Sử dụng Token để chứng thực. Thường là JWT Token

Để phân biệt rõ ràng giữa các route cho Web và API, trong Laravel đã phân định sẵn 2 file cấu hình dành riêng cho các loại route này:

• 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

Thực thi câu lệnh

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, ...)

Gợi ý các bước thực hiện: Step 1: Tạo API

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

Step 2: Tạo giao diện và sử dụng AngularJS để gởi Request GET đến API lấy dữ liệu và hiển thị giao diện tương ứng.