LVTN công cụ thiết kế CSDL online- tập trung nghiêu cứu xây dựng một công cụ hỗ trợ thiết kế cơ sở dữ liệu trên nền tảng web

LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

Mục lục
CHƯƠNG 1: TỔNG QUAN......................................................................................................................4
1.1 ĐẶT VẤN ĐỀ.................................................................................................................................4
1.2 LỊCH SỬ GIẢI QUYẾT VẤN ĐỀ.......................................................................................................4
1.3 PHẠM VI CỦA ĐỀ TÀI...................................................................................................................5
1.4 PHƯƠNG PHÁP NGHIÊN CỨU VÀ GIẢI QUYẾT VẤN ĐỀ................................................................6
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT..............................................................................................................9
2.1 MƠ HÌNH DỮ LIỆU QUAN NIỆM (cdm)[1]....................................................................................9
2.1.1 Các đối tượng của mơ hình dữ liệu quan niệm...................................................................10
2.1.2 Các bước xây dựng mơ hình dữ liệu quan niệm..................................................................13
2.1.3 Chuyển từ mơ hình dữ liệu quan niệm sang mơ hình vật lý (PDM).....................................14
2.1.4 Mysql .................................................................................................................................16
2.2 FRAMEWORK GWT....................................................................................................................20
2.2.1 Tổng quan về tập hợp các công cụ cao cấp của GWT [2]....................................................20
2.2.2 Các chức năng cơ bản trong GWT.......................................................................................22
2.3 GOOGLE APP ENGINE VÀ DATASTORE[4]...................................................................................34
2.3.1 Google App Engine .............................................................................................................34
2.3.2 Datastore............................................................................................................................35
2.4 SỬ DỤNG OAUTH 2.0 ĐỂ TRUY CẬP CÁC GOOGLE API...............................................................37
CHƯƠNG 3: NỘI DUNG NGHIÊN CỨU VÀ KẾT QUẢ.............................................................................47
3.1 PHÂN TÍCH YÊU CẦU..................................................................................................................47
3.1.1 Yêu cầu chức năng: ............................................................................................................47
3.1.2 Yêu cầu phi chức năng........................................................................................................48
3.2 THIẾT KẾ TỔNG QUAN................................................................................................................49
3.2.1 Kiến trúc phần mềm............................................................................................................49
3.2.2 Mơ hình triển khai ứng dụng..............................................................................................51

SVTH: Đinh Hoàng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 1


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

3.2.3 Giải quyết vấn đề đồ họa....................................................................................................52
3.3 LƯU TRỮ SƠ ĐỒ.........................................................................................................................64
3.3.1 Cấu trúc file xml..................................................................................................................64
3.3.2 Sử dụng datastore trong lưu trữ.........................................................................................66
3.4 CÁC GIẢI THUẬT CHUYỂN ĐỔI GIỮA CÁC LƯU ĐỒ.....................................................................70
3.4.1 Giải thuật chuyển từ CDM sang PDM.................................................................................70
3.4.2 Giải thuật chuyển từ PDM sang Mysql................................................................................77
3.5 XÁC THỰC VÀ CHỨNG THỰC KHI TRUY CẬP GOOGLE API..........................................................83
3.6 KẾT QUẢ ...................................................................................................................................84
CHƯƠNG 4: TỔNG KẾT........................................................................................................................86
4.3 KẾT QUẢ ĐẠT ĐƯỢC..................................................................................................................86
4.4 HẠN CHẾ....................................................................................................................................86
4.5 HƯỚNG PHÁT TRIỂN..................................................................................................................87

SVTH: Đinh Hoàng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 2

LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

DANH MỤC TỪ VIẾT TẮT
STT

1

Từ viết tắt /
thuật ngữ

Giải thích

CSDL
Cơ Sở Dữ Liệu

2

API

Application Programming Interface

3

GWT

Google Web Toolkit

4

XML

Extensible Markup Language

5

HTML

HyperText Markup Language

6

SQL

Structured Query Language

7

UML

Unified Modeling Language

8

CDM

Conceptual Data Model

9

PDM

Physical Data Model

10

PHP

11

JSNI

Hypertext Preprocessor
Javascript native interface

SVTH: Đinh Hoàng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 3


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

CHƯƠNG 1: TỔNG QUAN

1.1 ĐẶT VẤN ĐỀ
Điện toán đám mây là cơng nghệ được nói đến nhiều nhất trong năm. Trước
đây, sự phát triển của web 2.0 làm tăng khả năng tương tác với người dùng và làm
phát sinh ra ý tưởng phần mềm như một dịch vụ. Môt phần mềm chạy trên nền
tảng web, người dùng có thể truy cập và sử dụng mọi lúc mọi nơi mà không quan
tâm tới vấn đề cài đặt, bảo trì, nâng cấp. Một phần mềm độc lập với nền tảng thậm
chí là thiết bị. Một điều thú vị ở đây là cách chúng ta thanh tốn khi sử dụng sản
phẩm, khơng giống như ngành kinh doanh phần mềm truyền thống, thay vì phải
mua trọn gói thì người dùng chỉ chi trả chi phí cho những gì mình sử dụng, có thể
tính theo tháng, theo giờ hay theo dịch vụ tùy nhà cung cấp. Đến thời đại của điện
tốn đám mây, thì nó khơng còn là ý tưởng mà trở thành xu hướng. Một xu hướng
mới, một xu hướng tác động mạnh đến nền công nghệ phần mềm, làm thay đổi
cách mà người ta phát triển ứng dụng, cách mà người ta kinh doanh phần mềm.
Xu hướng đã xuất phát từ những ứng dụng doanh nghiệp như CRM của
salesforce.com hay ERP… Ngày nay các nhà cung cấp dịch vụ đám mây công
cộng cũng đã và đang xây dựng cho các nhà phát triển của họ một môi trường phát
triển trực tuyến (online) như công cụ Visualforce của Salesforce hay theo
infoworld, môi trường phát triển ứng dụng dựa trên nền tảng web Orion của tổ
chức Eclipse được hy vọng tương lai không xa sẽ thay thế những công cụ phát
triển truyền thống. Theo xu hướng đó, nhóm thực hiện đề tài đề xuất ý tưởng
nghiên cứu, thiết kế, cài đặt một công cụ hỗ trợ việc mơ hình hóa trong giai đoạn
phân tích và thiết kế phần mềm dựa trên nền tảng web với công nghệ điện toàn
đám mây.
1.2 LỊCH SỬ GIẢI QUYẾT VẤN ĐỀ
Trước đây, những cơng cụ mơ hình hóa mạnh chủ yếu trên nền tảng
Window như Powerdesigner của Sybase hay Rational Rose của IBM. Đây điều là
các công cụ phổ biến, mạnh mẽ nhưng đa số là ứng dụng desktop và phụ thuộc
vào nền tảng, giá thành tương đối cao. Và khi chúng ta đã quen sử dụng chúng
nhưng chúng ta lại phải thay đổi nền tảng sử dụng ví dụ như từ window sang
Ubuntu hay một thiết bị di động như máy tính bảng thì rất khó để có một ứng dụng

