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

2. Cơ bản về Laravel Framework

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' => 'customer1@gmail.com'
      ],

      '1' => [
          'id'  => 2,
          'name'=> 'customer2',
          'bod' => '1998-09-01',
          'email' => 'customer2@gmail.com'
      ],

      '2' => [
          'id'  => 3,
          'name'=> 'customer3',
          'bod' => '1998-09-01',
          'email' => 'customer3@gmail.com'
      ]
  ];

  //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('/','CustomerController@index')->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

Leave a Reply

Your email address will not be published. Required fields are marked *