JSF Page comunication using param

JavaServer Faces (JSF)

1. Giới thiệu

   - Đây là công nghệ được thiết kế để hỗ trợ người sử dụng đơn giản hóa việc phát trên Web trên nền Java.  Cho phép bạn làm giao diện nhanh gọn mà không cần phải gõ lại.

   - Nếu bạn cần thiết kế web nhanh gọn thì JSF là lựa chọn hoàn hảo để giải quyết việc này, tuy không phức tạp hơn so với những cái khác nhưng chất lượng cũng được đánh giá theo điểm ưu.

Sơ đồ minh họa cho Công nghệ viết Web bằng Java.

2. Thực hành:

Ở bài trước chúng ta đã tiến hành làm một demo nhỏ sử dụng JSF page trong bài: Tạo Giao Diện Tìm Kiếm Chạy Trên JSF

Tuy nhiên ở bài đó chúng ta chỉ tìm ra được kết quả (đúng keyword) tìm kiếm, để hoàn thiện hơn lần này chúng ta sẽ thiết kế thêm nút Detail (Chi tiết) bên cạnh sản phẩm để khách mua hàng có thể thuận tiện hơn trong việc theo dõi chính xác sản phẩm đó.

Tiến hành tạo Project như bình thường có sử dụng JavaServer Faces (JSF)

Và đừng quên add thêm SqlJDBC4.jar và nhấn OK để thêm vào Project như những Project trước

Nếu bạn chưa có nó thì có thể download lại tại đây: SqlJDBC4.jar

Vẫn là database cũ mình dùng từ trước đến giờ

Khai báo giao diện tìm kiếm gian hàng truyện tranh

Khai báo các biến có trong database

Code kết nối tới database

Thêm khai báo biến cho ViewDetail qua id

Giao diện JSF của trang ViewDetail

Khởi chạy ứng dụng, ở đây mình đã thêm StyleSheet nên mới có giao diện này

Gõ keyword tìm kiếm, lần này đã có thêm nút Detail bên cạnh

Bạn có thể tham khảo demo ở đây: DemoJSFSearch2

3. Nhận xét:

Qua bài ngày hôm nay, ngoài được sử dụng lại JSF của bài trước để dễ nhớ hơn thì chúng ta đã học được cách xem thông tin chi tiết của sản phẩm.

Từ đó bạn có thể rút ngắn thông tin và giao diện, nếu người dùng cần thì bấm vào nút đó mới hiện thông tin, điều đó có thể tiết kiệm được thời gian tìm kiếm cũng như không gian thông tin.

Develop Basic Component of jsf

JavaServer Faces (JSF)

1. Giới thiệu

   - Đây là công nghệ được thiết kế để hỗ trợ người sử dụng đơn giản hóa việc phát trên Web trên nền Java.  Cho phép bạn làm giao diện nhanh gọn mà không cần phải gõ lại.

   - Nếu bạn cần thiết kế web nhanh gọn thì JSF là lựa chọn hoàn hảo để giải quyết việc này, tuy không phức tạp hơn so với những cái khác nhưng chất lượng cũng được đánh giá theo điểm ưu.

Sơ đồ minh họa cho Công nghệ viết Web bằng Java.

* Thành phần của JSF:

        - JavaBean (mô hình đối tượng trong công nghệ JSF) 
        - Các event listener.
        - Các class và JSP.
        - Các lớp helper phía server.


* Ưu điểm của JSF:

 - Tách biệt hoàn toàn giữa cách trình bày .

 - Các sự kiện dễ dàng được liên kết với mã phía máy chủ

 - Sử dụng các khái niệm thành phần UI và tầng Web (Web-tier) quen thuộc 

 -  Cung cấp nhiều dụng cụ của nhà sản xuất phần mềm đã tiêu chuẩn hóa 

 - Sự hỗ trợ IDE tuyệt vời.

2. Thực hành:

Sau đây chúng ta sẽ tiến hành làm một demo nhỏ về chức năng tìm kiếm với JSF

Tiến hành tạo Project như bình thường, nhưng chú ý tới đoạn này hãy chọn như trong hình

Và đừng quên add thêm SqlJDBC4.jar và nhấn OK để thêm vào Project như những Project trước

Nếu bạn chưa có nó thì có thể download lại tại đây: SqlJDBC4.jar

Vẫn là database cũ mình dùng từ trước đến giờ

Khai báo giao diện tìm kiếm gian hàng truyện tranh

Khai báo các biến có trong database

Code kết nối tới database

Khởi chạy ứng dụng, ở đây mình đã thêm StyleSheet nên mới có giao diện này

Gõ keyword tìm kiếm, ở đây sẽ chỉ hiện kết quả tìm ở Name vì trong database tôi gợi ý các biến ở cột đó trước. Kết quả:

Nếu bạn thích thêm cả tìm kiếm bên Price hay Author thì hãy thêm những dòng lệnh này vào cuối database (trên hình 1)

Bạn có thể tham khảo demo ở đây: DemoJSFSearch2