tương tự. Chúng ta phải tích lũy kinh nghiệm từ đầu khi sử dụng cơng cụ mới
hồn tồn với chúng ta và chưa chắc chúng hỗ trợ tốt hơn công cụ trước đây. Và
một điều nữa là đôi khi dự án của chúng ta kéo dài 1 năm và việc sử dụng công cụ
chỉ ở tháng đầu tiên nhưng các công cụ trên buộc chúng ta phải mua bản quyền
cho cả năm thì thật lãng phí. Đối với việc cộng tác cũng có một số khó khăn, khi
SVTH: Đinh Hồng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 4


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

chúng ta cần chia sẻ mơ hình với ai đó và vấn đề là việc chia sẻ, cập nhật trao đổi
mô hình cần thường xuyên, liên tục thì thường theo truyền thống chúng ta phải
gặp nhau nhưng các công cụ online thường hỗ trợ chúng ta làm việc đó tốt hơn.
Các mơ hình sẽ được lưu trữ online và đồng bộ hóa với các client khi cần thiết.
Hiện nay, theo nhóm nghiên cứu khảo sát, có một số cơng cụ cho phép vẽ online
như: Paint của Google, lucidchart.com … nhưng các cơng cụ chủ yếu chun về
vẽ sơ đồ chưa có các chức năng hỗ trợ cho phép chuyển đổi giữa sơ đồ hay tự
động sinh mã nguồn từ sơ đồ. Chưa phải là một công cụ chuyên biệt hỗ trợ cho
lĩnh vực thiết kế phần mềm.
Trong đề tài này, sẽ tập trung nghiêu cứu xây dựng một công cụ hỗ trợ thiết
kế cơ sở dữ liệu trên nền tảng web. Cụ thể nhóm nghiên cứu sẽ phải:
• Nghiên cứu các thao tác thiết kế cơ sở dữ liệu, bao gồm mơ hình CDM, PDM
và quy tắc chuyển đổi từ CDM sang PDM.
• Nghiên cứu khả năng đồ họa trên nền tảng web của những trình duyệt, thiết kế

giải thuật đồ họa để xây dựng các công cụ cho phép người dùng vẽ các mơ
hình.
• Dựa trên các ngun tắc chuyển đổi đã nghiên cứu, thiết kế và cài đặt giải thuật
chuyển đổi từ mơ hình CDM sang PDM, PDM sang mã nguồn Sql trong Mysql
5.0.
• Nghiên cứu tìm giải pháp lưu trữ mơ hình, cho phép người dùng lưu trữ mơ
hình và mở ra để chỉnh sửa khi cần.
• Nghiên cứu triển khai ứng dụng trên nền tảng điện toán đám mây Google App
Engine của Google.
1.3 PHẠM VI CỦA ĐỀ TÀI
Trong đề tài này sẽ trình bày quá trình xây dựng ứng dụng thiết kế mơ hình
cơ sở dữ liệu trực tuyến. Chương trình hỗ trợ người dùng vẽ mơ hình dữ liệu ngữ
cảnh và mơ hình dữ liệu vật lý, cho phép chuyển từ mơ hình dữ liệu ngữ cảnh sang
mơ hình dữ liệu vật lý, chuyển từ mơ hình dữ liệu vật lý sang mã nguồn SQL
tương thích với Mysql5.0. Các vấn đề đặt ra là đồ họa trên web, khả năng tương
tác linh hoạt với người dùng, lưu trữ sơ đồ, cài đặt giải thuật đồ họa, khả năng lưu
trữ mơ hình, cài đặt giải thuật chuyển đổi giữa các mơ hình, khả năng tương thích
với nhiều trình duyệt và tốc độ xử lý.

SVTH: Đinh Hồng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 5


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

Về vấn đề đồ họa và khả năng tương tác linh hoạt, vì chương trình cho phép
người dùng vẽ các thực thể và các mối quan hệ, cho phép kéo thả, thay đổi kích
thước của thực thể. Đây đều là các nhược điểm lớn của ứng dụng web trước đây
mà phải nhờ sự hỗ trợ của flash hay applet. Nhưng trong ứng dụng không sử dụng
flash và applet chúng ta sẽ tìm giải pháp khác cho vấn đề này.
Vấn đề tính tương thích cũng là một trong những vấn đề mấu chốt trong
việc xây dựng ứng dụng web. Đặc biệt đối với ứng dụng này, để đồ họa được trên
IE chúng ta dùng ngơn ngữ Vector Graphiscs Markup nhưng các trình duyệt khác
như Chrome, Firefox sử dụng ngôn ngữ Scalable Vector Graphics.
Giải pháp cho các vấn đề trên sẽ lần lượt được đề xuất và chi tiết hơn
trong các phần sau. Sản phẩm cuối cùng của đề tài là một chương trình demo có
các chức năng trên.
1.4 PHƯƠNG PHÁP NGHIÊN CỨU VÀ GIẢI QUYẾT VẤN ĐỀ
Trong quá trình nghiên cứu, tìm kiếm các giải pháp đồ họa trên web, nhóm
quyết định chọn GWT Framework và gói thư viện SmartGwt. Đây là framework
mã nguồn mở ngơn ngữ java hỗ trợ lập trình phía client. Framework hỗ trợ mạnh
cho việc tương thích với nhiều trình duyệt và khả năng tương tác. Chúng ta sẽ thảo
luận nhiều hơn framework trong chương cơ sở lý thuyết. Ngơn ngữ xml là ngơn
ngữ thích hợp để lưu trữ mơ hình. Nhóm chọn xml vì trong framework có phần hỗ
trợ đọc và viết tài liệu xml, sẽ giúp cho việc lập trình tiện lợi hơn.
Ngồi ra các cơng nghệ được lựa chọn cũng tương thích với đám mây
Google App Engine của Google. Đám mây này hỗ trợ công nghệ java, nên dự án
chuyển khai lên đám mây cũng có thể dễ dàng chỉnh sửa lại để chạy trên đám mây
khác.

SVTH: Đinh Hoàng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 6

LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

Kế hoạch làm việc của nhóm như sau:
Thời gian

Cơng việc

3/1/2012 đến 3/2/2012

Tìm kiếm nghiên cứu thử nghiệm các giải pháp cho đồ
họa trên web như: thư viện JavaScript Closure library,
framework Railto, SVG Editor, framework GWT, thư
viện Smartgwt.

3/2/2012 đến 10/2/2012

