Xử lý form trong Javalin

Chúng ta đã biết với Javalin chúng ta có thể dựng ngay 1 api web nhỏ gọn gần như ngay lập tức, vậy thì Javalin có khả năng xử lý và hiển thị các trang HTML hay không và việc xử lý các request và response qua form của nó thì như thế nào. Hãy cùng tìm hiểu.

Khai báo thư viện Maven dependency:

<dependencies>
    <dependency>
        <groupId>io.javalin</groupId>
        <artifactId>javalin</artifactId>
        <version>2.8.0</version>
    </dependency>
    <dependency>
        <groupId>org.slf4j</groupId>
        <artifactId>slf4j-simple</artifactId>
        <version>1.7.26</version>
    </dependency>
</dependencies>

Trong ví dụ này chúng ta sẽ tạo 1 form HTML và gửi request đến Java Backend của chúng ta cũng cùng nằm trong webapp này. Cũng tương tự với như chúng ta dùng Spring Boot với Thymeleaf vậy, các bạn có thể tìm hiểu thêm ở đây

Cấu hình cho Java Backend

import java.util.HashMap;
import java.util.Map;

import io.javalin.Javalin;

public class Main {

    static Map<String, String> reservations = new HashMap<String, String>() ;

    public static void main(String[] args) {

        Javalin app = Javalin.create()
            .enableStaticFiles("/public")
            .start(8899);

        app.post("/make-reservation", ctx -> {
            reservations.put(ctx.formParam("day"), ctx.formParam("time"));
            ctx.html("Your reservation has been saved");
        });

        app.get("/check-reservation", ctx -> {
            ctx.html(reservations.get(ctx.queryParam("day")));
        });
    }
}

Như đã giới thiệu ở bài trước, trong hàm main của chương trình chúng ta khai báo cấu hình cho Javalin. Trong ví dụ này chúng ta sẽ tạo 1 enpoint make-reservation với  phương thức Post  để nhận vào 1 Reservation (đặt chỗ) với 2 tham số là day và time biểu diễn cho ngày giờ. Và 1 endpoint nữa với phương thức GET để lấy ra danh sách các Reservation theo ngày.

Tạo Form HTML

Chúng ta sẽ làm form HTML index.html để tương tác với endpoint POST tạo Reservation ở trên. Form này sẽ được đặt trong folder /resources/public/

<h2>Make reservation:</h2>
<form method="post" action="/make-reservation">
    Choose day
    <select name="day">
        <option value="saturday">Saturday</option>
        <option value="sunday">Sunday</option>
    </select>
    <br>
    Choose time
    <select name="time">
        <option value="8:00 PM">8:00 PM</option>
        <option value="9:00 PM">9:00 PM</option>
    </select>
    <br>
    <button>Submit</button>
</form>

Khi bấm submit, form sẽ gửi request đến endpoint "/make-reservation" và tạo 1 Reservation mới, trong ví dụ này xử lý đơn giản tạo ra 1 object Reservation và thêm vào trong Map<String, String> reservations. Website sẽ trả về kết quả "Your reservation has been saved", Reservation mới đã được tạo thành công.

Kiểm tra danh sách các Reservation

<h2>Check your reservation:</h2>
<form method="get" action="/check-reservation">
    Choose day
    <select name="day">
        <option value="saturday">Saturday</option>
        <option value="sunday">Sunday</option>
    </select>
    <br>
    <button>Submit</button>
</form>

Chúng ta sẽ thêm đoạn code trên vào file /resources/public/index.html , tạo thêm 1 form nữa với tùy chọn Saturday hoặc Sunday để lấy ra các danh sách Reservation trong ngày đó.

Trong ví dụ này chúng ta tập trung vào việc nhận Request từ người dùng và trả về Response tương ứng và đơn giản hóa các logic xử lý. Bài tiếp theo sẽ hướng dẫn các bạn tạo 1 website quản lý thư viện sách đơn giản với các trang view danh sách, view detail sản phẩm trên Front-end và phân tầng xử lý Controller, Service cho Backend.

Chúc các bạn thành công.

AutoCode.VN