Tải bản đầy đủ (.pdf) (135 trang)

TÌM HIỂU JSF FRAMEWORK VÀ ỨNG DỤNG XÂY DỰNG WEBSITE CHIA SẺ HÌNH ẢNH

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (6.58 MB, 135 trang )

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC NÔNG LÂM TP HCM
KHOA CÔNG NGHỆ THÔNG TIN

LUẬN VĂN TỐT NGHIỆP
TÌM HIỂU JSF FRAMEWORK
VÀ ỨNG DỤNG XÂY DỰNG
WEBSITE CHIA SẺ HÌNH ẢNH
Ngành

: Công Nghệ Thông Tin

Niên khoá

: 2008-2012

Lớp

: DH08TD

Sinh viên thực hiện : Mai Anh Phương
Trần Thị Kim Phụng

TP.HỒ CHÍ MINH, tháng 3 năm 2013


BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC NÔNG LÂM TP HCM
KHOA CÔNG NGHỆ THÔNG TIN

LUẬN VĂN TỐT NGHIỆP


TÌM HIỂU JSF FRAMEWORK
VÀ XÂY DỰNG WEBSITE CHIA
SẺ HÌNH ẢNH

Giáo viên hướng dẫn:

Sinh viên thực hiện:

Ths. Mai Anh Thơ

Mai Anh Phương
Trần Thị Kim Phụng

TP.HỒ CHÍ MINH, tháng 3 năm 2013


CÔNG TRÌNH HOÀN TẤT TẠI TRƯỜNG ĐẠI HỌC
NÔNG LÂM TP HCM

Cán bộ hướng dẫn: ThS. Mai Anh Thơ

Cán bộ phản biện: ThS. Lê Phi Hùng

Luận văn cử nhân được bảo vệ tại HỘI ĐỒNG CHẤM LUẬN VĂN CỬ
NHÂN TRƯỜNG ĐẠI HỌC NÔNG LÂM TP HCM ngày….tháng….năm….


CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

Bộ Giáo Dục và Đào Tạo

Trường ĐH NÔNG LÂM TpHCM

Độc Lập-Tự Do-Hạnh Phúc

NHIỆM VỤ LUẬN VĂN CỬ NHÂN

Họ tên sinh viên: TRẦN THỊ KIM PHỤNG

Phái: Nữ

Ngày tháng năm sinh: 02/01/1990

Nơi sinh: Bình Dương

Chuyên ngành: Công Nghệ Thông Tin

Ngành: Công Nghệ Thông Tin

Họ tên sinh viên: MAI ANH PHƯƠNG

Phái: Nam

Ngày tháng năm sinh: 19/01/1990

Nơi sinh: Bình Thuận

Chuyên ngành: Công Nghệ Thông Tin

Ngành: Công Nghệ Thông Tin


I. TÊN ĐỀ TÀI: Tìm hiểu JSF Framework và Ứng dụng xây dựng website
chia sẻ hình ảnh.
II. NHIỆM VỤ VÀ NỘI DUNG
- Tìm hiểu và nắm vững kiến thức về JSF Framework
- Ứng dụng kiến thức đã tìm hiểu vào trong việc xây dựng website chia sẻ hình
ảnh
III. NGÀY GIAO NHIỆM VỤ: 28/06/2012
IV. NGÀY HOÀN THÀNH NHIỆM VỤ: 12/3/2013
V. HỌ VÀ TÊN CÁN BỘ HƯỚNG DẪN: ThS. Mai Anh Thơ

Ngày…./…./….

Ngày…./…./….

Ngày…./…./….

CÁN BỘ HƯỚNG DẪN

CHỦ NHIỆM CHUYÊN NGÀNH

KHOA CNTT


LỜI CẢM ƠN

Chúng em xin chân thành cảm ơn các thầy cô khoa Công Nghệ
thông tin trường Đại học Nông Lâm TP.HCM, với những kiến thức quý
báu và sự nhiệt huyệt, tận tụy mà thầy cô đã truyền đạt cho chúng em
trong suốt 4 năm học.
Chúng con xin gởi đến cha mẹ lời ghi ơn sâu sắc, những người đã