Thiết kế cấu trúc file xml cho sơ đồ CDM, và PDM.

10/2/2012 đến 20/2/2010

Xây dựng khung chương trình.

20/2/2012 đến 2/4/2012

Nghiên cứu thiết kế giải thuật đồ họa cho các thực thể,
các mối quan hệ, xử lý các sự kiện bao gồm:

 Giải các phương trình tốn học tìm ra cơng thức
tổng qt hỗ trợ đồ họa các mơ hình.
 Cài đặt các giải thuật đồ họa.
 Xây dựng các gói đồ họa CDM.

2/4/2012 đến 9/4/2012

Xây dựng các gói PDM.

9/4/2012 đến 20/4/2012

Hồn thành gói chuyển từ CDM sang PDM bao gồm:
 Xuất từ mô hình đồ họa CDM, PDM sang file
xml.
 Nhập file xml thành mơ hình đồ họa CDM, PDM.
 Cài đặt giải thuật chuyển tài liệu xml của CDM
thành tài liệu xml PDM.

20/4/2012 đến 25/4/2012

Hồn thành gói chuyển từ PDM sang mã nguồn sql
Mysql 5.0.

25/4/2012 đến 30/4/2012

Cài đặt các gói lưu trữ sơ đồ trên hệ cơ sở dữ liệu
Datastore của Google App Engine.
Cài đặt cho phép người dùng đăng nhập bằng tài khoản
Gmail của Google.

SVTH: Đinh Hoàng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 7


LVTN: Công Cụ Thiết Kế CSDL Online
30/4/2012 đến 5/4/2012

GVHD: Ts.TRẦN CAO ĐỆ

Hồn thiện chương trình, tài liệu.

Phân cơng cơng việc:
 Lê Trần Phúc:
• Nghiên cứu cấu trúc câu lệnh sql Mysql 5.0.
• Nghiên cứu kỹ thuật phân tích tập tin xml.
• Xây dựng giải thuật chuyển đổi tập tin xml PDM sang mã nguồn sql.
• Cài đặt gói chuyển từ PDM sang mã nguồn sql tương thích với Mysql 5.0.
• Thiết kế các hình ảnh, tập tin css tăng tính thân thiện người dùng của ứng
dụng.
 Đinh Hồng Lương:
• Xây dựng khung chương trình.
• Thiết kế và cài đặt các giải thuật đồ họa cho các gói CDM và PDM.
• Cài đặt các chức năng xuất mơ hình CDM, PDM ra tài liệu xml, nhập từ tài
liệu xml sang mô hình đồ họa.
• Cài đặt giải thuật chuyển đổi từ mơ hình CDM sang mơ hình PDM.
• Cài đặt các lớp Jdo cho phép lưu tài khoản người dùng và mơ hình vào
datastore của Google App Engine.

• Cài đặt chức năng cho phép người dùng đăng nhập bằng tài khoản Gmail.

SVTH: Đinh Hoàng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 8


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
Chương này sẽ giới thiệu về các cơ sở lý thuyết được sử dụng trong đề tài.
Phần đầu tiên được nói đến là các mơ hình cơ sở dữ liệu, các lệnh sql cơ bản trong
hệ quản trị cơ sở dữ liệu Mysql 5.0, framework GWT, Google App Engine,
datastore một cách lưu trữ cơ sở dữ liệu trên đám mây google và cách xác thực và
chứng thực người dùng sử dụng giao thức Oauth 2.0 để truy cập các API của
google. Trong chương này chỉ giới thiệu tổng quan không đi sâu vào chi tiết
những ứng dụng vào đề tài, vấn đề này sẽ được đề cập trong chương sau.
Trước hết, chúng ta sẽ nghiên cứu mơ hình dữ liệu quan hệ, để thấy được
các u cầu, các chức năng chính mà chương trình hỗ trợ mơ hình hóa phải đạt
được. Tiếp theo là phần giới thiệu tổng quan về framework GWT, Google App
Engine, đây là 2 cơng nghệ kết hợp với nhau khá tốt vì chúng đều là sản phẩm của
Google, nó cũng là cơng nghệ chính được ứng dụng trong chương trình. Kế tiếp là
phần giới thiệu về datastore, cổ máy lưu trữ của đám mây google, nó được sử
dụng cho các sản phẩm, dịch vụ của google hiện nay. Cuối cùng là phần cơ sở lý
thuyết của cách thức mà giao thức OAUTH 2.0 làm việc, để giúp ta xây dựng chức
năng đăng nhập bằng tài khoản Gmail.

Giờ chúng ta sẽ bắt đầu phần đầu tiên.
2.1 MƠ HÌNH DỮ LIỆU QUAN NIỆM (CDM)[1]
Việc thiết kế cơ sở dữ liệu (CSDL) thường bắt đầu từ mức quan niệm. Với
mức quan niệm này chúng ta không cần xem xét đến chi tiết của việc thực hiện ở
mức luận lý. Mơ hình dữ liệu quan niệm mơ tả cấu trúc luận lý của một CSDL, nó
độc lập với bất cứ phần mềm hay cấu trúc dữ liệu nào. Mơ hình quan niệm thường
chứa các đối tượng dữ liệu chưa được thực hiện trong CSDL ở mức luận lý. Mơ
hình này cho ta một mơ tả hình thức của dữ liệu cần thiết cho việc thực thi của các
hoạt động kinh doanh, xí nghiệp hay cơng ty.
Mơ hình CDM cho phép:
 Mơ tả tổ chức dữ liệu dưới dạng sơ đồ quan hệ thực thể (ERDEntity Relationship Diagram)
 Kiểm tra sự hợp lệ của việc thiết kế dữ liệu.
 Sinh mơ hình dữ liệu vật lý (PDM – Physical Data Model)
 Sinh mơ hình hướng đối tượng (OOM – Oriented Model)

SVTH: Đinh Hoàng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 9


LVTN: Công Cụ Thiết Kế CSDL Online
2.1.1

GVHD: Ts.TRẦN CAO ĐỆ

Các đối tượng của mơ hình dữ liệu quan niệm

Các đối tượng cơ bản của CDM bao gồm các kiểu thực thể (entity), quan hệ

(relationship), thuộc tính (attribute), miền trị (domain), sự nhận dạng (indentifier ),
…
2.1.1.1

Kiểu thực thể (Entity types)

