PHẦN 8 : CÁCH THỨC LÀM VIỆC CỦA SERVLET VỚI DỮ LIỆU ẢO 

- Trong bài này chúng ta sẽ cùng nhau thực hiện việc thao tác với dữ liệu ảo hay còn gọi là dữ liệu được add cứng.

- Để chuẩn bị cho bài này trước tiên bạn hãy down file css này của tôi để phục vụ cho phần giao diện của web >  style.css 

- Ở trong css này tôi đã thiết kế giao diện cho button và table để hiển thị trên website, bạn có thể tùy chỉnh giao diện theo cách của bạn bằng cách thêm vào css theo ý muốn.

* Bước 1: Tạo 1 Web Application (WA) . Hãy copy file style.css bạn vừa tải ở trên vào folder Web Pages thuộc WA bạn vừa tạo. Sau đó hãy nhập đoạn code này :

    - Ở trong thẻ <input> tôi có kế thừa class="btn" đó là phần giao diện tôi đã viết ở phần css

* Bước 2 : Tạo 1 class Data gán vào Package Entity

Chúng ta sẽ định nghĩa thuộc tính và viết contructor cho class như sau: 

* Bước 3 : Tạo 1 class DataSource gán vào Package Ds 

Chúng ta sẽ truyền dữ liệu vào đây thông qua List<>, dữ liệu này bạn có thể thêm vào tùy ý nhưng nên nhớ chỉ truyền vào 2 thuộc tính vì contructor tôi tạo ở trên chỉ có 2 thuộc tính

* Bước 4 : Tạo 1 Servlet gán vào package Servlet. Sau khi tạo xong  chúng ta nhập code như sau :

 - Ở đây có 2 điều bạn nên ghi nhớ :

       1. Cách để thêm css trong servlet : 

             out.println("<link href='style.css' rel='stylesheet' type='text/css'>"); 

        Phần href tôi chỉ điền tên file vì khi ở trên tôi đã thêm file này vào trong thư mục Web Pages thuộc Web Application, vậy nếu bạn muốn copy file css của bạn sang nơi khác hãy chỉnh sửa lại đường dẫn này cho phù hợp.

       2. Cách sử dụng css trong servlet :

             out.println("<div class=\"tbl\">");

Hãy sử dụng class=\"Tên thuộc tính của css bạn muốn kế thừa\" để sử dụng css

Vậy là bạn đã thực hiện xong bài học ngày hôm này đây là 1 số hình ảnh mà bạn sẽ đạt được :

                          

Với cách làm này bạn có thể quản lý dữ liệu 1 cách dễ dàng vì các file được sắp xếp rất gọn gàng nhưng vẫn có 1 nhược điểm là bạn sẽ khó khăn trong việc viết code html trong Servlet.

Bạn có thể tùy chỉnh để cho giao diện có thể đẹp hơn nhưng tôi hi vọng bài viết của tôi sẽ giúp ích cho bạn. Cảm ơn vì đã theo dõi bài viết này. Have fun

Bạn có thể tải bản full của bài hôm nay tại đây