sinh ra và dạy bảo chúng con trưởng thành đến ngày hôm nay.
Đặc biệt, chúng em xin cảm ơn cô ThS.Mai Anh Thơ đã tận tình
hướng dẫn chúng em suốt thời gian qua để chúng em hoàn thành luận
văn này.
Xin chân thành cảm ơn anh Thiện đã giúp đỡ chúng em rất nhiều
trong việc đưa ra yêu cầu cũng như các kiến thức về ảnh.
Mặc dù chúng em đã cố gắng hoàn thành tốt luận văn trong phạm
vi và khả năng cho phép nhưng chắc chắn sẽ không tránh khỏi những
thiếu sót nhất định. Chúng em kính mong nhận được sự cảm thông và
tận tình chỉ bảo của quý thầy cô và các bạn.
Chúng em kính gửi lời chúc sức khỏe dồi dào và thành đạt đến quý
thầy cô và các bạn.



Xây dựng Website chia sẻ hình ảnh.

DANH SÁCH CHỮ VIẾT TẮT
CSDL

Cơ Sở Dữ Liệu

GUI

Graphic User Interface

JSF

Java Server Faces


JVM

Java Virtual Machine

MVC

Model-View-Controller

UI

User Interface

GVHD: ThS. Mai Anh Thơ

i

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.

DANH MỤC CÁC HÌNH
Hình 2.1: Trang chủ Flickr.............................................................................................. 2 
Hình 2.2: Trang chủ Photobucket ................................................................................... 3 
Hình 2.3: Trang chủ Shutterfly ....................................................................................... 5 
Hình 2.4: Trang chủ Picasa ............................................................................................. 6 
Hình 3.1: Quy trình nghiệp vụ ........................................................................................ 9 
Hình 3.2: Yêu cầu phi chức năng của hệ thống ............................................................ 15 
Hình 3.3: Use case của Actor ........................................................................................ 17 
Hình 3.4: Use case của Hệ thống .................................................................................. 17 

Hình 3.5: Use case của Admin ...................................................................................... 18 
Hình 3.6: Use case của Khách ...................................................................................... 19 
Hình 3.7: Use case của Thành viên ............................................................................... 20 
Hình 3.8: Toàn bộ Use case .......................................................................................... 21 
Hình 3.9: Kiến trúc hệ thống......................................................................................... 45 
Hình 3.10 Kiến trúc phần mềm ..................................................................................... 46 
Hình 3.11: Class diagram .............................................................................................. 47 
Hình 3.12: Màn hình quảng cáo về website .................................................................. 48 
Hình 3.13: Màn hình trang chủ ..................................................................................... 49 
Hình 3.14: Màn hình đăng nhập ................................................................................... 50 
Hình 3.15: Màn hình trang cá nhân .............................................................................. 51 
Hình 3.16: Màn hình cây thư mục trong trang cá nhân ................................................ 52 
Hình 3.17: Màn hình tùy chỉnh thông tin cá nhân ........................................................ 53 
Hình 3.18: Màn hình đăng nhập của admin .................................................................. 54 
Hình 3.19: Màn hình quản lý tài khoản của admin ....................................................... 55 
Hình 3.20: Màn hình quản lý ảnh của admin ................................................................ 55 
Hình 4.1: Các dịch vụ của JSF ...................................................................................... 59 
Hình 4.2: Mô hình MVC trong JSF Framework ........................................................... 60 
Hình 4.3: Mô hình UI Components trong JSF .............................................................. 60 
Hình 4.4: Mô hình Static và Dynamic .......................................................................... 62 
Hình 4.5: Vòng đời của ứng dụng JSF.......................................................................... 63 
GVHD: ThS. Mai Anh Thơ

ii

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.


Hình 4.6: Xu hướng sử dụng theo DevRates.com ........................................................ 75 
Hình 4.7: Xu hướng sử dụng theo Google Trends ........................................................ 75 

GVHD: ThS. Mai Anh Thơ

iii

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.

DANH MỤC CÁC LƯỢC ĐỒ
 

