TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
KHOA CÔNG NGHỆ THÔNG TIN
LỚP CỬ NHÂN TÀI NĂNG LÊ HUY CHƯƠNG
LÊ NGUYỄN THIỆN ÂN XÂY DỰNG VÀ PHÁT TRIỂN ỨNG DỤNG
HỖ TRỢ THIẾT KẾ PHẦN MỀM
TRÊN MÔI TRƯỜNG WEB

KHÓA LUẬN TỐT NGHIỆP CỬ NHÂN CNTT TP. HCM, 2013
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
KHOA CÔNG NGHỆ THÔNG TIN
LỚP CỬ NHÂN TÀI NĂNG LÊ HUY CHƯƠNG – 0912041
LÊ NGUYỄN THIỆN ÂN – 0912021

XÂY DỰNG VÀ PHÁT TRIỂN ỨNG DỤNG
HỖ TRỢ THIẾT KẾ PHẦN MỀM
TRÊN MÔI TRƯỜNG WEB

………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
TP. Hồ Chí Minh, ngày … tháng …… năm 2013
Giáo viên hướng dẫn

2
NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………

TP. Hồ Chí Minh, tháng 7 năm 2013

4

Khoa Công Nghệ Thông Tin
Lớp Cử nhân tài năng
ĐỀ CƯƠNG CHI TIẾT
Tên Đề Tài: Xây dựng và phát triển ứng dụng hỗ trợ thiết kế phần mềm trên môi
trường Web.
Giáo viên hướng dẫn: TS. Nguyễn Văn Vũ
Thời gian thực hiện: từ 20/10/2012 đến 28/6/2013
Sinh viên thực hiện:
+ Lê Huy Chương - 0912041
+ Lê Nguyễn Thiện Ân – 0912021
Loại đề tài:
+ Tìm hiểu công nghệ và phát triển ứng dụng, cụ thể là tìm hiểu công nghệ lập
trình Web để xây dựng một ứng dụng Web theo yêu cầu đặc tả của đề tài.
+ Nghiên cứu và tổng hợp hiện trạng các sản phẩm liên quan đến hướng phát
triển của đề tài để làm cơ sở xây dựng, phát triển ứng dụng theo yêu cầu của đề
tài.
Nội Dung Đề Tài:
Nội dung và yêu cầu đề tài:
+ Nghiên cứu và tổng kết hiện trạng về các công cụ và môi trường hỗ trợ thiết
kế phần mềm trên môi trường Web và Desktop.
+ Nghiên cứu các công nghệ lập trình Web, các hệ thống thư viện lập trình
Web, các hệ mã nguồn mở cho phép phát triển ứng dụng Web theo giao diện
thân thiện với người dùng cuối.
+ Triển khai thiết kế và cài đặt ứng dụng dựa trên các kết quả nghiên cứu, đáp
ứng được các nhu cầu cơ bản trong hoạt thiết kế phần mềm trên môi trường
Web.

viện mã nguồn mở.
Nhóm nghiên cứu các công nghệ lập trình web hiện đại. Nghiên cứu các thư

6

viện mã nguồn mở hiện có trên thị trường. Tiến hành sử dụng thử và đánh
giá các thư viện mã nguồn mở này, từ đó lựa chọn bộ thư viện tối ưu nhất để
xây dựng hệ thống.
20/3/2013 – 14/4/2013: Thiết kế hệ thống.
Nhóm phân tích các thành phần và sự liên kế giữa các thành phần bên trong
hệ thống. Xây dựng kiến trúc tổng quát cho toàn bộ hệ thống.
15/4/2013 – 8/6/2013: Cài đặt.
Sau khi đã chọn được các thư viện mã nguồn mở thích hợp, xác định xong
kiến trúc và chức năng của hệ thống, nhóm tiến hành cài đặt hệ thống.
10/6/2013 – 28/6/2013: Tổng hợp và báo cáo.
Nhóm tổng hợp các nghiên cứu đã thực hiện, các tài liệu đã ghi chép trong
suốt quá trình làm việc; trình bày các kết quả thành bản báo cáo hoàn thiện

Xác nhận của GVHD

TS Nguyễn Văn Vũ
Ngày …… tháng …… năm 2013
Sinh viên thực hiện
Lê Huy Chương Lê Nguyễn Thiện Ân