3. Nhận xét:

  JSF có thể giúp bạn thiết kế giao diện một cách dễ dàng, nó không giới hạn đối với HTML và HTTP. nếu so với Struts thì ngắn gọn hơn nhưng chất lượng thì cá nhân mình chưa thể đánh giá được ai hơn ai.

Dù sao các bạn cũng có một cách nữa để sử dụng và so sánh để làm với Struts
Dù sao các bạn cũng có một cách nữa để sử dụng và so sánh để làm với Struts

Integrate Struts 2 to solve complex problem (Sử dụng Struts 2 để giải quyết vấn đề)

1. Sơ lược:

Như đã quá nhiều lần mình giới thiệu về Struts 2, đây là mã nguồn mở được tập hợp để phát triển ứng dụng cũng như thiết kế giao diện.

Trước đó chúng ta đã làm về một số demo sử dụng Struts 2 trong đó như: Using Struts 2 (Sử dụng Struts 2)  |  Login using Interceptor in Struts2

Ngày hôm nay chúng ta sẽ tiếp tục thử Struts 2 để giải quyết một số vấn đề sẽ liên quan tới Assignment, trước tiên sẽ là cầu trúc của ứng dụng hôm nay:

2. Thực hành:

Thưc hiện một demo nhỏ về gian hàng của sản phẩm, trong vai trò là khách hàng bạn có thể dễ dàng tìm kiếm trước sản phẩm mình yêu thích và mua. 

Database

Để áp dụng Struts vào trong Project, khi tạo Project đến đoạn này nhớ chọn Struts 2

Nếu bạn không thấy Struts 2 thì chứng tỏ chưa cài đặt nó, hãy đọc lại bài viết đó tại đây:

Hướng dẫn cài đặt Struts2

Đây là các thư viện có sẵn của Struts2, lưu ý click chuột phải vào Libraries để add thêm một số thư viện mới có tên như trong hình

Và đừng quên add thêm SqlJDBC4.jar và nhấn OK để thêm vào Project như những Project trước

Nếu bạn chưa có nó thì có thể download lại tại đây: SqlJDBC4.jar

Giao diện code trang kết quả khi Search

Giao diện code mua hàng

Kết nối với Database

Khai báo các biến có trong Database

Phần sẽ hiển thị thông tin sản phẩm trên trang chủ

Chạy ứng dụng

Danh sách kết quả có keyword như mình đã gõ, đặt hàng nhấn Them Truyen

Nãy giờ mình làm hết 4 quyển với hóa đơn là 28 nghìn rồi 

Bạn có thể tham khảo ứng dụng tại đây: Demo Manga Cart

3. Nhận xét:

    Nếu như ở bài trước chỉ có mỗi chức năng Search thì ở demo nhỏ này, bạn có thể làm gian hàng nhỏ cho phép khách hàng đặt mua khi đã tìm kiếm. Nó sẽ giúp ích rất nhiều cho việc hoàn thiện sắp tới khi chức năng đã gần hoàn thành.

Login using Interceptor in Struts2

1. Giới thiệu qua về Interceptor:

- Interceptor đóng vai trò và hoạt động gần tương tự như một filter. (Filter là gì?)

- Interceptor được gọi đến trước khi thông tin đi đến một actions.

- Chúng ta có thể tự tạo interceptor cho từng actions riêng biệt.

2. Thực hành:

Tiến hành làm một demo tạo giao diện Login sử dụng Interceptor trong Struts2. Hãy chuẩn bị trước database

Để áp dụng Struts vào trong Project, khi tạo Project đến đoạn này nhớ chọn Struts 2

Nếu bạn không thấy Struts 2 thì chứng tỏ chưa cài đặt nó, hãy đọc lại bài viết đó tại đây:

Hướng dẫn cài đặt Struts2

Đây là các thư viện có sẵn của Struts2, lưu ý click chuột phải vào Libraries để add thêm một số thư viện mới có tên như trong hình

Và đừng quên add thêm SqlJDBC4.jar và nhấn OK để thêm vào Project như những Project trước

Nếu bạn chưa có nó thì có thể download lại tại đây: SqlJDBC4.jar

Khai báo các biến về account để Login

Code kết nối với database

File Home.java

Thông tin về file Struts XML

Khởi chạy ứng dụng, bạn có thể tự thiết kế giao diện với JS hoặc CSS tùy ý như mình

Bạn có thể tham khảo demo của mình tại đây: Login Using Struts2

3. Nhận xét: 

Trong bài hôm nay chúng ta đã được biết tới cách tạo Login vào giao diện chính thông qua Interceptor, với cách này bạn có thể đăng nhập với khả năng quản lí tốt tránh một số sự lợi dụng.
Nói cách khác Login sử dụng Interceptor là cách đăng nhập có chọn lọc.

Features, Architecture, Disadvantage and Advantage of Struts 2 (Những lợi thế và bất cập của Struts 2)

1. Architecture of Struts 2 - Kiến trúc của Struts 2

Một yêu cầu từ người dùng (Client, User) gửi yêu cầu tới Server, Server sẽ tiếp tục chuyển tiếp yêu cầu này tới Controller, đây là nơi sẽ chính sửa dữ liệu để phục vụ yêu cầu của người dùng. 