Lược đồ 1: Lược đồ Đăng ký ........................................................................................ 23 
Lược đồ 2: Lược đồ Đăng nhập .................................................................................... 25 
Lược đồ 3: Lược đồ Xem ảnh ....................................................................................... 27 
Lược đồ 4: Lược đồ Tìm kiếm ...................................................................................... 29 
Lược đồ 5: Lược đồ Bình luận ảnh ............................................................................... 30 
Lược đồ 6: Lược đồ Upload ảnh ................................................................................... 32 
Lược đồ 7: Lược đồ Quản lý thông tin cá nhân ............................................................ 34 
Lược đồ 8: Lược đồ Quản lý Album............................................................................. 36 
Lược đồ 9: Lược đồ Quản lý ảnh .................................................................................. 39 
Lược đồ 10: Lược đồ Quản lý ảnh của Admin ............................................................. 41 
Lược đồ 11: Lược đồ Quản lý tài khoản của Admin .................................................... 43 
Lược đồ 12: Lược đồ Tạo tài khoản của Admin ........................................................... 44 
Lược đồ 13: Lược đồ Chỉnh sửa tài khoản của Admin ................................................. 44 

GVHD: ThS. Mai Anh Thơ


iv

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.

DANH MỤC CÁC BẢNG
 

Bảng 2.1: Bảng so sánh các dịch vụ lưu trữ ảnh trực tuyến ........................................... 7 
Bảng 4.1: Bảng các thẻ JSF core .................................................................................. 70 
Bảng 4.2: Bảng các thuộc tính của Attribute, Parameter và Facet ............................... 71 
Bảng 4.3: Bảng các thẻ Input trong JSF HTML ........................................................... 71 
Bảng 4.4: Bảng các thẻ Output trong JSF HTML ........................................................ 71 
Bảng 4.5: Bảng các thẻ Command trong JSF HTML ................................................... 72 
Bảng 4.6: Bảng các thẻ Selection trong JSF HTML..................................................... 72 
Bảng 4.7: Bảng các thẻ Layout trong JSF HTML ........................................................ 72 
Bảng 4.8: Bảng các thẻ DataTable trong JSF HTML ................................................... 72 
Bảng 4.9: Bảng các thẻ Message trong JSF HTML...................................................... 72 
Bảng 4.10: Bảng các thuộc tính thông dụng của JSF HTML ....................................... 73 
 

GVHD: ThS. Mai Anh Thơ

v

SVTH: Anh Phương, Kim Phụng



Xây dựng Website chia sẻ hình ảnh.

TÓM TẮT
Với khối lượng công việc nhiều như hiện nay thì không thể thiếu những lĩnh vực
giải trí để giải tỏa bớt những áp lực và sự căng thẳng sau một ngày dài làm việc. Một
trong những lĩnh vực giải trí được nhiều người ưu chuộng nhất hiện nay là dịch vụ
chơi ảnh.
Nhằm hỗ trợ tối đa và đem lại dịch vụ lưu trữ cũng như quản lý hình ảnh tốt nhất
để phục vụ cho nhu cầu chơi ảnh của người chơi trong việc lưu trữ cũng như quản lý
ảnh trực tuyến, chúng tôi đã tiến hành xây dựng website chia sẻ hình ảnh.
Trong quá trình xây dựng, nhóm đã chọn ngôn ngữ lập trình là Java, framework
được sử dụng là JSF (là một UI framework cho việc xây dựng các ứng dụng web
chạy trên Java server và thay thế UI phía sau cho client), cùng với thành phần mở
rộng của nó là Primefaces (là bộ thư viện mã nguồn mở với các thành phần mở rộng
khác của JSF). Ngoài ra, còn có một số công nghệ hỗ trợ khác như: Gif4j (là bộ thư
viện Java, nó cung cấp các giải pháp xử lý hình ảnh một cách toàn diện, mạnh mẽ với
hiệu suất cao), Metadata Extractor (là bộ thư viện Java dùng để đọc siêu dữ liệu từ
các tập tin hình ảnh).
Hệ thống xây dựng hoàn chỉnh có những chức năng cơ bản của một website chia
sẻ hình ảnh trực tuyến như: upload ảnh, tìm kiếm ảnh, xem ảnh ở nhiều chế độ, bình
luận ảnh…
Trong quá trình tìm hiểu và xây dựng hệ thống đã giúp nhóm nghiên cứu nắm rõ
hơn về JSF framework và thành phần mở rộng của nó là Primefaces, nắm vững về
quy trình nghiệp vụ của website chia sẻ hình ảnh.