Kiểu thực thể là một đối tượng hay một khái niệm trong thế giới thực được
xác định bởi tố chức và nó tồn tại độc lập. Ví dụ các đối tượng như Nhan_Vien,
Khach_Hang, Hang_hoa,… hay các khái niệm trừu tượng như Mon_hoc,
Loai_hang, Giao_dich,…
Thực thể là một thể hiện của một kiểu thực thể mà nó có thể xác định một
cách duy nhất. Ví dụ, một nhân viên cụ thể là một thực thể của kiểu thực thể
Nhan_vien, nhân viên này có thể xác định duy nhất thông qua mã số nhân viên của
anh ta.
Chúng ta có thể phân loại các kiểu thực thể thành hai loại: kiểu thực thể yếu
và kiểu thực thể mạnh.
Kiểu thực thể yếu (weak entity types): là kiểu thực thể tồn tại phụ thuộc
vào một kiểu thực thể khác (Kiểu thực thể yếu có thể chứa thuộc tính hay khơng
chứa thuộc tính, cũng như có thể có khóa chính hay khơng có khóa chính).
Kiểu thực thể mạnh (strong entity types): là kiểu thực thể mà sự tồn tại
của nó khơng phụ thuộc vào kiểu thực thể nào khác.
2.1.1.2

Các kiểu quan hệ (Relationship Types)

Một kiểu quan hệ xác định mối quan hệ giữa hai kiểu thực thể. Các kiểu
quan hệ có thể có:

to one:

One


to many:

One

SVTH: Đinh Hồng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 10


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

 Many
to many:

 Quan
hệ đệ quy:

 Quan
hệ phụ thuộc
hàm:

Biển số (Cardinality):
Mỗi thực thể Entity_2 kết hợp với một và

chỉ một thực thể Entity_1. Mỗi thực thể
Entity_1 có thể khơng nhận được kết hợp
hay kết hợp chỉ một thực thể Entity_2.
Mỗi thực thể Entity_1 được kết hợp một
hay nhiều thực thể Entity_2. Mỗi thực thể
Entity_2 có thể khơng được kết hay kết
hợp chỉ một thực thể Entity_1.
Mỗi thực thể Entity_1 được kết hợp với
một hay nhiều thực thể Entity_2và mỗi
thực thể Entity_2 được kết hợp một hay

SVTH: Đinh Hoàng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 11


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

nhiều thực thể Entity_1.
Đôi khi một kiểu thực thể lại quan hệ với
chính nó với ý nghĩa kết hợp giữa hai kiểu
thực thể khác nhau…

Mỗi thực thể Entity_2 được kết hợp một
hay nhiều thực thể Entity_1. Mỗi thực thể
Entity_1 chỉ kết hợp với một thực thể

Entity_2. Đặc biệt, khi chuyển sang cơ sở
dữ liệu thì khóa của thực thể Entity_2 sẽ
tham gia vừa là khóa ngoại vừa là thành
phần khóa chỉnh của bảng Entity_1.

2.1.1.3

Thuộc tính (Attributes)

Mỗi thuộc tính sẽ mơ tả một tính chất của một kiểu thực thể.
Ví dụ: Kiểu thực thể Nhân viên được mô tả bởi các thuộc tính như mã nhân
viên, họ tên, ngày sinh và giới tính.
Miền giá trị của thuộc tính (Attribute domain) là một tập hợp các giá trị
có thể gán được cho một thuộc tính.
Các thuộc tính có thể được chia thành các loại: Thuộc tính đơn hay phúc
hợp, đơn trị hay đa trị, và cũng có thể là thuộc tính dẫn xuất.
Thuộc tính đơn (Simple attribute): là một thuộc tính tạo thành bởi nhiều
thành phần tồn tại độc lập. Ví dụ các thuộc tính đơn: mã nhân viên, giới tính.
Thuộc tính phức hợp (Composite attribute): là một thuộc itnhs tạo thành
bởi nhiều thành phần tồn tại độc lập.
Ví dụ: thuộc tính “địa chỉ” của thực thể Nhân viên có thể có 3 giá trị (Mỹ
Trung, Cái Bè, Tiền Giang) có thể được chia nhỏ thành Xã (Mỹ Trung), Huyện
(Cái Bè), Tỉnh (Tiền Giang).
Thuộc tính đơn trị (Single-valued attribute): là một thuộc tính chỉ chứa
một giá trị cho mỗi thực thể. Ví dụ như thuộc tính Mã nhân viên của thực thể
Nhân viên là đơn trị vì mỗi nhân viên chỉ có một mã nhân viên.
SVTH: Đinh Hoàng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 12


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

Thuộc tính dẫn xuất (Derived attribute): là thuộc tính có giá trị dẫn xuất
từ giá trị của một thuộc tính hoặc một tập thuộc tính có liên quan, khơng cần thiết
phải nằm trong cùng thực thể. Ví dụ: thuộc tính Age (tuổi) là thuộc tính dẫn xuất
ra từ thuộc tính ngày sinh.
Thuộc tính khóa
Khóa ứng viên (candidate key): là một thuộc tính hay một tập hợp các
thuộc tính có thể xác định duy nhất một thực thể của một kiểu thực thể.
Khóa chính (primary key): là một khóa ứng viên được chợn làm khóa
chính.
2.1.1.4

Tổng qt hóa/Chun biệt hóa:

Lớp cha (supperclass): là một kiểu thực thể bao gồm các lớp con phân biệt
cần phải thể hiện trong mơ hình.
Lớp con (subclass): là một kiểu thực thể có vai trị phân biệt và cũng là
một thành viên của lớp cha.
Ví dụ: Nhân viên/ Giám đốc có mối quan hệ lớp cha/lớp con.
Tất cả các thuộc tính của lớp cha sẽ được thừa kế cho lớp con.
Chun biệt hóa (specialization): là q trình cực đại hóa sự khác biệt
giữa các thành viên của một kiểu thực thể bằng cách xác định các tính chất khác
biệt giữa chúng.
Tổng qt hóa (generalization): là q trình cực tiểu hóa sự khác biệt

giữa kiểu thực thể bằng cách xác định các đặc điểm chung.
2.1.2

Các bước xây dựng mô hình dữ liệu quan niệm

Bước 1. Xác định các kiểu thực thể.
Bước 2. Xác định các kiểu quan hệ và biển số.
Bước 3. Xác định các thuộc tính và miền trị (domain) của nó.
Bước 4. Xác định các khóa ứng viên và khóa chính.
Bước 5. Tổng qt hóa/Chun biệt hóa các kiểu thực thể (bước tùy chọn)
Bước 6. Vẽ sơ đồ Quan hệ-Thực thể tổng quát (ERD)
Bước 7. Cùng với người dùng kiểm tra lại ERD.
SVTH: Đinh Hoàng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 13


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

2.1.3
Chuyển từ mơ hình dữ liệu quan niệm sang mơ hình vật
lý (PDM)
Qui tắc 1: Thực thể chuyển thành bảng
Mỗi thực thể chuyển thành một bảng với tên bảng là tên thực thể và các
thuộc tính của thực thể trở thành thuộc tính của bảng tương ứng.
Các thuộc tính khóa chính của thực thể cũng trở thành các thuộc tính khóa