Mô hình minh họa cho cấu trúc của MVC/Struts2

Sau khi nhận được yêu cầu, Controller sẽ trả về dữ liệu cho Action và tiếp tục trả dữ liệu cho Interceptor. (Cách thực hiện với Actions và Interceptor) 

Tiếp theo nó sẽ trả kết quả đến View (ở đây là JSP) rồi lấy dữ liệu từ Value Stack. View sẽ kéo dữ liệu từ Value Stack để hiển thị cho người dùng.

2. Framework features - Các tính năng khung kết hợp:

 - POJO forms and POJO actions : Đây là một phần của khung Struts.

- Tag support : Thẻ hình thức và mới sẽ hỗ trợ các nhà phát triển viết code tốn ít thời gian hơn trước.

- AJAX và Template support : Struts2 sẽ tích hợp hỗ trợ vào các Project bằng cách tạo ra các thẻ AJAX và các Template, có chức năng tương tự như các thẻ Struts2 tiêu chuẩn. 

- Profiling : Struts2 cung cấp hồ sơ hợp để gỡ lỗi và hồ sơ của ứng dụng. Thêm vào đó, Struts cũng cung cấp tích hợp gỡ lỗi với sự giúp đỡ của xây dựng trong công cụ gỡ lỗi. 

- Easy to modify tags : Dễ dàng đánh dấu trong Struts2, không yêu cầu JSP hoặc kiến thức java. HTML cơ bản, XML và kiến ​​thức CSS là đủ để sửa đổi các thẻ.

3. Struts 2 Core Components - Thành phần chính: 

Actions - Interceptor - Value Stack - Object-Fraph Navigation - Type Conversion và Validation

Tất cả điều này mình đã nhắc đến trong bài viết: Components of Struts 2 (Thành phần của Struts 2)

4. Advantage of Struts 2 - Lợi thế: 

    -Sử dụng POJO bất kì. 

    -Hỗ trợ AJAX, tiết kiệm thời gian. 

    -Dễ dàng tích hợp và sửa đổi các thẻ 

    -Được nhiều tag hỗ trợ.

5. Disadvantage of Struts 2 - Bất cập: 

    - Đẹp hơn đấy nhưng chắc chắn phức tạp và tốn nhiều thời gian tìm hiểu hơn Struts 1

    - Khó tiếp cận và phải tự khám phá

Using Struts 2 (Sử dụng Struts 2)

1. Giới thiệu:

   - Apache Struts là một mã muốn mở được sử dụng để phát triển trên nền Java EE Web.
   - Được phát triển trên nền tảng của mô hình MVC.
   - Có các tập hợp thư viện và công cụ thích hợp để phát triển ứng dụng.

Minh họa về sơ đồ hoạt động của Struts

- Đặc điểm của nó là: tách biệt các thành phần (View, Model).
- Và các thành phần phụ thuộc ít với nhau.
- Giúp phát triển tầng giao diện Java Web trên mô hình MVC.

2. Thực hành:

Như những bài trước khi chúng ta tìm hiểu về khái niệm cũng như thành phần về Struts 2 trong giao diện Java Web. Ngày hôm hnay chúng ta sẽ tiến hành một demo nhỏ để áp dụng mã nguồn này, sau đây là hướng dẫn:

Khởi động NetBeans IDE cài đặt sẵn trong máy:

     * Tạo mới project. (File - New Project)
     * Chọn Java Web
     * Chọn Web Application
     * Đặt tên và chọn đường dẫn lưu project.

Để áp dụng Struts vào trong Project, khi tạo Project đến đoạn này nhớ chọn Struts 2

Nếu bạn không thấy Struts 2 thì chứng tỏ chưa cài đặt nó, hãy đọc lại bài viết đó tại đây:

Hướng dẫn cài đặt Struts2

Đây là các thư viện có sẵn của Struts2, lưu ý click chuột phải vào Libraries để add thêm một số thư viện mới có tên như trong hình

Và đừng quên add thêm SqlJDBC4.jar và nhấn OK để thêm vào Project như những Project trước

Nếu bạn chưa có nó thì có thể download lại tại đây: SqlJDBC4.jar

Tạo một database sản phẩm để hiện thông tin trên trang chủ

Thiết kế trang chủ với JSP hiển thị thông tin database và nút tới trang Search, có thể thêm CSS nếu bạn thích

Giao diện bên phần JSP Search, có thể thêm nút Back về trang chủ

Điểm mới đáng chú ý, hãy thêm Class Struts2 như hình dưới

Sẽ có một file mới .xml, hãy sửa lại thông tin tại trang đó

Khai báo các biến

Khởi chạy ứng dụng

Giao diện bên trang Search có thể tìm kiếm dễ dàng, không thích thì trở về trang chủ với nút Back

Bạn có thể tham khảo demo của tôi tại đây: Demo Using Struts2

3. Nhận xét:

 Sau bài tập trên, chúng ta đã học được cách sử dụng framework Struts2 trong các Project, sử dụng Actions và Config XML trong Struts 2 cũng như các biến về input, output hay execute như trong đúng hình tại đầu bài viết:

Minh họa về sơ đồ hoạt động của Struts