Login Module using jsf

Ngày hôm nay chúng ta sẽ thực hiện một bài tập lớn, hay còn gọi là Assignment có sử dụng tất cả chức năng với 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.

2. Thực hành

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

Trước hết hãy chuẩn bị trước Database với thông tin tài khoản đăng nhập cũng như bài viết trong trang web

Giao diện trang chủ

Giao diện JSP trang đăng kí tài khoản

Giao diện JSP trang Tìm kiếm nơi du lịch mà bạn cần

Code kết nối với database

Và không thể thiếu đó là trang JSF

Và còn rất nhiều class nữa mình không thể show hết (bạn có thể tham khảo ở cuối bài). Giờ là lúc chạy ứng dụng, trang chủ

Khi chưa đăng nhập bạn chỉ xem được các bài viết giới thiệu về các điểm đến 

Bấm vào Click để chọn địa điểm để tìm kiếm, gõ từ khóa bạn muốn tìm, ví dụ ở đây là Hà Nội thì nó sẽ hiển thị ra kết quả

Khi tiến hành đăng nhập thì nó sẽ chi tiết hơn, tìm kiếm dễ dàng, các thanh tab sang thông tin khác hay có thể gửi yêu cầu cho chính chủ website này (vd ở đây là mình)

Ở đây tôi thiết kế thêm cả tính năng tìm kiếm từ trong mô tả, vd tôi gõ nơi nào đẹp ra thì có hai gợi ý trên

Nhấn logout nếu thôi không muốn xem, nó sẽ ko lưu lại tài khoản của bạn đợt sau

Khi thoát ra bạn có thể dễ dàng tạo tài khoản mới với Creat New Account ngay dưới khung đăng nhập

Bạn có thể tham khảo ở demo này tại đây: Assignment Using JSF

3. Nhận xét:

Với JSF và Struts, tôi đã có thể làm dễ dàng một ứng dụng Java Web cho phép đăng nhập, quản lí thông tin tài khoản và truy xuất dữ liệu theo ý mình muốn. Đơn giản và nhanh hơn nhiều so với nhưng mã nguồn trước mà mình được học.

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.