GVHD: ThS. Mai Anh Thơ

vi


SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.

MỤC LỤC
 

Chương 1 ........................................................................................................................ 1 
MỞ ĐẦU ........................................................................................................................ 1 
1.1.  Lý do chọn đề tài ............................................................................................... 1 
1.2.  Phạm vi nghiên cứu ........................................................................................... 1 
Chương 2 ........................................................................................................................ 2 
TỔNG QUAN ................................................................................................................ 2 
2.1.  Khảo sát hiện trạng của các website chơi ảnh khác hiện nay............................ 2 
2.1.1.  Flickr.com.................................................................................................... 2 
2.1.2.  Photobucket.com ......................................................................................... 3 
2.1.3.  Shutterfly ..................................................................................................... 4 
2.1.4.  Picasa Web Album ...................................................................................... 6 
2.1.5.  Và một số website khác ............................................................................... 6 
2.1.6.  Đánh giá chung từ các website đã khảo sát ................................................. 7 
Chương 3 ........................................................................................................................ 8 
PHÁT BIỂU BÀI TOÁN VÀ PHÂN TÍCH YÊU CẦU ............................................ 8 
3.1.  Yêu cầu thực tế từ khác hàng ............................................................................ 8 
3.2.  Quy trình nghiệp vụ cho website chia sẻ hình ảnh ............................................ 9 
3.3.  Yêu cầu chức năng ............................................................................................ 9 
3.3.1.  Admin .......................................................................................................... 9 
3.3.2.  Khách......................................................................................................... 11 
3.3.3.  Thành viên ................................................................................................. 12 
3.4.  Yêu cầu phi chức năng .................................................................................... 15 

3.4.1.  Security ...................................................................................................... 15 
3.4.2.  Performance............................................................................................... 16 
3.5.  Phân tích các chức năng .................................................................................. 17 
3.5.1.  Lược đồ use case ....................................................................................... 17 
3.5.2.  Đặc tả use case .......................................................................................... 22 
3.5.2.1. USE CASE CHO NGƯỜI DÙNG ............................................................ 22 
1. 

Use case DangKy ...................................................................................... 22 

GVHD: ThS. Mai Anh Thơ

vii

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.

2. 

Use case DangNhap................................................................................... 24 

3. 

Use case XemAnh ..................................................................................... 25 

4. 

Use case TimKiem .................................................................................... 27 


3.5.2.2. USE CASE CHO THÀNH VIÊN ............................................................. 29 
1. 

Use case BinhLuan .................................................................................... 29 

2. 

Use case Upload ........................................................................................ 31 

3. 

Use case QuanLyThongTinCaNhan.......................................................... 33 

4. 

Use case QuanLyAlbum............................................................................ 34 

5. 

Use case QuanLyAnh ................................................................................ 37 

3.5.2.3. USE CASE CHO ADMIN ........................................................................ 39 
1. 

Use case QuanLyAnh ................................................................................ 39 

2. 

Use case QuanLyAccounts........................................................................ 41 


3.6.  Kiến trúc hệ thống ........................................................................................... 45 
3.7.  Kiến trúc phần mềm ........................................................................................ 46 
3.8.  Class diagram .................................................................................................. 47 
3.9.  Một số hình ảnh hệ thống ................................................................................ 48 
Chương 4 ...................................................................................................................... 56 
CÁC CÔNG NGHỆ SỬ DỤNG ĐỂ HIỆN THỰC BÀI TOÁN.............................. 56 
4.1.  JSF FRAMEWORK ........................................................................................ 56 
4.1.1.  Khái niệm về JSF ...................................................................................... 56 
4.1.2.  Ưu điểm của JSF ....................................................................................... 56 
4.1.3.  So sánh JSF framework với Struts framework.......................................... 57 
4.1.4.  Các thành phần của JSF............................................................................. 57 
4.1.5.  Mục tiêu của JSF ....................................................................................... 58 
4.1.6.  Các dịch vụ framework JSF ...................................................................... 59 
4.1.7.  Các thành phần chính của JSF................................................................... 60 
4.1.8.  Các pha vòng đời của ứng dụng JSF ......................................................... 62 
4.1.9.  Managed Beans ......................................................................................... 64 
4.1.10.  Message Bundles ....................................................................................... 66 
4.1.11.  Backing Beans ........................................................................................... 66 
4.1.12.  Bean Scopes .............................................................................................. 67 
4.1.13.  Configuring Beans..................................................................................... 68 
GVHD: ThS. Mai Anh Thơ

