Mục tiêu
Luyện tập sử dụng form, phương thức POST/GET, làm quen với khái niệm route, view.
Mô tả
Trong phần này, chúng ta sẽ tạo một trang web với chức năng đăng nhập và hiển thị lời chào. Chúng ta sẽ tạo một form cơ bản gồm tên đăng nhập và mật khẩu. Tên đăng nhập và mật khẩu cố định sẵn là admin/admin. Khi người dùng nhập đúng tên đăng nhập và mật khẩu, thì trang web hiển thị lời chào: Chào mừng admin đến với trang web. Khi người dùng nhập sai, trang web hiển thị: Sai tên đăng nhập hoặc mật khẩu.
Hướng dẫn được chia thành 3 phần:
- Tạo route với phương thức GET để hiển thị trang chứa form đăng nhập
- Tạo form đăng nhập bằng ngôn ngữ html
- Tạo route với phương thức POST để xử lý khi người dùng nhấn vào nút “Đăng nhập”.
Hướng dẫn
Phần 1: Tạo route với phương thức GET để hiển thị trang chứa form đăng nhập
Bước 1: Tạo route ‘/login’
Route là cách để khai báo các URL cùng với các phương thức POST/GET/PUT/PATCH… để xử lý các yêu cầu từ phía người dùng.
Khi tạo một chức năng, việc đầu tiên chúng ta nghĩ là route cho chức năng đó là gì và với phương thức là gì. Sau đó chúng ta mới nghĩ đến việc xử lý chức năng đó như thế nào. Ở đây chúng ta muốn hiển thị 1 trang web chứa form đăng nhập, vậy chúng ta đặt URL cho nó là ‘/login’ với phương thức GET. Chúng ta mở tệp “routes/web.php” và thêm vào đoạn sau:
Rotue::get('/login', function() { echo 'Hello Word';});
GET là phương thức http dùng để hiển thị tài nguyên từ phía máy chủ gửi xuống trình duyệt. Ngược lại POST là phương thức http dùng để xử lý các tham số từ phía người dùng từ trình duyệt gửi lên máy chủ.
Như vậy khi người dùng truy cập vào địa chỉ, http://localhost:8000/login các lệnh ở trong function() sẽ được thực thi.
Bước 2: Tạo form đăng nhập bằng ngôn ngữ html
Chúng ta tạo 1 tệp với tên là “login.blade.php” ở trong thư mục “resources/views”.
View chính là tệp chứa code hiển thị giao diện cho trang web, giúp người dùng xem và tương tác được với trang web. Blade là ngôn ngữ template mặc định mà Laravel sử dụng giúp cho việc code ở view được ngắn gọn và thuận tiện.
Nội dung của trang login như sau:
Login
Đăng nhập
@csrf
Đây là 1 tệp html thông thường, chúng ta chỉ cần chú ý các điểm sau:
- <form action=”/login” method=”POST”>: Sẽ đề cập tới riêng phần này ở phía dưới.
- @csrf: Dùng để hiển thị đoạn mã csrf để chống kĩ thuật tấn công bằng cách sử dụng quyền chứng thực của người sử dụng đối với 1 trang web khác.
- <input type=”text” name=”username” placeholder=”Tên đăng nhập”: Ô textbox để người dùng nhập username, ở đây chúng ta cần lưu ý trường “name” của input, sẽ dựa vào trường “name” này để lấy dữ liệu người dùng nhập vào
- <button type=”submit”>Đăng nhập</button>: Chúng ta khai báo type=”submit” để khi người dùng click vào nút này, các thông tin người dùng nhập vào form sẽ được gửi lên máy chủ.
Sau khi tạo xong form đăng nhập, chúng ta sẽ cập nhật trong file “routes/web.php”
Route::get('/login', function () {
return view('login');
});
Đến bước này, khi người dùng nhập địa chỉ http://localhost:8000/login, máy chủ sẽ hiển thị nội dung ở tệp view “login.blade.php” mà chúng ta vừa tạo ở trên.
Bước 3: Tạo route với phương thức POST để xử lý khi người dùng nhấn vào nút “Đăng nhập”
Trở lại với đoạn code <form action=”/login” method=”POST”> ở tệp “login.blade.php” chúng ta vừa tạo ở trên.
Khi chúng ta khai báo action là “/login” và method là “POST” ở form thì khi người dùng nhấp vào nút “Đăng nhập”, một route có đường dẫn là “/login” và có methodlà POST sẽ được gọi đến.
Trong file “routes/web.php”, tạo thêm một Route mới:
Route::post('/login', function (Illuminate\Http\Request $request) {
// todo
});
Lưu ý rằng không giống như phương thức GET ở phần trước, phương thức POST thường có tham số yêu cầu từ người dùng truyền vào nên chúng ta cần sử dụng class Illuminate\Http\Request để lấy ra được các thông tin từ phía người dùng.
Sau đó chúng ta kiểm tra xem người dùng nhập thông tin username và password có đúng hay không, cập nhật Route:
Route::post('/login', function (Illuminate\Http\Request $request) { if ($request->username == 'admin' && $request->password == 'admin') { return view('welcome_admin'); } return view('login_error');});
Nếu người dùng nhập vào username và password đúng thì ứng dụng sẽ hiển thị đoạn văn bản chào mừng. Chúng ta sẽ tạo 1 tệp view tên là “welcome_admin.blade.php” nằm ở thư mục “resources/views” với nội dung chào mừng:
<!DOCTYPE html><html lang="vi"><head> <meta charset="UTF-8"> <title>Chào mừng admin</title></head><body> <p>Chào mừng admin đến với website.</p></body></html>
Bây giờ chúng ta cùng nhập tên đăng nhập admin và mật khẩu admin vào form vừa tạo sau đó nhấp vào nút “Đăng nhập”, thông báo chào mừng sẽ hiện ra:
Ngược lại nếu người dùng không nhập đúng tên đăng nhập và mật khẩu, chúng ta sẽ hiển thị 1 trang báo lỗi. Chúng ta tạo 1 tệp view khác tên là “login_error.blade.php” trong thư mục “resources/views” như sau:
<!DOCTYPE html><html lang="vi"><head> <meta charset="UTF-8"> <title>Đăng nhập lỗi</title></head><body> <p>Sai tên đăng nhập hoặc mật khẩu.</p></body></html>
Bây giờ chúng ta nhập tên đăng nhập hoặc mật khẩu khác “admin”, trang thông báo lỗi sẽ hiển thị:
Tổng kết
Qua bài tập trên chúng ta đã luyện tập:
- Tạo form cơ bản
- Làm quen với việc tạo route và xử lý trong route.
- Phân biệt được POST/GET.
Mã nguồn mẫu: https://github.com/ravenvn/greeting_codegym
Share this:
