[Thực hành] Khởi tạo ứng dụng Task Management – P1
NỘI DUNG BÀI VIẾT
Mục tiêu
Luyện tập sử dụng Route trong Laravel
Mô tả
Trong phần này, chúng ta sẽ phát triển một ứng dụng quản lý công việc. Trong quá trình học, chúng ta sẽ hoàn thiện ứng dụng thông qua các bài thực hành tiếp theo.
Ở bài hôm nay, chúng ta sẽ xây dựng cấu trúc route cho hệ thống, cùng với đó là hiển thị một số giao diện đơn giản và cần thiết ở mọi ứng dụng quản lý:
- Trang danh sách
- Trang thêm thông tin
- Trang sửa thông tin
- Trang hiển thị thông tin.
Hướng dẫn
Bước 1: Tạo ứng dụng Laravel có tên “task_manager”
Vào thư mục chúng ta muốn lưu trữ mã nguồn của dự án rồi gõ lệnh:
composer create-project laravel/laravel task_manager --prefer-dist
Bước 2: vào trong thư mục code và mở toàn bộ tên trong thư mục bằng trình soạn thảo yêu thích
cd task_manager/
Bước 3: Xây dựng cấu trúc Route cho module:
Để dễ hình dung, chúng ta sẽ bắt đầu bằng việc quản lý danh sách khách hàng, vì vậy ở đây chúng ta sẽ quy định tên của module là “customer”. Sửa file “routes/web.php” như sau:
// Tạo 1 nhóm route với tiền tố customer
Route::prefix('customer')->group(function () {
Route::get('index', function () {
// Hiển thị danh sách khách hàng
echo "Hiển thị danh sách khách hàng";
});
Route::get('create', function () {
// Hiển thị Form tạo khách hàng
});
Route::post('store', function () {
// Xử lý lưu dữ liệu tạo khách hàng thong qua phương thức POST từ form
});
Route::get('{id}/show', function () {
// Hiển thị thông tin chi tiết khách hàng có mã định danh id
});
Route::get('{id}/edit', function () {
// Hiển thị Form chỉnh sửa thông tin khách hàng
});
Route::patch('{id}/update', function () {
// xử lý lưu dữ liệu thông tin khách hàng được chỉnh sửa thông qua PATCH từ form
});
Route::delete('{id}', function () {
// Xóa thông tin dữ liệu khách hàng
});
});
Ở bài này chúng ta sẽ tập trung vào Route vì thế sẽ thực hành route GET trước tiên, trong quá trình học chúng ta sẽ hoàn thiện các kỹ năng và thực hành nhiều hơn nữa các tác vụ khác như phương thức “POST”, “PATCH”, “DELETE” như trong ví dụ.
Bước 4: Chạy ứng dụng và truy cập URL ứng dụng để xem kết quả.
Gõ lệnh: php artisan serve
Kiểm tra khởi chạy ứng dụng đã tạo bằng cách truy cập “http://127.0.0.1:8000/”.
Để kiểm tra xem Route đã hoạt động chưa, chúng ta truy cập “http://127.0.0.1:8000/customer/index”
Bước 5: Xây dựng giao diện hiển thị bằng “html”
Chúng ta sẽ xây dựng một “table” để hiện thị danh sách bản ghi khách hàng.
Tạo file “index.blade.php” theo đường dẫn “resources/views/modules/customer/index.blade.php”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Danh sách khách hàng</h1>
<table border="1">
<thead>
<tr>
<th>STT</th>
<th>Họ và tên</th>
<th>Số điện thoại</th>
<th>Email</th>
<th>Thao tác</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nguyễn Văn A</td>
<td>01234567890</td>
<td>[email protected]</td>
<td>
<a href="#">Xem</a> | <a href="#">Sửa</a> | <a href="#">Xóa</a&
</td>
</tr>
<tr>
<td>2</td>
<td>Nguyễn Văn B</td>
<td>01234567890</td>
<td>[email protected]</td>
<td>
<a href="#">Xem</a> | <a href="#">Sửa</a> | <a href="#">Xóa</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Nguyễn Văn C</td>
<td>01234567890</td>
<td>[email protected]</td>
<td>
<a href="#">Xem</a> | <a href="#">Sửa</a> | <a href="#">Xóa</a>
</td>
</tr>
<tr>
<td>4</td>
<td>Nguyễn Văn D</td>
<td>01234567890</td>
<td>[email protected]</td>
<td>
<a href="#">Xem</a> | <a href="#">Sửa</a> | <a href="#">Xóa</a>
</td>
</tr>
<tr>
<td>5</td>
<td>Nguyễn Văn E</td>
<td>01234567890</td>
<td>[email protected]</td>
<td>
<a href="#">Xem</a> | <a href="#">Sửa</a> | <a href="#">Xóa</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Chỉnh sửa nội dung file “routes/web.php”: Sửa function của route “index” trong group “customer” như sau:
Route::get('index', function () {
// Hiển thị danh sách khách hàng
return view('modules.customer.index');
});
Bước 6: Kiểm tra trên trình duyệt web ta sẽ thấy kết quả:
Leave a Reply