viii

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.


4.1.14.  Standard JSF Tags ..................................................................................... 69 
4.2.  PRIMEFACES ................................................................................................ 75 
4.2.1.  Primefaces là gì? ....................................................................................... 75 
4.2.2.  Xu hướng sử dụng ..................................................................................... 75 
4.2.3.  Ưu điểm của Primefaces............................................................................ 76 
4.2.4.  Các loại Components trong Primefaces .................................................... 76 
4.2.5.  Các trình duyệt hỗ trợ ................................................................................ 76 
4.2.6.  Tích hợp Primefaces vào JSF Framework ................................................ 77 
4.3.  Gif4j ................................................................................................................. 78 
4.3.1.  Tổng quan .................................................................................................. 78 
4.3.2.  Cách sử dụng ............................................................................................. 79 
4.4.  Metadata Extractor .......................................................................................... 81 
4.4.1.  Tổng quan .................................................................................................. 81 
4.4.2.  Cách sử dụng ............................................................................................. 82 
4.5.  Và một số công nghệ khác .............................................................................. 84 
Chương 5 ...................................................................................................................... 85 
PHÂN TÍCH NHỮNG KHÓ KHĂN TRONG QUÁ TRÌNH HIỆN THỰC BÀI
TOÁN VÀ ĐỀ XUẤT HƯỚNG GIẢI QUYẾT........................................................ 85 
5.1.  Primefaces 3.4.2 không hiển thị ..................................... 85 
5.2.  Dynamicly included page form first submit fail ............................................. 85 
5.3.  Lỗi khi phát triển chức năng LazyLoad ảnh.................................................... 86 
5.4.  Lỗi sử dụng trường “match” trong .......................................... 87 
5.5.  Lỗi không có hỗ trợ ajax.............................. 87 
5.6.  Lỗi trong trang <ui:include> ................... 88 
5.7.  Lỗi không gọi action bean khi nằm trong khi
không có thuộc tính appendToBody="true" ........................................... 88 
5.8.  Lỗi khi đồng thời sử dụng
chung một trang ......................................................................................................... 88 
5.9.  Các lỗi liên quan đến form .............................................................................. 89 
5.10.  Các lỗi liên quan đến update component tại các trang <ui:include> có chứa

hay ........................................................................ 91 
5.11. 

Lỗi UTF-8 trong JSF .................................................................................... 92 

5.12. 

Lỗi Packet quá lớn trong Mysql ................................................................... 97 

GVHD: ThS. Mai Anh Thơ

ix

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.

5.13.  Lỗi chỉ tìm kiếm với những từ khóa trên 3 ký tự (Hạn chế của FullText
trong MySql) .............................................................................................................. 97 
5.14.  Những từ khóa bị giới hạn trong file stopwords (Hạn chế của FullText trong
MySql) 98 
5.15. 

50% Threshold (Hạn chế của FullText trong MySql).................................. 99 

5.16. 

Lỗi MyISAM Storage Engine không hỗ trợ ForeignKey trong MySQL..... 99 


Chương 6 .................................................................................................................... 100 
KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN ........................................... 100 
6.1.  Kết quả đạt được............................................................................................ 100 
6.1.1.  Kiến thức ................................................................................................. 100 
6.1.2.  Hệ thống – Website chia sẻ hình ảnh ...................................................... 100 
6.2.  Hướng phát triển ............................................................................................ 101 
TÀI LIỆU THAM KHẢO ........................................................................................ 102 
XÂY DỰNG ỨNG DỤNG HELLO WORD VỚI JSF FRAMEWORK.................. 1 
CÀI ĐẶT ỨNG DỤNG ............................................................................................... 11 
Hướng dẫn cài đặt JDK 1.7 ........................................................................................ 11 
Hướng dẫn tạo CSDL và cấu hình CSDL cho ứng dụng ........................................ 12 
Hướng dẫn chạy ứng dụng ......................................................................................... 15 

GVHD: ThS. Mai Anh Thơ

x

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.