chính của bảng tương ứng.
Các domain và các điều kiện ràng buộc (Null hay Not Null) của các thuộc
vẫn không đổi khi chuyển sang bảng tương ứng.
Qui tắc 2: Quan hệ Many – to – Many sẽ sinh ra bảng mới
Các quan hệ Many – to – Many sẽ sinh ra một bảng tương ứng với tên bảng
là tên của quan hệ tương ứng.
Khóa chính của bảng mới sinh ra gồm các thuộc tính khóa chính của 2 thực
thể tương ứng với quan hệ đó.
Các tham chiếu cũng được sinh ra tương ứng:

Chuy
ển thành

Qui tắc 3: Quan hệ One – to – Many sẽ trở thành một tham chiếu
Một quan hệ One - to – Many sẽ trở thành một tham chiếu “bảng con đến
bảng cha”. Đây là một tham chiếu từ bảng con (bảng ứng với thực thể bên nhiều)
đến bảng cha (bảng ứng với thực thể bên 1) và các thuộc tính khóa chính của thực
thể cha sẽ trở thành khóa ngoại của bảng con.
Ví dụ:

Ch
uyển
SVTH: Đinh Hồng Lương MSSV: 1081578
thànhTrần Phúc
Lê
MSSV: 1081593

Page 14

LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

Diễn giải: Bảng BANG2 ứng với thực thể BANG2 (bên 1)có khóa chính là
thuộc tính B2_ID. Bảng BANG1 ứng với thực thể BANG1 (bên nhiều) có khóa
chính là thuộc tính B1_ID và khóa ngoại là thuộc tính B2_ID.
Nếu một quan hệ One – to – Many dạng phụ thuộc hàm thì các thuộc tính
khóa chính của thực thể bên 1 khơng những trở thành khóa ngoại của bảng con mà
con tham gia vào thành phần khóa chính của bảng con.
Ví dụ:

Chuy
ển thành

Diễn giải: ứng với một quan hệ One – to – Many dạng phụ thuộc hàm, bảng
BANG2 ứng với thực thể BANG2 (bên 1) có khóa chính là thuộc tính B2_ID.
Bảng BANG1 ứng với thực thể BANG1 (bên nhiều) có khóa chính sẽ là 2 thuộc
tính B1_ID và B2_ID, đồng thời thuộc tính B2_ID cũng là khóa ngoại của bảng
BANG1.
Qui tắc 4: Đưa các quan hệ One – to – One về dạng One – to – Many và áp
dụng qui tắc 3
Đối với các quan hệ nhị phân 1 – to – 1 giữa thực thể A và thực thể B, ta
phải xác định thực thể nào là thực thể cha (có thể xem như thực thể bên 1) và thực
thể nào là thực thể con (có thể xem như thực thể bên nhiều), sau đó ta áp dụng qui
tắc 3. Việc chọn thực thể nào là thực thể cha và thực thể con sẽ tùy thuộc vào các
ràng buộc cụ thể trong mối quan hệ giữa chúng. Thực thể mà chỉ có một thành
phần các thể hiện của nó tham gia vào quan hệ được gọi là thực thể cha. Thực thể
mà toàn bộ các thể hiện của nó có tham gia vào quan hệ được gọi là thực thể con.
Qui tắc 5: Chuyển các quan hệ chuyên biệt hóa/Tổng qt hóa sang PDM

SVTH: Đinh Hồng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 15


LVTN: Cơng Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

Có 2 cách cơ bản để chuyển một quan hệ dạng chuyên biệt hóa/Tổng quát
hóa sang PDM như sau:
Cách 1: Gom tất cả thuộc tính ở tất cả thực thể con (hay thực thể chuyên
biệt hóa) tương ứng về làm thuộc tính bổ sung cho bảng ứng với thực thể cha (hay
thực thể tổng quát hóa).
Cách 2: Mỗi thực thể con sẽ chuyển thành một bảng tương ứng với thuộc
tính gồm tất cả thuộc tính của thực thể cha và tất cả thuộc tính của thực thể con.
Thực thể cha sẽ biến mất trong trường hợp này.
2.1.4

Mysql

MySQL là hệ quản trị cơ sở dữ liệu mã nguồn mở phổ biến nhất thế giới và
được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng. Vì
MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển,
hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất
mạnh.Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có
truy cập CSDL trên internet. MySQL miễn phí hồn tồn cho nên chúng ta có thể

tải về MySQL từ trang chủ. Nó có nhiều phiên bản cho các hệ điều hành khác
nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS
X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS, ...
MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu
quan hệ sử dụng Ngơn ngữ truy vấn có cấu trúc (SQL).
MySQL được sử dụng cho việc bổ trợ PHP, Perl, và nhiều ngơn ngữ khác,
nó làm nơi lưu trữ những thông tin trên các trang web viết bằng PHP hay Perl,...
Các lệnh cơ bản trong Mysql:
• Lệnh CREATE TABLE
CREATE [TEMPORARY] TABLE [IF NOT EXISTS] tbl_name
(create_definition,...)
[table_options]

Hoặc:
CREATE [TEMPORARY] TABLE [IF NOT EXISTS] tbl_name
[(create_definition,...)]
[table_options]
select_statement

Hoặc:
CREATE [TEMPORARY] TABLE [IF NOT EXISTS] tbl_name

SVTH: Đinh Hoàng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 16


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

{ LIKE old_tbl_name | (LIKE old_tbl_name) }
create_definition:
col_name column_definition

| [CONSTRAINT [symbol]] PRIMARY KEY [index_type] (index_col_name,...)
[index_type]
| {INDEX|KEY} [index_name] [index_type] (index_col_name,...)
[index_type]
| [CONSTRAINT [symbol]] UNIQUE [INDEX|KEY]
[index_name] [index_type] (index_col_name,...)
[index_type]
| {FULLTEXT|SPATIAL} [INDEX|KEY] [index_name] (index_col_name,...)
[index_type]
| [CONSTRAINT [symbol]] FOREIGN KEY
[index_name] (index_col_name,...) reference_definition
| CHECK (expr)
column_definition:
data_type [NOT NULL | NULL] [DEFAULT default_value]

[AUTO_INCREMENT] [UNIQUE [KEY] | [PRIMARY] KEY]
[COMMENT 'string'] [reference_definition]
data_type:

|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|