2.2.2.! HTML5 31!
2.3.! Một số ứng dụng liên quan 33!
2.3.1.! Công cụ thiết kế phần mềm trên desktop 33!
2.3.2.! Công cụ thiết kế phần mềm trên web 34!
CHƯƠNG 3.! KHẢO SÁT VÀ XÁC ĐỊNH YÊU CẦU 36!
3.1.! Khảo sát hiện trạng. 36!
3.2.! Yêu cầu phần mềm của hệ thống 36!
CHƯƠNG 4.! THIẾT KẾ VÀ CÀI ĐẶT HỆ THỐNG 39!
4.1.! Kiến trúc tổng quan 39!
4.1.1.! Thành phần phía server 40!
4.1.2.! Thành phần phía client 42!
4.1.3.! Hệ thống Framework 43!
4.1.4.! Kết nối và giao tiếp 44!
4.2.! Thiết kế hệ thống 45!
4.2.1.! Sơ đồ lớp 45!
4.2.2.! Thiết kế giao diện 49!
4.2.3.! Cài đặt hệ thống 54!
CHƯƠNG 5.! KẾT QUẢ ĐẠT ĐƯỢC 58!
5.1.! Kiến trúc 58!
5.2.! Những tính năng quan trọng 59!
CHƯƠNG 6.! KẾT LUẬN 68!

9

6.1.
! Kết quả đạt được 68!
6.1.1.! Kiến thức tìm hiểu được 68!
6.1.2.! Các kinh nghiệm tích lũy 69!
6.1.3.! Đánh giá kết quả đạt được 69!
6.2.! Những hạn chế 70!

Hình 4-1 Kiến trúc tổng quan của hệ thống 40!
Hình 4-2 Lược đồ lớp mô tả các thành phần ở server 46!
Hình 4-3 Lược đồ lớp mô tả các thành phần đảm nhiệm vai trò đồ họa 47!
Hình 4-4 Lược đồ lớp mô tả các thành phần đảm nhiệm vai trò quản lý 48!
Hình 4-5 Thiết kế giao diện chính của hệ thống 50!
Hình 4-6 Thiết kế giao diện chức năng vẽ các lược đồ 51!
Hình 4-7 Thiết kế giao diện chức năng ghi chú 52!
Hình 4-8 Thiết kế giao diện chức năng chat (1) 53!
Hình 4-9 Thiết kế giao diện chức năng chat (2) 54!
Hình 4-10 Tổng quan các thành phần phía client 55!
Hình 5-1 Giao diện chính của hệ thống 60!
Hình 5-2 Giao diện khi tạo mới một lược đồ lớp 61!
Hình 5-3 Giao diện khi tạo mới một lược đồ use case 61!
Hình 5-4 Giao diện một lược đồ lớp hoàn chỉnh 62!
Hình 5-5 Giao diện một lược đồ use case hoàn chính 63!

11

Hình 5-6 Giao diện chỉnh sửa thuộc tính của đối tượng vẽ (1) 64
!
Hình 5-7 Giao diện chỉnh sửa thuộc tính của đối tượng vẽ (2) 65
Hình 0.1 Tích hợp với hệ thống Framework 67

12

DANH MỤC BẢNG
Bảng 2-1 So sánh HTML5 Canvas và HTML5 SVG 32!

tác với các đối tượng trong các tài
liệu HTML, XHTML, XML.
4
JSON
JavaScript Object
Notation
Một định dạng đơn giản dùng đề trao
đổi dữ liệu dữa các ứng dụng khác
nhau.
5
PDF
Portable Document
Format
Một định dạng tập tin văn bản khá
phổ biển của hãng Adobe Systems.
6
PNG
Portable Network
Graphics
Một dạng hình ảnh sử dụng phương
pháp nén dữ liệu không làm mất đi
dữ liệu gốc và đang được sử dụng
phổ biến trên Internet.
7
REST
Representational state
transfer
Một kiến trúc phần mềm để phát
triển các hệ thống phân tán siêu
phương tiện, phổ biến trong các dịch

XML
eXtensible Markup
Language
Ngôn ngữ biểu diễn dữ liệu trao đổi
giữa các hệ thống khác nhau, đặc
biệt là các hệ thống được kết nối với
Internet. 15