Chương 1
MỞ ĐẦU
1.1. Lý do chọn đề tài
Trong những năm gần đây sự phát triển mạnh mẽ của công nghệ thông tin đã
giúp đỡ con người rất nhiều trong việc lưu trữ, tìm kiếm và thống kê. Việc lưu trữ
thủ công riêng lẽ gây khó khăn trong việc tìm kiếm cũng như lưu trữ, thì giờ đây
với sự giúp đỡ của hạ tầng mạng và phần mềm, tất cả công việc lưu trữ cũng như
tìm kiếm đó đã được thực hiện một cách tự động và dữ liệu được quản lý tập trung

để có thể tìm kiếm một cách nhanh nhất.
Ngay trong lĩnh vực thư giản, giải trí như chơi ảnh cũng xảy ra những vấn đề
nan giải như: làm sao để lưu trữ hàng ngàn file ảnh mà vẫn có khả năng mở rộng,
có thể backup hoặc restore khi xảy ra lỗi; làm sao để lưu giữ các file ảnh thật tốt,
dễ dàng quản lý, tìm kiếm cũng như chia sẻ các file ảnh của mình cho mọi
người;… Để giải quyết những khó khăn trên, nhóm đã tiến hành nghiên cứu và
phát triển một website để người dùng có thể dễ dàng lưu trữ cũng như tìm kiếm các
file ảnh mình đã upload.
1.2. Phạm vi nghiên cứu





Tìm hiểu quy trình nghiệp vụ mà website chia sẻ ảnh cần có.
Tìm hiểu về JSF Framework.
Tìm hiểu về Primesfaces và tích hợp Primesfaces vào JSF Framework.
Phân tích lược đồ Use case hệ thống, phân tích kiến trúc phần mềm và kiến
trúc hệ thống từ đó tiến hành phát triển phần mềm.
 Tiến hành triển khai hệ thống ra thực tế.

GVHD: Ths. Mai Anh Thơ

1

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.


Chương 2
TỔNG QUAN
2.1. Khảo sát hiện trạng của các website chơi ảnh khác hiện nay
Dưới đây là những website cung cấp dịch vụ lưu trữ, chia sẻ ảnh miễn phí phổ
biến, được nhiều người sử dụng cũng như ưa thích nhất hiện nay mà nhóm đã khảo
sát.
2.1.1. Flickr.com
Flickr cho phép bạn tổ chức ảnh theo dạng album hay bộ sưu tập. Bạn có thể gắn
thẻ (tag) ảnh, gom ảnh thành nhóm, ghi chú, chia sẻ ảnh qua mạng xã hội, in ấn…
Flickr cung cấp ứng dụng dùng cho máy tính, di động, và công cụ biên tập ảnh dựa
trên nền web chẳng hạn cắt ảnh, loại bỏ mắt đỏ.

Hình 2.1: Trang chủ Flickr
Ưu điểm:
-

Dễ dàng thiết lập riêng tư

- Các công cụ tổ chức ảnh tốt.
- Khả năng tải phim chỉ thông qua “một cửa” dành cho tất cả các thiết bị:
máy tính, điện thoại thông minh…
GVHD: Ths. Mai Anh Thơ

2

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.


- Hỗ trợ các ứng dụng Android, iPhone giúp việc truy cập và chia sẻ ảnh
dễ dàng.
Nhược điểm:
- Tài khoản miễn phí bị giới hạn kích thước tập tin, băng thông và độ phân
giải ảnh.
-

Flickr không hỗ trợ định dạng ảnh RAW.

- Quá nhiều tính năng như gắn thẻ ảnh, nhóm, liên lạc… khiến giao diện
trở nên lộn xộn, gây cản trở với những người dùng chỉ có nhu cầu lưu
ảnh trực tuyến.
Link tham khảo: />2.1.2. Photobucket.com
Photobucket là một trong những dịch vụ lưu trữ ảnh trực tuyến khá phổ biến.
Hiện có khoảng 10 tỷ bức ảnh đang lưu trữ trên Photobucket. Dịch vụ này cho
phép người dùng tổ chức album, lưu trữ phim ảnh không giới hạn, tích hợp
Facebook và hỗ trợ ứng dụng di động.

Hình 2.2: Trang chủ Photobucket