BIT[(length)]
TINYINT[(length)] [UNSIGNED] [ZEROFILL]
SMALLINT[(length)] [UNSIGNED] [ZEROFILL]
MEDIUMINT[(length)] [UNSIGNED] [ZEROFILL]
INT[(length)] [UNSIGNED] [ZEROFILL]
INTEGER[(length)] [UNSIGNED] [ZEROFILL]
BIGINT[(length)] [UNSIGNED] [ZEROFILL]
REAL[(length,decimals)] [UNSIGNED] [ZEROFILL]
DOUBLE[(length,decimals)] [UNSIGNED] [ZEROFILL]
FLOAT[(length,decimals)] [UNSIGNED] [ZEROFILL]
DECIMAL[(length[,decimals])] [UNSIGNED] [ZEROFILL]
NUMERIC[(length[,decimals])] [UNSIGNED] [ZEROFILL]
DATE
TIME

TIMESTAMP
DATETIME
YEAR
CHAR[(length)]
[CHARACTER SET charset_name] [COLLATE collation_name]
VARCHAR(length)
[CHARACTER SET charset_name] [COLLATE collation_name]
BINARY[(length)]

SVTH: Đinh Hoàng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 17


LVTN: Công Cụ Thiết Kế CSDL Online

|
|
|
|
|
|
|
|
|
|
|

VARBINARY(length)
TINYBLOB
BLOB
MEDIUMBLOB
LONGBLOB
TINYTEXT [BINARY]
[CHARACTER SET charset_name]
TEXT [BINARY]
[CHARACTER SET charset_name]
MEDIUMTEXT [BINARY]
[CHARACTER SET charset_name]
LONGTEXT [BINARY]
[CHARACTER SET charset_name]
ENUM(value1,value2,value3,...)
[CHARACTER SET charset_name]
SET(value1,value2,value3,...)
[CHARACTER SET charset_name]

GVHD: Ts.TRẦN CAO ĐỆ

[COLLATE collation_name]
[COLLATE collation_name]
[COLLATE collation_name]
[COLLATE collation_name]
[COLLATE collation_name]
[COLLATE collation_name]

| spatial_type
index_col_name:
col_name [(length)] [ASC | DESC]

index_type:

USING {BTREE | HASH}
reference_definition:

REFERENCES tbl_name (index_col_name,...)
[MATCH FULL | MATCH PARTIAL | MATCH SIMPLE]
[ON DELETE reference_option]
[ON UPDATE reference_option]
reference_option:

RESTRICT | CASCADE | SET NULL | NO ACTION
table_options:
table_option [[,] table_option] ...
table_option:

|
|
|
|
|

{ENGINE|TYPE} [=] engine_name
AUTO_INCREMENT [=] value
AVG_ROW_LENGTH [=] value
[DEFAULT] CHARACTER SET [=] charset_name
CHECKSUM [=] {0 | 1}
[DEFAULT] COLLATE [=] collation_name

SVTH: Đinh Hoàng Lương MSSV: 1081578

Lê Trần Phúc
MSSV: 1081593

Page 18


LVTN: Công Cụ Thiết Kế CSDL Online

|
|
|
|
|
|
|
|
|
|
|
|

GVHD: Ts.TRẦN CAO ĐỆ

COMMENT [=] 'string'
CONNECTION [=] 'connect_string'
DATA DIRECTORY [=] 'absolute path to directory'
DELAY_KEY_WRITE [=] {0 | 1}
INDEX DIRECTORY [=] 'absolute path to directory'
INSERT_METHOD [=] { NO | FIRST | LAST }
MAX_ROWS [=] value

MIN_ROWS [=] value
PACK_KEYS [=] {0 | 1 | DEFAULT}
PASSWORD [=] 'string'
ROW_FORMAT [=] {DEFAULT|DYNAMIC|FIXED|COMPRESSED|REDUNDANT|COMPACT}
UNION [=] (tbl_name[,tbl_name]...)

select_statement:

[IGNORE | REPLACE] [AS] SELECT ...

(Some legal select statement)

• Lệnh ALTER TABLE
ALTER [IGNORE] TABLE tbl_name
[alter_specification [, alter_specification] ...]
alter_specification:
table_options

| ADD [COLUMN] col_name column_definition
[FIRST | AFTER col_name ]
| ADD [COLUMN] (col_name column_definition,...)
| ADD {INDEX|KEY} [index_name]
[index_type] (index_col_name,...) [index_type]
| ADD [CONSTRAINT [symbol]] PRIMARY KEY
[index_type] (index_col_name,...) [index_type]
| ADD [CONSTRAINT [symbol]]
UNIQUE [INDEX|KEY] [index_name]
[index_type] (index_col_name,...) [index_type]
| ADD [FULLTEXT|SPATIAL] [INDEX|KEY] [index_name]
(index_col_name,...) [index_type]

| ADD [CONSTRAINT [symbol]]
FOREIGN KEY [index_name] (index_col_name,...)
reference_definition

| ALTER [COLUMN] col_name {SET DEFAULT literal | DROP DEFAULT}
| CHANGE [COLUMN] old_col_name new_col_name column_definition
[FIRST|AFTER col_name]
| MODIFY [COLUMN] col_name column_definition
[FIRST | AFTER col_name]
| DROP [COLUMN] col_name

SVTH: Đinh Hoàng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 19


LVTN: Công Cụ Thiết Kế CSDL Online

|
|
|
|
|
|
|
|
|
|

|

GVHD: Ts.TRẦN CAO ĐỆ

DROP PRIMARY KEY
DROP {INDEX|KEY} index_name
DROP FOREIGN KEY fk_symbol
DISABLE KEYS
ENABLE KEYS
RENAME [TO] new_tbl_name
ORDER BY col_name [, col_name] ...
CONVERT TO CHARACTER SET charset_name [COLLATE collation_name]
[DEFAULT] CHARACTER SET [=] charset_name [COLLATE [=] collation_name]
DISCARD TABLESPACE
IMPORT TABLESPACE

index_col_name:
col_name [(length)] [ASC | DESC]
index_type:

USING {BTREE | HASH}
table_options:
table_option [[,] table_option] ...

• Lệnh DROP TABLE
DROP [TEMPORARY] TABLE [IF EXISTS]
tbl_name [, tbl_name] ...
[RESTRICT | CASCADE]

2.2 FRAMEWORK GWT

2.2.1
[2]

Tổng quan về tập hợp các công cụ cao cấp của GWT

Vào khoảng tháng 5 năm 2006,Google xuất bản google widget toolkit
(GWT), một tập hợp những cơng cụ phát triển, những tiện ích lập trình và những
widget giúp chúng ta tạo những ứng dụng web theo cách mà trước đây chúng ta
chưa từng làm. Sự khác biệt giữa gwt và những framework khác là với gwt chúng
ta viết ứng dụng phía trình duyệt của chúng ta bằng ngơn ngữ java thay vì
javascript. Đối với những nhà lập trình java, thì đây là một tác phẩm đồ sộ vượt
qua cách lập trình javascript truyền thống. Điều đó có nghĩa , ngồi việc thuận lợi
thay thế ngơn ngữ javascript bằng java thì chúng ta cũng có thể sử dụng các cơng
cụ phát triển java mà đã có sẵn như Eclipse, Junit, Netbean… Thay vì phải cố

