[Thực hành] Ứng dụng Task Management với Blade Template – Sử dụng if, foreach
NỘI DUNG BÀI VIẾT
Mục tiêu
Trong ứng dụng Task management, luyện tập sử dụng if, foreach trên Blade để hiển thị danh sách các tasks.
Mô tả ứng dụng
Trong phần này, chúng ta sẽ xây dựng một trang web với chức năng hiển thị tất cả các task được lấy ra từ database:
Trang web có các thành phần:
- Link Tasks list: Một link điều hướng người dùng đi đến trang hiển thị danh sách tasks.
- Tasks table: Bảng hiển thị tất cả tasks với các trường đặc trưng.
Hướng dẫn
Bước 1: Tạo trang chủ
Bao gồm 2 thành phần:
- ADD NEW TASK: Điều hướng đến form thêm mới một task.
- TASK LIST: Điều hướng đến trang hiển thị danh sách tasks.
Code HTML tham khảo: resources/views/welcome.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<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</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
<!-- CSS -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css">
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="content">
<div class="title m-b-md">
Task Management
</div>
<div class="links">
<a href="">Add new task</a>
<a href="">Tasks list</a>
</div>
</div>
</div>
</body>
</html>
Code CSS tham khảo: resources/sass/app.css
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
.navbar-laravel {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
Bước 2: Tạo Router để điều hướng người dùng từ trang chủ đi vào trang hiển thị danh sách
Route::get('/tasks', '[email protected]')->name('tasks.index');
Bước 3: Tạo phương thức index() trong TaskController
Để thực hiện được bước này hãy đảm bảo đã tạo được Model Task và TaskController.
Bên trong TaskController tạo phương thức index()
Code tham khảo:
public function index()
{
//Lấy ra toàn bộ các task từ database thông qua truy vấn bằng Eloquent
$tasks = \App\Task::all();
// Trả về view index và truyền biến tasks chứa danh sách các task
return view('index', compact('tasks'));
}
Ở view welcome, tại thẻ a điều hướng đến trang danh sách task, bổ xung thêm thuộc tính href để chạy đến route có tên là ‘task.index’
<div class="links">
<a href="">Add new task</a>
<a href="{{ route('tasks.index') }}">Tasks list</a>
</div>
Bước 4: Tạo view hiển thị danh sách task
Code HTML tham khảo: Có sử dụng Bootstrap để tạo bảng hiển thị danh sách task (resources/views/index.blade.php)
<!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>List Tasks</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- CSS -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css">
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="content">
<div class="title m-b-md">
Tasks List
</div>
// Code hiển thị danh sách tasks ở đây
</div>
</div>
<!-- Bootstrap JS -->
<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>
</body>
</html>
Bước 5: Sử dụng if và foreach để hiển thị danh sách task
Sử dụng @if trên index.blade.php:
– Nếu biến $tasks không tồn tại hoặc có giá trị NULL thì sẽ trả về dòng thông báo: Dữ liệu không tồn tại!
@if(!isset($tasks))
<h5 class="text-primary">Dữ liệu không tồn tại!</h5>
@else
@endif
Bước 6 Sử dụng foreach:
– Nếu biến $tasks chứa mảng có kích thước bằng 0 (Chưa có task nào được tạo) thì sẽ trả về dòng thông báo Hiện tại chưa có task nào được tạo! Ngược lại, ta sẽ sử dụng câu lệnh @foreach để duyệt mảng tasks, lấy ra từng task và hiển thị các trường ($task->title, $task->content, $task->create_at, $task->due_date) ra bảng
@if(!isset($tasks))
<h5 class="text-primary">Dữ liệu không tồn tại!</h5>
@else
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Task title</th>
<th scope="col">Content</th>
<th scope="col">Created</th>
<th scope="col">Due Date</th>
</tr>
</thead>
<tbody>
// Kiểm tra, nếu biến tasks có số lượng bằng 0 (Không có task nào) thì trả về thông báo
@if(count($tasks) == 0)
<tr>
<td colspan="5"><h5 class="text-primary">Hiện tại chưa có task nào được tạo!</h5></td>
</tr>
@else
// Duyệt mảng $tasks, lấy ra từng trường của từng task để hiển thị ra bảng
@foreach($tasks as $key => $task)
<tr>
<td scope="row">{{ ++$key }}</td>
<td>{{ $task->title }}</td>
<td>{{ $task->content }}</td>
<td>{{ $task->created_at }}</td>
<td>{{ $task->due_date }}</td>
</tr>
@endforeach
@endif
</tbody>
</table>
@endif
Chạy ứng dụng và quan sát kết quả.
Với trường hợp biến $tasks không tồn tại sẽ có kết quả:
Với trường hợp biển $tasks có số lượng bằng 0 (chưa có task nào được tạo trong database):
Với trường hợp dữ liệu đã có sẵn 4 task trong database, danh sách tasks sẽ được hiển thị:
Tổng kết
Trong bài này chúng ta luyện tập được sử dụng if trong Blade, vòng lặp trong Blade, form trong Blade.
Mã nguồn tham khảo: https://github.com/codegym-vn/laravel-task-management.git
Leave a Reply