GVHD: Ths. Mai Anh Thơ

3

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.

Ưu điểm:

- Hỗ trợ tốt các mạng xã hội giúp việc chia sẻ ảnh dễ dàng, thuận tiện.
- Ứng dụng di động có khả năng chỉnh sửa ảnh giúp bạn quản lý và truy
cập ảnh từ bất kỳ đâu.
-

Tài khoản miễn phí đủ dùng cho hầu hết các “nhiếp ảnh gia không
chuyên”.

Nhược điểm:
- Tài khoản miễn phí bị giới hạn kích thước tập tin, băng thông và độ phân
giải ảnh.
Link tham khảo: />2.1.3. Shutterfly
Shutterfly, thuộc Kodak Gallery, tiếp tục phát triển để trở thành trang web lưu
trữ ảnh lớn nhất, tập trung vào in ấn và các sản phẩm như văn phòng phẩm, lịch.
Bạn có thể tải ảnh “thoải mái”, không giới hạn dung lượng. Shutterfly hỗ trợ in ấn,
tổ chức album, chỉnh sửa ảnh, chia sẻ album.

GVHD: Ths. Mai Anh Thơ

4

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.

Hình 2.3: Trang chủ Shutterfly
Ưu điểm:
-


Không giới hạn kích thước tập tin, băng thông.

-

Hỗ trợ ứng dụng iOS, ứng dụng dành riêng cho iPad.

Nhược điểm:
- Bạn có thể lưu ảnh nguyên bản, tuy nhiên ảnh tải về là ảnh nén. Nếu
muốn ảnh nguyên bản, bạn phải mua đĩa CD lưu ảnh từ dịch vụ này.
-

Với các nhiếp ảnh gia, Shutterfly không phải là lựa chọn tốt.

-

Shutterfly hiện chưa hỗ trợ ứng dụng Android.

Link tham khảo: />
GVHD: Ths. Mai Anh Thơ

5

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.

2.1.4. Picasa Web Album
Picasa Web Album là dịch vụ lưu trữ ảnh tích hợp mạnh mẽ với mạng xã hội
Google+. Picasa Web Album cho phép chia sẻ, chỉnh sửa ảnh, tổ chức album, lưu

trữ phim và hỗ trợ ứng dụng máy tính cho quản lý hình ảnh. Với tài khoản miễn
phí, bạn có thể tải ảnh nguyên bản, độ phân giải 2048x2048 pixel, nhưng sẽ bị giới
hạn lưu trữ mức 1GB.

Hình 2.4: Trang chủ Picasa
Ưu điểm:
- Giao diện thuận tiện cho việc tải ảnh.
- Hỗ trợ nhiều định dạng tập tin.
Nhược điểm:
- Người dùng lần đầu sử dụng sẽ bối rối vì quá nhiều thông tin tích hợp từ
Google+.
- Bạn không thể tải về toàn bộ album.
Link tham khảo: />2.1.5. Và một số website khác
- Nikonvn.com – />- 500px.com – />- Pinterest.com – />GVHD: Ths. Mai Anh Thơ

6

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.

2.1.6. Đánh giá chung từ các website đã khảo sát
Các website ảnh hiện nay cung cấp rất nhiều dịch vụ thú vị cũng như rất mạnh
trong việc lưu trữ hình ảnh, có thể đáp ứng được nhu cầu của người dùng hiện nay.

Giá

Lưu trữ


Flickr

Photobucket

Shutterfly

Picasa

Standard: Miễn phí;

Standard: Miễn phí;

Miễn phí

Standard: Miễn phí;

Pro: 24,95USD/năm

Pro 24,95USD/năm

Không giới hạn

Không giới hạn

Pro: từ 2,49USD/tháng
Không

Standard: 1GB

giới hạn


Pro: 25GB - 1TB

Định dạng
tập tin

JPEG, GIF,PNG

JPEG, GIF,PNG,
JPG

JPEG

Standard, Pro: JPEG,
GIF,PNG, JPG, TIF,
TIFF, BMP, PSD, TGA,
raw

Giới hạn
kích thước
tập tin

Standard: 30MB;

Standard: 5MB;

Không

20MB


Pro: 50MB

Pro: 20MB

Giới hạn
băng
thông

