[Thực hành] Ứng dụng quản lý khách hàng - P2

[Thực hành] Ứng dụng quản lý khách hàng – P2

Laravel cơ bản

15-06-2020

NỘI DUNG BÀI VIẾT

Mục tiêu

Tạo và sử dụng layout, truyền dữ liệu sang view. Chuyển các trang html của ứng dụng quản lý khách hàng sang Blade Template

Mô tả

Những bài trước chúng ta đã tạo CSDL, tạo dữ liệu mẫu. Ở bài này chúng ta sẽ làm chức năng hiển thị danh sách khách hàng.

Hướng dẫn

Bước 1: Tạo controller có tên CustomerController

Chạy lệnh sau trên terminal trong thư mục gốc của project:

php artisan make:controller CustomerController

Controller created successfully.

Bước 2: Sửa file CustomerController

Trong file app/Http/Controllers/CustomerController.php tạo hàm index() có nội dung sau:

public function index(){

  //tao mang khach hang
  $customers = [
      '0' => [
          'id'  => 1,
          'name'=> 'customer1',
          'bod' => '1998-09-01',
          'email' => '[email protected]'
      ],

      '1' => [
          'id'  => 2,
          'name'=> 'customer2',
          'bod' => '1998-09-01',
          'email' => '[email protected]'
      ],

      '2' => [
          'id'  => 3,
          'name'=> 'customer3',
          'bod' => '1998-09-01',
          'email' => '[email protected]'
      ]
  ];

  //goi view va truyen du lieu sang view
  return view('customers.list', compact('customers'));
}

Bước 3: Tạo view hiển thị danh sách khách hàng

Trong thư mục resources tạo thư mục customers chứa layout của customer. Tạo file list.blade.php để hiển thị danh sách khách hàng.

File list.blade.php có nội dung như sau:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Danh sách khách hàng</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
  <div class="col-12">
      <div class="row">
          <h1>Danh Sách Khách Hàng</h1>
          <table class="table table-striped">
              <thead>
              <tr>
                  <th scope="col">#</th>
                  <th scope="col">Tên khách hàng</th>
                  <th scope="col">Ngày Sinh</th>
                  <th scope="col">Email</th>
              </tr>
              </thead>
              <tbody>
              @if(count($customers) == 0)
                  <tr>
                      <td colspan="4">Không có dữ liệu</td>
                  </tr>
              @else
                  @foreach($customers as $key => $customer)
                  <tr>
                      <th scope="row">{{ ++$key }}</th>
                      <td>{{ $customer['name'] }}</td>
                      <td>{{ $customer['bod'] }}</td>
                      <td>{{ $customer['email'] }}</td>
                  </tr>
                  @endforeach
              @endif
              </tbody>
          </table>
      </div>
  </div>
</div>
</body>
</html>

Bước 4: Tạo route

Trong thư mục routes/web.php tạo nhóm route cho customers. Sau đó tạo route sử dụng method GET gọi đến trang danh sách khách hàng như sau:

Route::group(['prefix' => 'customers'], function () {
  Route::get('/','[email protected]')->name('customers.index'); 
});

Bước 5: Chạy ứng dụng

php artisan serve

Laravel development server started: <http://127.0.0.1:8000>

[Thu Sep 27 15:12:54 2018] 127.0.0.1:50608 [200]: /favicon.ico

[Thu Sep 27 15:12:54 2018] 127.0.0.1:50610 [200]: /favicon.ico

Chạy đường dẫn http://localhost:8000/customers

Kết quả:

Tổng kết

Qua bài tập chúng ta đã luyện tập:

Sử dụng blade template
Truyền được dữ liệu sang view

Mã nguồn: https://github.com/codegym-vn/laravel-manage-customer-show-data