TÓM TẮT KHÓA LUẬN
Ngày nay công nghệ thông tin đã và đang đó vài trò quan trọng trong đời sống kinh
tế và xã hội của nhiều quốc gia trên thế giới. Nhắc đến công nghệ thông tin, chúng ta
không thể không nhắc đến công nghệ phần mềm. Hiện nay, việc phát triển phần mềm
đang là một ngành kinh tế mũi nhọn của nhiều quốc gia trên thế giới trong đó có nước
ta.
Để xây dựng một phần mềm chất lượng cao thì phải đảm bảo các công đoạn trong
quy trình phần mềm từ xác định yêu cầu phần mềm đến phân tích thiết kế, cài đặt và
kiểm thử đều phải được thực hiện chặt chẽ và chính xác. Một trong những công đoạn
quan trọng nhất trong quy trình phần mềm là phân tích và thiết kế phần mềm. Thấy
được điều đó, hàng loạt các công cụ thiết kế phần mềm ra đời nhằm hỗ trợ các lập trình
viên phát triển được các phần mềm chất lượng cao. Tuy nhiêu các công cụ hiện tại chủ
yếu là những ứng dụng chỉ thực thi được trên môi trường desktop, chi phí bản quyền
khá cao, và đồng thời thiếu sự tương tác trực tuyến cho phép nhiều người dùng cùng
lúc tham gia vào làm việc trên một bản thiết kế. Vì là sản phẩm thương mại nên các
công cụ này tập trung hướng tới người dùng là các doanh nghiệp làm phần mềm chứ
không hỗ trợ nhiều cho môi trường giáo dục vào đào tạo.
Qua đề tài này, nhóm chúng tôi muốn xây dựng một công cụ thiết kế phần mềm
miễn phí trên môi trường web có thể truy cập mọi lúc mọi nơi hỗ trợ cho các bạn sinh

1.2. Hạn chế của những công cụ thiết kế trên desktop
Để xây dựng một phần mềm chất lượng cao thì phải đảm bảo các công đoạn trong
quy trình phần mềm từ xác định yêu cầu phần mềm đến phân tích thiết kế, cài đặt và

17

kiểm thử đều phải được thực hiện chặt chẽ và chính xác. Một trong những công đoạn
quan trọng nhất trong quy trình phần mềm là phân tích và thiết kế. Công đoạn này giúp
chúng ta mô hình hóa toàn bộ hệ thống để có cái nhìn tổng quan về hệ thống sẽ xây
dựng. Từ đó xác định được tính khả thi của hệ thống, xác định rủi ro, hay ước lượng
thời gian và công sức sẽ đầu tư vào hệ thống.
Thấy được tầm quan trọng của giai đoạn này, một loạt các công cụ hỗ trợ thiết kế
phần mềm ra đời. Sau đây là sơ lược về một số công cụ hỗ trợ thiết kế phần mềm đang
rất nổi tiếng và được sử dụng rộng rãi:
• Microsoft Visio
1
: Sản phẩm thương mại của Microsoft và người dùng phải
chịu chi phí bản quyền nếu muốn sử dụng.
• Rational Rose
2
: Sản phẩm do IBM phát triển. Rational Rose cũng là một sản
phẩm có thu phí.
• ArgoUML
3
: Sản phẩm miễn phí. Vì là phần mềm miễn phí nên ArgoUML
có một số hạn chế như chỉ hỗ trợ UML 1.4
4
và ít tài liệu hướng dẫn sử dụng.
Sau quá trình tìm hiểu và sử dụng thử các công cụ trên, nhóm nhận thấy các công
cụ này có những mặt hạn chế như sau:

cho phép nhiều người dùng cùng tham gia vào làm việc chung trên một bản thiết kế. Ví
dụ như, một thành viên muốn nhận xét bản thiết kế của thành viên khác thì phải gửi
mail hoặc chat. Điều đó góp phần làm gián đoạn công việc của các thành viên trong
nhóm.
Cuối cùng là, các công cụ hiện tại đa phần là các sản phẩm thương mại và chưa
đóng góp nhiều vào giáo dục và đào tạo. Chi phí để sử dụng những sản phẩm như IBM
Rational Rose hay Microsoft Visio là quá đắt đối với sinh viên.
1.3. Nhu cầu xây dựng công cụ thiết kế tích hợp trên Web
Để khắc phục những mặt hạn chế nêu trên, trong đề tài này nhóm chúng tôi hướng
tới xây dựng một công cụ thiết kế phần mềm trên web có khả năng tích hợ
p với các hệ
thống khác như: hệ thống quản lý môn học, hệ thống quản lý dự án môn học, Wiki và
môi trường phát triển tích hợp để tạo thành một hệ thống tích hợp hỗ trợ đào tạo,
nghiên cứu và phát triển dự án trong công nghệ phần mềm trên web. Công cụ này có
các tính năng cơ bản như sau:
• Có thể dễ dàng truy cập bản thiết kế ở bất kỳ đâu nhờ vào Internet.

19

• Ứng dụng triển khai trên môi trường web nên không cần cài đặt.
• Bản thiết kế được quản lý tập trung bởi phân hệ Repository & Version Control
cho phép nhiều người dùng cùng tham gia vào làm việc.
• Bản thiết kế có thể được nhúng vào các trang Wiki cho phép chia sẻ bản thiết
kế với các thành viên trong nhóm. Các thành viên trong nhóm có thể đánh giá,
cho điểm và gửi phản hồi trực tiếp trên bản thiết kế.
• Liên kết với hệ thống quản lý môn học, các nhóm sinh viên có thể cùng nhau
xây dựng bản thiết kế vào nộp cho giáo viên theo yêu cầu.
• Cho phép các thành viên trong nhóm thiết kế phản hồi, đánh giá, và báo cáo lỗi
trực tiếp trên bản thiết kế.
• Công cụ sẽ được cung cấp miễn phí cho các khoa CNTT tại các trường đại học