Standard:
300MB/tháng;

Standard:
10GB/tháng;

Không

Không

Pro: Không giới hạn

Pro: Không giới hạn

Standard:

Standard:

Nguyên bản

<2,048 pixels;


<2,048 pixels;

Ảnh cho
web

Pro: Nguyên bản

Pro: Nguyên bản

Độ phân
giải ảnh

Bảng 2.1: Bảng so sánh các dịch vụ lưu trữ ảnh trực tuyến
Qua việc khảo sát những website, đã cho nhóm một cái nhìn toàn diện và có
kinh nghiệm hơn trong việc xây dựng một website phục vụ cho việc lưu trữ và chia
sẻ hình ảnh.

GVHD: Ths. Mai Anh Thơ

7

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.

Chương 3
PHÁT BIỂU BÀI TOÁN VÀ PHÂN TÍCH YÊU CẦU
3.1. Yêu cầu thực tế từ khác hàng
Xây dựng một website nhằm lưu trữ và chia sẻ hình ảnh trực tuyến với các chức

năng sau:
 Hỗ trợ người sở hữu dùng tất cả các chức năng đối với ảnh của
mình: Upload thêm ảnh, xóa ảnh, tạo thêm album, Upload ảnh
vào album…
 Hỗ trợ người dùng tìm kiếm ảnh từ hàng ngàn tấm ảnh mà mình
đã upload nhanh chóng.
 Hỗ trợ người dùng upload ảnh một cách nhanh chóng. Có thể
upload ảnh vào album đã tồn tại hoặc vào album mới.


Giới hạn tải ảnh: không giới hạn số ảnh upload cũng như
dung lượng ảnh nếu đã đăng kí làm thành viên.



Giới hạn dung lượng: Tùy thuộc vào từng loại tài khoản mà
có số dung lượng giới hạn khác nhau (Diamond, VIP,
Normal, Free).

 Hệ thống hỗ trợ nén hình ảnh khi người dùng upload ảnh (Giảm
kích thước, độ phân giải cũng như dung lượng ảnh) nhằm tăng
hiệu suất khi load ảnh.
 Hệ thống hỗ trợ đọc các siêu dữ liệu (metadata) của ảnh để hiển
thị các thông tin cơ bản về ảnh cho người dùng.
 Mỗi người dùng khi đăng kí sẽ có một trang cá nhân: là trang
giới thiệu về các thông tin cá nhân, thông tin liên quan đến các
thiết bị, danh sách các album cũng như các ảnh do mình upload,
… và có thể cho người khác vào xem trang cá nhân của mình
nhưng không cho phép người khác xem các album nếu album đó
là riêng tư.

 Hỗ trợ người dùng xem ảnh với nhiều độ phân giải khác nhau tùy
thuộc vào kích thước ảnh ban đầu:


Ảnh nhỏ (600*480)



Ảnh trung bình (800*640)



Ảnh lớn (1024*800)



Ảnh gốc

 Hỗ trợ người dùng xem nhiều ảnh dưới dạng slideshow.
GVHD: Ths. Mai Anh Thơ

8

SVTH: Anh Phương, Kim Phụng


Xây dựng Website chia sẻ hình ảnh.

 Hỗ trợ người dùng xem và trao đổi thông qua bình luận ảnh.
3.2. Quy trình nghiệp vụ cho website chia sẻ hình ảnh


analysis Business Process Mo...

Khach

ThanhVien

Ðang ký làm thành
viên của website

HeThong

Admin

Gửi mail xác nhận
và link kích hoạt tài
khoản

Kích hoạt tài khoản

Đăng nhập vào
website

Trở thành thành viên
của website

Upload ảnh vào trong
hệ thống và quản lý
các ảnh đã upload


Xem và tìm kiếm
các hình ảnh có
trong website

Luu trữ các hình ảnh
mà thành viên upload

Duyệt các ảnh mà thành
viên upload. Cho phép
các ảnh được hiển thị
trong website

Hiển thị các ảnh mà
admin đã duyệt và
cho phép

Hình 0.1: Quy trình nghiệp vụ
3.3. Yêu cầu chức năng
3.3.1. Admin

GVHD: Ths. Mai Anh Thơ

9

SVTH: Anh Phương, Kim Phụng


×