SVTH: Đinh Hồng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 20


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

gắng xây dựng những công cụ mới để phát triển ứng dụng phía trình duyệt bằng
JavaScript. Google thực sự đã làm nên sự biến đổi to lớn.
Sự cần thiết để viết mã nguồn java thay cho javascript là do nhu cầu các
ứng dụng web ngày càng tăng kích cở và độ phức tạp. Những ứng dụng lớn mà

khó có thể quản lý được, và java được thiết kế để làm những ứng dụng lớn đó.Khi
mà mang tất cả những thuận lợi của java đến ứng dụng web thì GWT cũng vẫn
cho phép chúng ta tương tác với javascript khi cần thiết. Khi chúng ta bắt đầu với
GWT điều đó khơng có nghĩa chúng ta phải bỏ hết tất cả mã nguồn javascript cũ
của chúng ta, GWT cố gắng để không chỉ cho phép chúng ta tương tác với mã
nguồn javascript đã tồn tại của chúng ta mà còn với những dịch vụ phía server đã
tồn tại của chúng ta.
Phần cốt lõi của GWT là trình biên dịch java-to-javascript tương thích với
Internet Explorer, Firefox, Mozilla, Safari, and Opera.Trình biên dịch chuyển các
cấu trúc của java sang javascript, cho phép chúng ta sử dụng các lớp trong gói util
như Vector, Hashmap, Vector. Và trình biên dịch kết nối chúng lại thành các
widget thường dùng như Scriptaculous, JSCalendar, và TinyMCE.
GWT cũng bao gồm nhiều widget và panel để giúp cho việc xây dựng một
ứng dụng web mà giống như một ứng dụng desktop. Thư viện widget bao gồm:
text boxes, drop-down menus, và những form fields khác. Thêm vào nữa nó bao
gồm những widget phức tạp như menu bar, tree control, dialog box, tab panel,
stack panel …
Về vấn đề giao tiếp với server, GWT hỗ trợ nhiều công cụ cho nhiều trường
hợp. Công cụ đầu tiên là cách tương tác bằng đối tượng javascript
XMLHttpRequest, một đối tượng đồng hành với việc giao tiếp bất đồng bộ bằng
ajax. Một công cụ khác được cung cấp bởi GWT là tập hợp những lớp thao tác
trên định dạng tin nhắn json, một định dạng được biết đến với tính đơn giản và
thơng dụng.Đặc biệt GWT cịn cho phép gửi một đối tượng java về server mà
không cần một định dạng tin nhắn nào trung gian.
GWT còn cho phép chúng ta giao tiếp với bất kỳ dịch vụ phía server viết
bằng ngơn ngữ nào (ví dụ php, java, python). Ngồi ra nó cịn có thể tích hợp với
các framework java khác như Java-Server Faces (JSF), Spring, Struts, and
Enterprise JavaBeans. Tính mềm dễ này của GWT cho phép chúng ta tiếp tục sử
dụng các cơng cụ phía server mà chúng ta đang sử dụng.
Nhưng để tạo một ứng dụng đậm chất web bằng java thì bao nhiêu chưa

đủ.Hướng tới mục tiêu cuối cùng, GWT còn hỗ trợ framework Test Junit và trình
SVTH: Đinh Hồng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 21


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

duyệt ở chế độ đã host đặc biệt để chúng ta phát triển và debug ứng dụng java mà
không cần triển khai đến một ứng dụng java.
Đây là những lợi ích mà GWT mang lại, cũng là nguyên nhân mà nhóm
chọn GWT. Trong mục tiếp theo sẽ giới thiệu các chức năng trong framework
GWT và so sánh nó với các kỹ thuật khác đang sử dụng hiện nay. Cuối cùng là
một ví dụ để giúp ai chưa làm quen với GWT tạo được một dự án GWT.
2.2.2

Các chức năng cơ bản trong GWT

GWT cung cấp tập hợp những công cụ tập trung giải quyết vấn đề xây dựng
những ứng dụng web như là ứng dụng desktop bao gồm một tập hợp nhiều widget
và nhiều công cụ khác. Hộp công cụ của GWT cung cấp một XML parser, những
công cụ khác nhau giao tiếp với server, quốc tế hóa ứng dụng và những cơng cụ
cấu hình , và một hệ thống quản lý lịch sử trình duyệt. Trong hình 1.1 chúng ta sẽ
thấy tổng quan về GWT, những công cụ được thể hiện ở dạng các thư viện java
tạo thành GWT API.

2.2.1.1

Thảo luận về trình biên dịch Java thành JavaScript

Để hiểu rõ GWT cung cấp gì thì chúng ta sẽ tìm hiểu cái mà định nghĩa ra
nó đó là: trình biên dịch. Trình biên dịch GWT thì làm nhiệm vụ chuyển mã nguồn
java thành javascript, cũng tương tự như trình biên dịch java chuyển mã nguồn
java thành bytecode. Để biên dịch một chương trình GWT chạy chương trình java
com.google.gwt.dev.GWTCompiler, truyền vào cho nó vị trí module và một số
tham số khác. Một module bao gồm một tập hơp các lớp các file java có liên quan

SVTH: Đinh Hồng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 22


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

cùng với một file cấu hình đơn giản. Đặc trưng của một module là một lớp entry
point, đó là một lớp mà thực thi khi dự án bắt đầu.
Trình biên dịch bắt đầu biên dịch lớp entry point cùng với những yêu cầu
kèm theo để biên dịch mã nguồn java. Trình biên dịch GWT làm việc khác với
trình biên dịch tiêu chuẩn của java bởi gì nó khơng biên dịch mọi thứ trong
module mà chỉ biên dịch những gì được sử dụng trong lớp entry point.
Trình biên dịch có ba cách để xuất ra mã nguồn javascript. Cách mặt định là
“xáo trộn”(obfuscate) làm cho mã nguồn javascript rất khó đọc, khơng có khoảng

cách giữa các câu lệnh, trơng giống như một đoạn đã bị mã hóa gần như khơng thể
đọc được. Cách này giúp chống lại các kẻ trộm mã nguồn và làm cho kích thước
file javascript nhỏ hơn rất nhiều. Nó hữu ích cho các ứng dụng lớn.đây là một ví
dụ:
function b(){return this.c + '@' + this.d();}

Cách thứ 2 là “xinh đẹp” (pretty), cách này tạo ra mã nguồn có thể đọc
được.Nó lại giữ mã nguồn java gốc và cách 1 “xáo trộn”. Như phương thức
_toString() dưới đây chúng ta có thể đọc được nội dung nhưng chúng ta khơng biết
được phương thức này viết cho lớp nào.
function _toString(){
return this._typeName + '@' + this._hashCode();
}