Sau một thời gian dài làm việc nghiêm túc, chúng tôi đã hoàn thành khóa luận
với các kết quả nổi bật sau:
• Tổng hợp được các kiến thức hiện trạng về các công cụ hỗ trợ thiết kế phần
mềm trên môi trường desktop và web.
• Nghiên cứu và áp dụng các công nghệ phát triển web hiện đại vào đề tài.
• Xây dựng được
ứng dụng thử nghiệm cung cấp công cụ cho phép thiết kế
phần mềm trên web. Qua đó đánh giá được tính khả thi của phân hệ trong
toàn bộ hệ thống.
• Cung cấp nền tảng cho các nhóm phát triển sau có thể phát triển tiếp phân hệ
để có thể phục vụ nhu cầu thực tế.
• Tích lũy được những kiến thức quý báu về quy trình phần mềm, ngôn ngữ
mô hình hóa UML, và xây dựng một ứng web từ server đến client.

21

• Tích lũy các kinh nghiệm cần thiết để đi làm trong giới công nghiệp hay tiếp
tục còn đường học thuật như các kinh nghiệm khi làm việc nhóm, nghiên
cứu công nghệ mới và đặc biệt là kinh nghiệm phát triển một dự án đi từ pha
lấy cầu đến phân tích, thiết kế, cài đặt, kiểm thử và triển khai hệ thống.
1.6. Cấu trúc của báo cáo khóa luận
Nội dung chính của báo cáo khóa luận được trình bày từ chương 2 đến
chương 6:
Chương 2: Giới thiệu những kiến thức nền tảng cần thiết khi thực hiện đề tài.
Chương 3: Khảo sát và xác định yêu cầu của hệ thống cần xây dựng.
Chương 4: Trình bày kiến trúc và các giải pháp thiết kế được chọn lựa để xây
dựng hệ thống.
Chương 5: Trình bày sơ lược về hệ thống sau khi hoàn thành.
Chương 6: Tổng hợp những kết quả đạt được sau khi thực hiện đề tài. Đánh
giá kết quả đạt được; trình bày các hướng phát triển trong tương lai.


1
(Dịch từ
UML của Wikipedia, Bách khoa Toàn thư Mở)

23

2.1.2. Tại sao cần UML?
Là ngôn ngữ chuẩn sử dụng trong thiết kế phần mềm. UML không ngừng được
phát triển và sử dụng rộng rãi trong cộng đồng phát triển phần mềm. Đa số các công cụ
phát triển phần mềm hiện nay đều có hỗ trợ thiết kế UML ví dụ như Visual Studio hày
Eclipse,… Hay nói cách khác UML chính là ngôn ngữ giao tiếp chuẩn nhất giữa những
thành viên tham gia phát triển sản phẩm phần mềm như nhà phát triển, chuyên viên
kiểm thử phần mềm, quản lý dự án, hay thậm chí khách hàng.
Việc mô hình hóa hệ thống bằng UML giúp cho những thành viên tham gia vào
phát triển phần mềm bao gồm lập trình viên, nhà thiết kế phần mềm, kiến trúc sư phần
mềm, quản lý dự án, hay khách hàng sớm nắm rõ những yêu cầu và những kiến thức
chuyên môn của phần mềm. Từ đó nắm được tổng quan toàn bộ hệ thống, có định
hướng để thiết kế hệ thống.
Các lược đồ UML có thể dễ dàng được trao đổi qua lại giữa các công cụ thiết kế
UML nhờ vào chuẩn giao tiếp XML Metadata Interchange (XMI). XMI là một chuẩn
dùng để đặc tả các lược đồ UML bằng ngôn ngữ XML.
Hiện nay trên thị trường có rất nhiều công cụ hỗ trợ vẽ các lược đồ UML. Hầu hết
các công cũ đều hỗ trợ các chức năng vẽ các lược đồ cơ bản. Một số công cụ thương
mại hỗ trợ thêm hai chức năng rất hay đó là Code generation và Reverse engineering
(tạm dịch là phát sinh mã nguồn và dịch ngược mà nguồn).
• Code generation: là chức năng cho phép người dùng vẽ các lược đồ UML rồi
từ các lược đồ đó phát sinh mã nguồn của một số ngôn ngữ lập trình phổ
biến như C++, Java hay C#. Một xu hướng mới để phát triển phần mềm dựa
phương pháp Code geration là Model-Driven Development (MDD). Với