Cách cuối cùng là “chi tiết” (detailed), nó tạo ra mã nguồn javascript giống
như cách xinh đẹp nhưng nó thêm tên lớp như một phần của tên phương thức
javascript. Làm chúng ta dễ dàng theo dỗi mã nguồn javascript khi so sánh với mã
nguồn java gốc. Đây là một ví dụ mã nguồn được biên dịch ở chế độ “chi tiết”,
chúng ta có thể nhìn thấy phương thức _toString() được viết cho lớp
java.lang.object
function java_lang_Object_toString__(){
return this.java_lang_Object_typeName + '@' + this.hashCode__();
}

2 cách “xinh đẹp” và “chi tiết” thì thường được sử dụng trong quá trình
phát triển để mã nếu mã nguồn javascript có bị lỗi thì dễ dàng tìm được mã nguồn
java tương ứng để sửa. Còn cách “xáo trộn” thì được ưa chuộng khi được triển
khai vì nó làm kích cỡ file javascript giảm xuống và giúp giấu đi những bí mật bên
trong mã nguồn.
Một khía cạnh quan trọng khác nữa là trình biên dịch GWT khơng biên dịch

mã nhị phân java mà biên dịch trực tiếp từ mã nguồn java. Nên khi chúng ta xây
SVTH: Đinh Hoàng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 23


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

dựng những thư viện dưới dạng file jar, nó phải bao gồm cả mã nguồn java và mã
nhị phân java.
Một chức năng cuối cùng đáng chú ý là khi mã nguồn java được biên dịch
đến javascript thì trình biên dịch tạo ra ít nhất bốn đến năm file javascript để tương
thích với nhiều trình duyệt như Internet Explorer, Firefox, Mozilla, Opera, và
Safari. Đầu tiên trình duyệt sẽ chạy đoạn script bootrap để xác định đúng trình
duyệt và load đúng file yêu cầu, giúp giảm băng thông khi load ứng dụng.
Theo sơ đồ tiếp theo ta sẽ qua chức năng tương tác giữa ngôn ngữ java với
javascript với JavaScript Native Interface(JSNI).

2.2.2.2

Sử dụng JSNI thực thi mã javascript từ java.

Cho dù chúng ta viết mã nguồn java thay cho javascript, nhưng thỉnh
thoảng chúng ta cũng muốn viết mã nguồn javascript trực tiếp. Có nhiều nguyên
nhân để chúng ta muốn làm điều này, nhiều khi chúng ta muốn gọi một số api ở
phía trình duyệt mà GWT khơng có hỗ trợ. Một trường hợp thông thường khác là

chúng ta muốn sử dụng một tập thư viện javascript mà đặc biệt thì chúng ta có thể
sử dụng chức năng này.
JSNI giúp chúng ta thực thi mã nguồn javascript từ java cũng như thực thi
mã nguồn java từ javascript. Điều này có thể thực thi bởi trình biên dịch GWT,
chúng sẽ kết hợp mà javascript mà chúng ta nhúng vào với mã nguồn javascript
mà được tạo ra từ java. Đây là một ví dụ đơn giản về nó:
public native int addTwoNumbers (int x, int y)
/*-{
var result = x + y;
return result;
}-*/;

Trong java, chúng ta có thể khai báo một phương thức là native để thông
báo cho trình biên dịch biết rằng phương thức này được cài đặt bằng một ngơn
ngữ khác.Theo tài liệu lập trình java khi chúng ta khai báo một phương thức native
chúng ta không được cho phép xác định đoạn mã cài đặt định nghĩa phương thức
đó. Có thể chúng ta chưa thấy điều này trước đây, đây là cách mà cỗ máy java
được xây dựng để từ mã nguồn java chúng ta có thể gọi các thư viện đã biên dịch
được viết bằng ngôn ngữ C hoặc C++.
Khi chúng ta xem đoạn mã trên chúng ta sẽ thấy đoạn code bên trong
phương thức được chứa trong ký hiệu chú thích nhiều dịng. Bên trong chú thích
SVTH: Đinh Hồng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 24


LVTN: Công Cụ Thiết Kế CSDL Online

GVHD: Ts.TRẦN CAO ĐỆ

này là mã nguồn javascript chúng ta nhúng vào. Khi phương thức này thực thi thì
đoạn mã này được thi. Điều này làm thỏa mãn yêu cầu không cho phép cài đặt nội
dung cho phương thức native nhưng nó đã cung cấp được đoạn Javascript mà trình
biên dịch GWT dùng để thực thi khi gọi phương thức này.
Ví dụ dưới đây truyền một danh sách đối tượng java và sử dụng javascript
để thêm 2 thành phần đến chúng:
public native void fillData (List data)tfrdu7
/*-{
::add(Ljava/lang/Object;)('item1');
::add(Ljava/lang/Object;)('item2');
}-*/;

Bởi vì chúng ta gọi phương thức add trong một đối tượng java nên chúng ta
phải sử dụng một cấu trúc đặc biệt để cung cấp chi tiết về đối tượng và phương
thức chúng ta tham chiếu. Ở đây chúng ta đã để cho trình biên dịch GWT biết rằng
phương thức add là của gói java.util.List và tham số đầu vào là một đối tượng
java.lang.Object. Chúng ta sẽ dễ dàng làm việc nếu chúng ta hiểu cấu trúc đặc biệt
của nó, chúng ta có thể nhúng vào bất kỳ đoạn mã javascript.
Tiếp theo chúng ta sẽ nói về JRE emulation nhưng trong hình 1.1. Đây là
một sự tham chiếu giữa các lớp java trong java runtime environment đến các lớp
tương tự trong javascript.
2.2.2.3

Truy cập đến thư viện JRE emulation

Vấn đề đặt ra là, chúng ta có thể sử dụng các lớp trong gói jre vào trong dự
án khơng, trình biên dịch GWT có hiểu và biên dịch được chúng thành javascript
không hay chỉ sử dụng trong vùng bộ API mà GWT cung cấp. Câu trả lời là có

nhưng có giới hạn chỉ một vài lớp trong gói java.lang và java.util.bảng 1.1 và bảng
1.2 sẽ chỉ cho chúng ta các lớp mà được sử dụng trong ứng dụng gwt của chúng ta.
Hãy xem cẩn thận có một số chi tiết quan trọng chúng ta có thể bỏ qua ví dụ như
java.util.Date thì được hỗ trợ nhưng java.util.Calendar bất kỳ cơng cụ định dạng
ngày tháng nào khác thì khơng.

SVTH: Đinh Hồng Lương MSSV: 1081578
Lê Trần Phúc
MSSV: 1081593

Page 25