XÂY DỰNG WEBSITE QUẢN lý GIA PHẢ

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

TRƢỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

KHOÁ LUẬN TỐT NGHIỆP

XÂY DỰNG WEBSITE QUẢN LÝ GIA PHẢ

Giảng viên hướng dẫn : TS. Vũ Đức Lung
Sinh viên thực hiện:

Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt

Lớp
Khoá

Công nghệ phần mềm
01

:
:

06520541
06520568

TP. Hồ Chí Minh, 06 tháng 01 năm 2012

GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


LỜI MỞ ĐẦU

Việt Nam là một nước có nền văn hoá đậm đà bản sắc dân tộc,có
truyền thống yêu nước nồng nàn, uống nước nhớ nguồn. Cội nguồn dân tộc là
cái nôi, bản sắc của một đất nước, còn gia phả là cái nôi của các dòng họ, là
nơi lưu giữ những giá trị tinh thần rất thiêng liêng. Việc lưu giữ và phổ biến
cho các thành viên trong một dòng họ là việc rất cần thiết và ý nghĩa, nó giúp
cho người trong dòng họ biết rõ về tổ tiên của họ, lịch sử văn hoá sinh hoạt của
dòng họ.
Những thông tin này thông thường đư c các thành viên trong gia phả
tham khảo, tra cứu ở những vị tr có th trong một t nh thành, trong nước và
thậm ch là t các nước khác trên thế giới. Ch nh v vậy h nh thức quản lý hiệu
quả nhất là phải thông qua một website và việc nghiên cứu đ có th thiết kế
một website về gia phả với tốc độ xử lý nhanh và một giao diện đ p , đơn giản
nhưng bắt mắt với người d ng và thân thiện d sử d ng là rất cần thiết.
Hiện nay có rất nhiều website về gia phả, nhưng chúng phần lớn đư c
xây dựng tự phát, vẫn còn những hạn chế nhất định về tốc độ xử lý c ng như
giao diện. V thế, cần thiết phải có những nghiên cứu về cấu trúc, dữ liệu, và
các phương pháp hi n thị, quản lý, t m kiếm về gia phả trước khi muốn có một
website với giao diện và các chức năng như mong muốn.

GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt

LỜI CẢM ƠN
Chúng em xin gửi lời cảm ơn sâu sắc đến khoa Công Nghệ Phần Mềm,
thầy V Đức Lung đã giúp đỡ chúng em hoàn thành luận án này. Khoa Công
Nghệ Phần Mềm đã cung cấp cho chúng em các kiến thức nền tảng và chuyên
sâu, giúp chúng em dễ dàng phát tri n trên con đường sự nghiệp và tương lai
của m nh. Chúng em xin cảm ơn các giảng viên của khoa Công Nghệ Phàn
Mềm nói riêng và các giảng viên của trường nói chung đã cung cấp cho chúng
em các kiến thức hữu ch và quý báu trên con đường học tập và tương lai.
Đối với thầy V Đức Lung, thầy đã tận t nh giúp đỡ chúng em hoàn
thành tốt luận văn này, thầy đã động viên và ủng hộ chúng em giúp chúng em
vư t qua các khó khăn trong suốt quá tr nh .
Nhóm em c ng xin gửi lời tri ân sâu sắc đến gia đ nh, bạn bè những
người luôn bên cạnh động viên, chia sẻ lúc khó khăn đ nhóm có đư c kết quả
như ngày hôm nay.

Tp. Hồ Ch Minh, 06 tháng 01 năm 2012
Nhóm sinh viên thực hiện
Phan Lâm Hoàng Việt
Trần Đức Anh Tuấn

GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


NHẬN XÉT CỦA GIÁO VIÊN HƢỚNG DẪN
…………………………………………………………………………………
…………………………………………………………………………………

…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………

GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt

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

GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


MỤC LỤC
Chƣơng 1: Tổng quan đề tài ............................................................................ 1
1.1 Lý Do Chọn Đề Tài ............................................................................. 1
1.2 Mục Tiêu Đề Tài .................................................................................. 2
1.3 Đối Tƣợng Và Phạm Vi Nghiên Cứu ................................................ 2
1.4 Phƣơng Pháp Thực Hiện .................................................................... 2
1.5 Các Đề Tài Hay Ứng Dụng Tƣơng Tự .............................................. 2
Chƣơng 2: Cơ Sở Lý Thuyết............................................................................ 4
2.1 Kiến Thức Về Gia Phả ........................................................................ 4
2.1.1 Cấu Trúc Một Gia Phả ................................................................... 5
2.1.2 Cấu Trúc Dữ Liệu Cho Phả Đồ ...................................................... 5
2.2 Phần Lƣu Cache .................................................................................. 8
2.3 Tìm hiểu về Google Visualization: Organizational Chart............... 8
2.3.1 Cấu trúc dữ liệu của Org Chart ...................................................... 9
2.3.2 Các thuộc t nh của Org Chart ....................................................... 10
2.3.3 Tuỳ chọn cấu h nh Org Chart ....................................................... 10
2.3.4 Các phương thức của Org Chart ................................................... 11
2.3.5 Các sự kiện của Org Chart ........................................................... 11
2.3.6 T m hi u về Datatable và các phương thức cơ bản của nó .......... 12
2.4 Tìm Hiểu CodeIgniter ....................................................................... 18
2.4.1 Giới Thiệu .................................................................................... 18
2.4.2 Ưu Đi m ....................................................................................... 19
2.4.3 Khuyết Đi m ................................................................................ 19

2.4.4 Cài đặt........................................................................................... 20
2.4.5 Mô hình Model-View-Controller ................................................. 20
2.4.6 CodeIgniter URL .......................................................................... 25
2.4.7 Các thư viện .................................................................................. 25
Chƣơng 3: Phân tích yêu cầu Website .......................................................... 26
3.1 Yêu cầu chức năng ............................................................................ 26
3.2 Yêu cầu phi chức năng ...................................................................... 29
3.2.1 Tổng quan các yêu cầu phi chức năng ......................................... 29
3.2.2 Chi tiết các yêu cầu ...................................................................... 30
3.3 Mô hình hóa yêu cầu ......................................................................... 32
3.3.1 Cấu trúc Tác nhân (Actors) .......................................................... 32
3.3.2 Cấu trúc use case .......................................................................... 33
3.3.3 Sơ đồ tuần tự các use case (sequence diagram) ........................... 34
Chƣơng 4: Phân Tích Thiết Kế Hệ Thống Website .................................... 38
4.1 Mô hình ERD ..................................................................................... 38
4.1.1 Mô tả các thực th ........................................................................ 38
4.1.2 Danh sách các bảng trong csdl ..................................................... 41
4.1.3 Mô tả các bảng dữ liệu ................................................................. 42
4.2 Mô hình ER ........................................................................................ 45
4.2.1 Ràng buộc miền giá trị ................................................................. 45
4.2.2 Ràng buộc liên bộ ......................................................................... 46
4.2.3 Ràng buộc liên thuộc t nh............................................................. 47
4.3 Mô hình DFD ..................................................................................... 48
GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


4.3.1 Sơ đồ dòng dữ liệu ....................................................................... 48

4.3.2 Mô Tả Ô Xử Lý ............................................................................ 57
4.4 Sơ đồ giao diện Website .................................................................... 66
4.4.1 Sơ đồ Website ph a quản trị ......................................................... 66
4.4.2 Sơ đồ Website ph a người d ng ................................................... 67
Chƣơng 5: Cài đặt và thử nghiệm Website .................................................. 69
5.1 Môi trƣờng phát triển ...................................................................... 69
5.2 Cài đặt ................................................................................................ 69
5.3 Thử nghiệm ........................................................................................ 71
Chƣơng 6: Đánh giá và kết luận .................................................................... 80
6.1 Đánh giá kết quả đạt đƣợc ............................................................... 80
6.2 Ƣu điểm của đề tài ............................................................................ 80
6.3 Hạn chế của đề tài ............................................................................. 80
6.4 Hƣớng phát triển của đề tài ............................................................. 80

GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


DANH MỤC CÁC BẢNG, SƠ ĐỒ, HÌNH
Các Bảng
Bảng 2-1: Các thuộc t nh của Org Chart .......................................................... 10
Bảng 2-2: Tuỳ chọn cấu h nh Org Chart .......................................................... 10
Bảng 2-3: Các phương thức của Org Chart ...................................................... 11
Bảng 2-4: Các sự kiện của Org Chart ............................................................... 11
Bảng 2-5: Các phương thức của Datatable ....................................................... 13
Bảng 2-6: Các thư viện của CodeIgniter .......................................................... 25
Bảng 3-1: Chức năng người quản lý ................................................................. 27
Bảng 3-2: Chức năng người d ng..................................................................... 27

Bảng 3-3: Các yêu cầu phi chức năng .............................................................. 29
Bảng 4-1: Thực th Users ................................................................................. 39
Bảng 4-2: Thực th gia phả .............................................................................. 39
Bảng 4-3: Thực th danh sách gia phả.............................................................. 40
Bảng 4-4: Thực th cache ................................................................................. 40
Bảng 4-5: Thực th liên hệ ............................................................................... 40
Bảng 4-6: Thực th file ..................................................................................... 40
Bảng 4-7: Thực th admin ................................................................................ 41
Bảng 4-8: Thực th thông tin chung ................................................................. 41
Bảng 4-9: Danh sách các bảng trong csdl......................................................... 41
Bảng 4-10: Table users ..................................................................................... 42
Bảng 4-11: Table cache .................................................................................... 42
Bảng 4-12: Table ds_giapha ............................................................................. 42
Bảng 4-13: Table tb[i] ...................................................................................... 43
Bảng 4-14: Table file ........................................................................................ 43
Bảng 4-15: Table admin ................................................................................... 44
Bảng 4-16: Table lienhe.................................................................................... 44
Bảng 4-17: Table thontinchung ........................................................................ 44
Bảng 4-18: Bảng tầm ảnh hưởng miền giá trị R1 ............................................. 45
Bảng 4-19: Bảng tầm ảnh hưởng miền giá trị R2 ............................................ 46
Bảng 4-20: Bảng tầm ảnh hưởng liên bộ R1 .................................................... 46
Bảng 4-21: Bảng tầm ảnh hưởng liên bộ R2 .................................................... 46
Bảng 4-22: Bảng tầm ảnh hưởng liên bộ R3 .................................................... 46
Bảng 4-23: Bảng tầm ảnh hưởgn liên bộ R4 .................................................... 47
Bảng 4-24: Bảng tầm ảnh hưởng liên bộ R5 .................................................... 47
Bảng 4-25: Bảng tầm ảnh hưởng liên bộ R6 .................................................... 47
Bảng 4-26: Bảng tầm ảnh hưởng liên thuộc t nh R1 ........................................ 47
Bảng 4-27: Quản lý gia phả .............................................................................. 57
Bảng 4-28: Cập nhật thông tin .......................................................................... 57
Bảng 4-29: T m kiếm thông tin ........................................................................ 57

Bảng 4-30: Thêm thành viên ............................................................................ 57
Bảng 4-31: Thêm dòng họ ................................................................................ 58
Bảng 4-32: Lưu Cache ...................................................................................... 58
Bảng 4-33: Ki m tra thông tin user .................................................................. 58
Bảng 4-34: Thêm user ...................................................................................... 58
GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


Bảng 4-35: Thêm thông tin chung .................................................................... 58
Bảng 4-36: Them thông tin phả ký ................................................................... 59
Bảng 4-37: Thêm thông tin tộc ước .................................................................. 59
Bảng 4-38: Thêm thông tin thuỷ tổ .................................................................. 59
Bảng 4-39: Thêm thông tin hương hoả ............................................................. 59
Bảng 4-40: Ki m tra thông tin thành viên ........................................................ 60
Bảng 4-41: Cập nhật thành viên ....................................................................... 60
Bảng 4-42: Ki m tra thông tin dòng họ ............................................................ 60
Bảng 4-43: Cập nhật dòng họ ........................................................................... 61
Bảng 4-44: Ki m tra thông tin chung ............................................................... 61
Bảng 4-45: Cập nhật thông tin chung ............................................................... 61
Bảng 4-46: Ki m tra thông tin phả ký .............................................................. 61
Bảng 4-47: Cập nhật phả ký ............................................................................. 62
Bảng 4-48: Ki m tra thông tin tộc ước ............................................................. 62
Bảng 4-49: Cập nhật tộc ước ............................................................................ 62
Bảng 4-50: Ki m tra thông tin thuỷ tổ .............................................................. 63
Bảng 4-51: Cập nhật thuỷ tổ ............................................................................. 63
Bảng 4-52: Ki m tra thông tin hương hoả ........................................................ 63
Bảng 4-53: Cập nhật hương hoả ....................................................................... 63

Bảng 4-54: Ki m tra thông tin thành viên ........................................................ 64
Bảng 4-55: Xuất thông tin thành viên ............................................................. 64
Bảng 4-56: Ki m tra thông tin dòng họ ............................................................ 64
Bảng 4-57: Xuất thông tin dòng họ .................................................................. 65
Bảng 5-1: Đánh giá các chức năng website ...................................................... 78
Các Sơ Đồ
Sơ đồ 2-1: Dòng chảy dữ liệu bên trong CI ...................................................... 23
Sơ đồ 3-1: Cấu trúc tác nhân (actor) ................................................................. 32
Sơ đồ 3-2: Cấu trúc use case các chức năng ch nh của website ....................... 33
Sơ đồ 3-3: Use case đăng nhập ......................................................................... 34
Sơ đồ 3-4: Use case đăng xuất .......................................................................... 34
Sơ đồ 3-5: Sequence diagram thêm gia phả ..................................................... 35
Sơ đồ 3-6: Sequence diagram ch nh sửa gia phả .............................................. 35
Sơ đồ 3-7: Sequence diagram xoá gia phả........................................................ 36
Sơ đồ 3-8: Sequence diagram xóa user (ch dành cho người quản trị ) ............ 36
Sơ đồ 3-9: Sequence diagram t m kiếm gia phả ............................................... 37
Sơ đồ 3-10: Sequence diagram đăng ký tài khoản ........................................... 37
Sơ đồ 4-1: Mô hình ERD .................................................................................. 38
Sơ đồ 4-2: Mô hình ER ..................................................................................... 45
Sơ đồ 4-3: Sơ đồ ngữ cảnh ............................................................................... 48
Sơ đồ 4-4: Dòng dữ liệu cấp 1 .......................................................................... 48
Sơ đồ 4-5: Cập nhật thông tin ........................................................................... 49
Sơ đồ 4-6: Quản lý user .................................................................................... 49
Sơ đồ 4-7: T m kiếm thông tin ......................................................................... 50
Sơ đồ 4-8: Thêm thành viên ............................................................................. 50
Sơ đồ 4-9: Thêm dòng họ ................................................................................. 51
GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt

Sơ đồ 4-10: Thêm thông tin gia phả ................................................................. 52
Sơ đồ 4-11: Thêm thông tin chung gia phả ...................................................... 53
Sơ đồ 4-12: Thêm thông tin phả ký .................................................................. 53
Sơ đồ 4-13: Thêm thông tin tộc ước ................................................................. 54
Sơ đồ 4-14: Thêm thông tin thuỷ tổ.................................................................. 54
Sơ đồ 4-15: Thêm tông tin hương hoả .............................................................. 55
Sơ đồ 4-16: Lưu Cache ..................................................................................... 55
Sơ đồ 4-17: T m kiếm thành viên ..................................................................... 56
Sơ đồ 4-18: T m kiếm dòng họ ......................................................................... 56
Sơ đồ 4-19: Ph a quản trị .................................................................................. 66
Sơ đồ 4-20: Ph a người d ng ............................................................................ 67
Sơ đồ 4-21: Chi tiết ga phả ............................................................................... 68
Các Hình Ảnh
Hình 2-1: Treeview dạng cây thư m c ............................................................... 7
Hình 2-2: Phả đồ theo chiều ngang .................................................................... 8
Hình 2-3: Organization Chart ............................................................................. 9
Hình 2-4: Mô hình MVC .................................................................................. 21
Hình 2-5: Cấu trúc CodeIgniter ........................................................................ 22
Hình 5-1: Tạo cơ sở dữ liệu .............................................................................. 69
Hình 5-2: Import cơ sở dữ liệu ......................................................................... 70
Hình 5-3: Cấu h nh cơ sở dữ liệu...................................................................... 70
Hình 5-4: Trang chủ.......................................................................................... 71
Hình 5-5: Trang kho gia phả ............................................................................. 72
Hình 5-6: Trang quản lý gia phả ....................................................................... 73
Hình 5-7: Phả đồ nằm dọc ................................................................................ 74
Hình 5-8: Phả đồ nằm ngang ............................................................................ 74
Hình 5-9: Menu quản lý thành viên .................................................................. 75
Hình 5-10: Chi tiết thành viên .......................................................................... 75

Hình 5-11: Thêm thành viên ............................................................................. 76
Hình 5-12: Ch nh sửa thành viên ...................................................................... 76
Hình 5-13: Giao diện đăng nhập admin............................................................ 77
Hình 5-14: Giao diện quản lý trong admin ....................................................... 77
Các từ viết tắt
T viết tắt
CI
Org Chart
MVC

GVHD: Vũ Đức Lung

Ngữ nghĩa
CodeIgniter
Organization Chart
Model- View-Controller

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


1

Chƣơng 1: Tổng quan đề tài
1.1 Lý Do Chọn Đề Tài
Gia phả là bản ghi chép tên họ, tuổi tác, vai trò và công đức của cha m ,
ông bà, tiên tổ ... trong thời đại mà họ đã sinh ra và lớn lên của một gia đ nh
hay một dòng họ. Gia phả có th đư c coi như một bản sử ký của một gia đ nh
hay một dòng họ. Gia phả có khi gọi là Phổ ký, có khi là Phổ truyền...
Ở Việt Nam, t c làm gia phả phát tri n mạnh ở hai miền Bắc và Trung, miền

Nam rất t gia đ nh làm gia phả ở đấy còn đư c gọi là "gia phổ" và biến thái
thành "tông chi" tức tờ "tông chi tông đồ". Ở các gia đ nh gia phả đư c xem
như là một cái g đó rất thiêng liêng và quý báu, v nó ghi lại thông tin, lịch sử
của toàn bộ gia tộc qua các thời kỳ, thế hệ trong họ, nhưng thường gia phả
xưa ch có một bản gốc truyền t đời này sang đời kia, cho nên rất khó truyền
đạt hết thông tin nội dung của họ tộc cho toàn th con cháu đời sau biết. Đ
nhiều người có th biết rõ về lich sử của dòng họ m nh, thông tin về ông, bà tổ
tiên và con cháu ... đ nắm thông tin và biết rõ mối quan hệ của m nh với
những người trong c ng họ tộc. Ngày nay công nghệ thông tin phát tri n rất
nhanh, việc sử d ng mạng internet là rất phổ biến, cho nên việc đưa thông tin
của t ng họ tộc lên một trang web đ mọi người có th xem và nắm bắt thông
tin là một việc hết sức cần thiết và ý nghĩa, đó là lý do thứ nhất của đề tài.
Gia phả là gia bảo,là tài sản không ch của riêng dòng tộc mà còn của
quốc gia. Trong thời loạn lạc, thân lo không nổi huống chi là gia phả. Ngày
nay, chúng ta đang ở thời b nh trị, ổn định. Thiết nghĩ việc làm trước hết là
phải khôi ph c truyền thống văn hoá lâu đời đã bị xâm hóa ngiêm trọng sau
những thời thăng trầm của đất nước. Giữ g n và phát huy gia phả là gữi lấy cho
con cháu đời sau một mảng văn hóa độc đáo gắn liền với đạo hiếu.Ngày nay,
không t gia đ nh vẫn còn giữ đư c những cuốn gia phả t xa xưa. Song việc
dựng lại gia phả dòng họ trước đây và viết tiếp về thế hệ m nh cho con cháu
lưu lại của nhiều gia đ nh, dòng họ đang gặp không t khó khăn. Chưa nói đến
việc con cháu của các dòng tộc sinh sống rải rác khắp mọi miền đất nước, c ng
như ở nước ngoài, nên việc xây dựng gia phả dòng tộc bằng những phương
pháp cổ đi n như viết sách là không mấy khả thi và ch nh xác nữa. C ng như
những người con trong dòng tộc có th bị thất lạc hoặc quên đi những mối
quan hệ trong dòng tộc, ngày dỗ ông bà… Đây là lý do thứ hai
Trong cuộc sống hiện nay , có rất nhiều người m nh gặp c ng họ với
m nh, có th c ng quê quán nhưng m nh không biết rõ có mối quan hệ với họ
như thế nào, có th là anh em họ, con cháu , chú bác... Đ có th t m kiếm và
xác thực các mối quan hệ đó có liên quan như thế nào chúng ta cần phải xây

dựng một hệ thống lưu trữ và xử lý thông tin của gia phả các dòng họ, đ
chúng ta có th lên tra cứu thông tin nguồn gốc của m nh, t m mối quan hệ với
những người m nh cần muốn biết như thế nào, đây c ng ch nh là lý do cuối
cùng.
V các l do trên, chúng em đã chọn đề tài Xây Dựng Hệ Thống Website Gia
Phả Việt Nam trên nền tảng web.
Với tâm huyết muốn bảo tồn và phát huy gia phả của các dòng họ ở Việt
Nam, chúng tôi đã làm Website quản lý Gia Phả này với m c đ ch sau:
GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


2
 Xây dựng một nơi lưu trữ các gia phả của các dòng họ ở Việt
Nam.
 T ng dòng họ c ng ghi lại gia phả của dòng họ m nh vào c ng
một nơi trên mạng toàn cầu(Internet). T ng người sẽ góp t ng
mảng gia phả của dòng họ m nh, kết quả chúng ta sẽ có một kho
gia phả. Đó là một tài sản tinh thần không nhỏ cho người Việt
Nam chúng ta.
 Những dòng họ, những người con ở xa, nếu bị thất lạc thông tin
về gia tộc có th dễ dàng t m lại.

1.2 Mục Tiêu Đề Tài
 M c tiêu đầu tiền là có th đem thông tin t người d ng đ tạo ra 1 gia
phả và lưu trữ trên mạng đ mọi người có th truy cập đ xem và cập
nhật thông tin về dòng họ của m nh.
 M c tiêu thứ hai là có th xử lý kỹ thuật đ hỗ tr người d ng nhập

thông tin gia phả và t m kiếm thông tin . Hệ thống website phải có khả
năng lưu trữ và xử lý thông tin đư c nhiều dòng họ, và thời gian đ xứ
lý ph c v cho các m c đ ch như nhập liệu thông tin, lưu trữ thông tin,
xử lý ch nh sửa, t m kiếm trong họ tộc phải đủ nhanh.

1.3 Đối Tƣợng Và Phạm Vi Nghiên Cứu
Đối tư ng nghiên cứu ở đây là các thông tin gia phả, phả đồ của các họ
tộc. Phạm vi nghiên cứu ch thực hiện trên các gia phả ở Việt Nam, bao gồm 3
miền Bắc, Trung, Nam. Trong đó dữ liệu thử nghiệm đư c lấy t một số dòng
họ có thật ngoài đời và một số gia phả t các trang web gia phả khác. Chúng ta
ch đưa vào thử nghiệm ở một khoảng số đời nhất định với thông tin khoảng
10 trang.

1.4 Phƣơng Pháp Thực Hiện
Phương pháp thực hiện là đầu tiên t m hi u về các thông tin gia phả, về
các công tr nh có liên quan, về các lý thuyết liên quan. Sau đó t m hi u các kỹ
thuật quản lý gia phả, phân tích các nhu cầu người d ng đ t đó dẫn đến phân
t ch thiết kế chương tr nh thử nghiệm. Cuối c ng thử nghiệm chương tr nh
thiết kế với các chức năng mong đ i và đánh giá kết quả đ đi đến kết luận.

1.5 Các Đề Tài Hay Ứng Dụng Tƣơng Tự
Ngày xưa, người ta lưu giữ các gia phả họ tộc dưới dạng các cuộn giấy.
Ngày nay, các gia phả đư c lưu giữ dưới dạng quy n sách chứa thông tin của
các thành viên trong dòng họ. Việc lưu giữ dưới dạng cuộn giấy và sách sẽ khó
mà phổ biến cho mọi người trong tộc biết đư c và không linh động khi mỗi
người ở những nơi khác nhau. Cho nên việc đem thông tin gia phả đ lưu trên
mạng đ có th phổ biến cho các thành viên của dòng họ, họ có th d dàng
năm bắt thông tin của họ tộc m nh.
Đ quản lý các gia phả họ tộc trên các website, ta cần đưa các thông tin
về dòng họ, thông tin thành viên và các thông tin thêm khác về dòng họ lưu trữ

dưới dạng cơ sở dữ liệu trên server. Khi cần th ta có th truy xuất lấy, cập
nhật hoặc t m kiếm các thông tin.
GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


3
Hiện nay có rất nhiều trang web về gia phả, nhưng thường là các trang
gia phả của riêng các họ tộc tự xây dựng riêng cho dòng họ, và có một số t các
trang có khả năng quản lý và lưu trữ nhiều gia phả v d như 2 trang web
phahe.vn, vietnamgiapha.com. Hai trang web này có lẽ hiện thời là nổi bật
nhất trong việc quản lý hệ thống các gia phả, tuy nhiên những trang này vẫn có
những đi m mạnh yếu khác nhau:
 Site vietnamgiapha.com: thì phần vẽ phả đồ chưa đ p lắm và chưa có
phần phả đồ theo chiều ngang, giao diện chưa đư c bắt mắt và giao
diện ch nh bố c c rối rắm.
 Site phahe.vn: giao diện khá đ p bắt mắt, phần phả đồ theo chiều dọc
đ p và có tuỳ biến đư c, nhưng vẫn thiếu phả đồ chiều ngang, đặc biệt
xử lý rất chậm, thời gian đáp ứng đối với phả đồ với số lư ng người lớn
thường rất lâu và hay bị lỗi limit time out.
V thế ở website của ta, chúng ta sẽ tập trung vào phần giao diện cho phả đồ,
phần quan trọng và th hiện tổng quan gia phả, và phần tốc độ xử lý. Chúng ta
sẽ t m cách cải thiện tốc độ chương tr nh và t m cách vẽ phả đồ 1 cách trực
quan và đ p.

GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn

Phan Lâm Hoàng Việt


4

Chƣơng 2: Cơ Sở Lý Thuyết
2.1 Kiến Thức Về Gia Phả
2.1.1 Nguồn Gốc Của Gia Phả
Gia phả là bản ghi chép tên họ, tuổi tác, vai trò và công đức của cha m ,
ông bà, tiên tổ ... trong thời đại mà họ đã sinh ra và lớn lên của một gia đ nh
hay một dòng họ. Gia phả có th đư c coi như một bản sử ký của một gia đ nh
hay một dòng họ. Gia phả có khi gọi là Phổ ký, có khi là Phổ truyền. Các nhà
Tông thất (dòng dõi vua quan), có khi gọi gia phả của vương triều m nh hay
gia tộc m nh bằng t ngữ trân trọng hơn: Ngọc phả, Thế phả...
Tại các nước phương đông t lâu đã chịu ảnh hưởng của văn hoá của Đạo(
Khổng Tử ) , các thế hệ sau trong dòng họ hay vương triều phải giữ đạo Trung
đạo Hiếu. Việc xây dựng và lưu truyền gia phả đư c xem là một cách ghi nhớ
công ơn tổ tiên, gây dựng lòng tự hào trong dòng tộc.Ở Tây phương, người ta
có tập t c làm cây phả hệ, tương tự như Tông đồ của người Hoa hay người
Việt. Một Tông đồ, một Gia phả, một Phả ký, một Phổ truyền d đơn sơ hay
súc t ch c ng đều trở nên những tài liệu quý báu cho nhả xã hội học, sử học về
sau. Nó còn có th hữu d ng cho những nghiên cứu về tâm lý, về di truyền
học, y học, huyết học...Môn học nghiên cứu về gia phả là gia phả học.
Tại Việt Nam, gia phả sơ giản ghi chép tên cúng cơm, ngày giỗ và địa
đi m an táng của ông cha. Theo các nhà sử học phỏng đoán th gia phả đã xuất
hiện t thời Sĩ Nhiếp làm thái thú ở huyện Giao Ch ( thời H ng Vương), hoặc
gần hơn tức là t thời Lý Nam Đế (khoảng nǎm 476-545). Nhưng phải đến
thời nhà Lý, Nhà Trần mới xuất hiện những cuốn tộc phả, thế phả (ghi cả thế
thứ, tông t ch toàn họ), phả ký (ghi lại hành trạng, sự nghiệp của tổ tiên). Mới
đầu gia phả xuất hiện ch trong Hoàng tộc c ng giới quan lại, nhà Lý có Hoàng

Triều Ngọc Điệp - năm 1026; nhà Trần có Hoàng Tông Ngọc Điệp, nhà Lê có
Hoàng Lê Ngọc Phả... C ng với sự xuất hiện các gia phả của Hoàng tộc là gia
phả của các danh gia, quan lại và cứ thế lan rộng, phổ biến ghi chép gia phả
trong nhân dân. Trước đây, gia phả chủ yếu đư c ghi chép bằng chữ HánNôm, nhưng số người giỏi không nhiều, qua nhiều năm chiến tranh, nhiều bộ,
cuốn gia phả của nhiều dòng họ c ng mất dần...
T c làm gia phả phát tri n mạnh ở hai miền Bắc và Trung, miền Nam
rất t gia đ nh làm gia phả ở đấy còn đư c gọi là "gia phổ" và biến thành "tông
chi" tức tờ "tông chi tông đồ". Trong gia phả, người đứng đầu ngành trưởng
(trưởng họ, trưởng tộc) có bổn phận ghi hết những chi tiết về thân th ch và
dòng dõi; những người con khác sao lại bản gia phả ch nh đó. Các gia đ nh giữ
g n kỹ lưỡng và truyền t đời cha tới đời con. "Họ" theo nghĩa gốc có liên hệ
với nhà và dưới chế độ phong kiến, nối kết con người với đất ruộng: một mái
nhà, một gia đ nh, một họ. Họ và tên của một người định vị tr của cá nhân
người đó trong xã hội, xác định cá th trong một toàn th .

GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


5
2.1.1

Cấu Trúc Một Gia Phả

Gia phả đư c coi là hoàn ch nh trước hết phải là một gia phả đư c ghi
chép rõ ràng, chữ nghĩa chân phương, có nội dung cơ bản như sau:
1. Thông tin rõ ràng về người sao l c (biên soạn).
2. Nêu nguồn gốc xuất xứ của gia tộc, là phả ký hay là gia sử.

3. Ghi Thuỷ Tổ của dòng họ.
4. Ghi t ng phả hệ phát sinh t Thuỷ Tổ cho đến các đời con cháu sau
này. Có phần phả đồ, là cách vẽ như một cây, t ng gia đ nh là t ng
nhánh, t gốc đến ngọn cho dễ theo dõi t ng đời. Đối với tiền nhân có
các m c sau đây:
 Tên: Gồm tên huý, tên tự, thuỵ hiệu và tên gọi thông thường.
Thuộc đời thứ mấy? Con trai thứ mấy của ai?
 Ngày tháng năm sinh (mất), giờ (nếu nhớ). Mộ nguyên táng, cải
táng, di táng tại đâu? Thời gian nào?
 Học hành, thi cử, đậu đạt, chức v , địa vị lúc sinh thời và truy
phong sau khi mất.
 V : chánh thất, kế thất, thứ thất... Họ tên, con thứ mấy của ai?
Quê ở đâu? Các m c ngày, tháng, năm sinh, ngày, tháng, năm
mất, tuổi thọ, mộ, đều ghi t ng người như trên. Nếu có thi đậu
hoặc có chức tước, địa vị, đư c ban thưởng riêng th ghi thêm.
 Con: Ghi theo thứ tự năm sinh, nếu nhiều v th ghi rõ con bà
nào? Con gái th cước chú kỹ: con gái thứ mấy, đã lấy chồng th
ghi tên họ chồng, năm sinh, con ông bà nào, quê quán, đậu đạt,
chức tước? Sinh con mấy trai mấy gái, tên g ? (Con gái có cước
chú còn con trai không cần v có m c riêng t ng người thuộc đời
sau).
 Những gương sáng, những t nh cách, hành trạng đặc biệt, hoặc
những công đức đối với làng xã, họ hàng, xóm giềng... Những
lời dạy bảo con cháu đời sau (di huấn), những lời di chúc...
 Ngoài những m c ghi trên, gia phả nhiều họ còn lưu lại nhiều sự
t ch đặc biệt của các vị tiên tổ, những đôi câu đối, những áng văn
hay, những bài thuốc gia truyền...đó là những tài sản quý giá mà
chúng ta đ thất truyền, chưa biết khai thác.
5. Tiếp theo, là tộc ước. Đây là những quy định-quy ước trong tộc họ, đặt
ra nhằm ổn định tộc họ, có công thưởng, có tội phạt, tất nhiên là phải

ph h p với luật pháp chung.
6. Với một tộc họ lớn, có th có nhiều tông nhánh, chi phái. Phần này sẽ
ghi những thông tin chi phái, ai là bắt đâu chi, chi hiện ở đâu, nhà thờ
chi...
7. Những thông tin khác về tài sản hương hỏa, bản đồ các khu mộ tiền
nhân ..
2.1.2 Cấu Trúc Dữ Liệu Cho Phả Đồ
Đối với website gia phả th phân khúc vẽ phả đồ là khó và quan trọng
nhất. Phả đồ là một mô h nh cây gia phả đư c vẽ ra t các thông tin t ng
người trong họ tộc. Phả đồ c ng ch nh là cái quan trọng của gia phả, nh n vào
phả đồ người ta có th nh n tổng quan về 1 dòng họ.
GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


6
Ở đây dữ liệu các thành viên không đư c lưu trữ trên 1 table duy nhất
mà là nhiều table. Mỗi dòng họ khi đư c tạo ra th sẽ có đư c 1 table riêng đ
lưu thông tin các người trong 1 dòng họ. V ở đây khi vẽ cây gia phả theo
chiều dọc chúng ta d ng giải thuật dựa trên đệ quy, nên nếu ch d ng 1 bảng
lưu thành viên cho tất cả các dòng họ th thuật toán khi chạy sẽ rất chậm (dữ
liệu có th lên tới hàng chuc ngàn records ), v thế chúng ta nên tách ra thành
t ng table riêng biệt cho mỗi dòng họ, mỗi dòng họ thường số thành viên tối
đa là dưới 1000 người, nên giải thuật đệ quy áp d ng ở trường h p này là khả
thi và nhanh.
Cấu trúc dữ liệu của một thành viên bao gồm các trường id, cha_id,
level và các trường thông tin thêm khác. Dựa vào trường id và cha_id đ xác
định mối quan hệ cha con trong phả đồ, 1 id ch có 1 cha_id , 1 cha_id th có

th thuộc nhiều record khác, trường level d ng đ xác định đời thứ mấy của
người đó đ d dàng truy xuất và xử lý các thao tác khác.
Đối với phần phả đồ chúng ta có 2 dạng phả đồ: 1 dạng phả đồ theo
chiều dọc giống như cây thư m c, và 1 dạng phả đồ thiều chiều ngang bao
gồm nhiều ô vuông, mỗi ô vuông là 1 người.
Đ vẽ phả đồ theo chiều dọc chúng ta sử d ng plugin treeview trong thư
viện jquery : $('container').treeview( ) . Dữ liệu đầu vào của treeview plugin
là dưới dạng mô h nh DOM phân cấp, giống như tập h p lồng nhau (Nested
List Model). Do đó đ vẽ ra cây gia phả theo chiều dọc chúng ta phải chuy n
dữ liệu lưu trữ thành dữ liệu dưới dạng của treeview, mà đ tạo ra dữ liệu phân
cấp lồng nhau chúng ta phải d ng đến thuật toán đệ quy đ tạo ra dữ liệu cần
thiết.
Cấu trúc dữ liệu dạng treeview đầu vào như sau:
<li><span>Nguyễn Văn Anh</span>
<ul>
<li><span>Nguyễn Văn Thông</span></li>
<li><span>Nguyễn Thị Nhung</span>
<li><span>Nguyễn Văn Nam</span>
<ul>
<li><span>Nguyễn Thị Bé</span></li>
<li><span>Nguyễn Văn Nhiên</span></li>
</ul>
</li>
</li>
</ul>
</li>

Cấu trúc dạng danh sách trong html, gồm các thẻ <li> và <ul>.
Giải thuật đệ quy như sau:
DQ(root)

{
tìm tất cả các con(child) của root
{
DQ(child)
}
}

Về phần phả đồ theo chiều ngang th ta d ng api vẽ bi u đồ của google có tên
là Organization Chart. Đối với api này dữ liệu đầu vào của nó dưới dạng
datatable chuẩn của google. Datatable gồm các cột( colum ) và hàng (rows),
cột đ tên các trường và hàng là các thực th . Org Chart của google nhận dữ
GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


7
liệu đầu vào là 1 datatbale bao gồm 3 cột: cột id, cột cha_id, và cột tooltip(
chúng ta không d ng đến)
Ta phải tạo các cột trước:
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');

Đ tạo các hàng ta d ng hàm data.addRow( ['Bob', 'Jim', 'Bob Sponge'] );
Với data là dạng datatable của google. Ở mỗi cột ta có 2 giá trị value và giá trị
format value đ th hiện giá trị id và tên th hiện.
V d :
[{v:'2', f:'Jim<div style="color:red; fontstyle:italic">Nguyễn Anh</div>'}, 'Mike',' ']

Đ trả về dữ liệu dạng datatable theo dạng của google ta xử lý dữ liệu lấy t
server và xữ lý chuỗi chuy n sang dạng đúng của datatable. Dữ liệu trả về có
dạng:
[
[{v:'Mike', f:'Mike<div style="color:red; fontstyle:italic">President</div>'}, '', 'The President'],
[{v:'Jim', f:'Jim<div style="color:red; fontstyle:italic">Vice President</div>'}, 'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]

Ở đây chúng ta không d ng giải thuật đệ quy như cách vẽ phả đồ dọc mà ch là
thao tác lấy dữ liệu và xử lý chuỗi sang dạng của datatable google.
Đ hi u rõ hơn về cấu trúc hoạt độg của api google chúng ta sẽ t m hi u kỹ
hơn ở phần sau.

Hình 2-1: Treeview dạng cây thư m c
(Nguồn: />
GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


8

Hình 2-2: Phả đồ theo chiều ngang

2.2 Phần Lƣu Cache

Trong các bảng của chương tr nh có 1 bảng tên là cache. Bảng này d ng
đ lưu trữ các chuỗi chứa thông tin của t ng dòng họ đư c xử lý theo dạng dữ
liệu đầu vào của treeview và api google org chart.
Việc sử d ng lưu trữ dữ liệu đã dựng sẵn góp phần làm tăng tốc độ chương
tr nh. Người d ng khi truy xuất dữ liệu của phả đồ th công việc xử lý đ ra dữ
liệu ph h p , không cần thực hiện mà ch việc đọc lên t bảng cache.

2.3 Tìm hiểu về Google Visualization: Organizational Chart
Google có các project phát tri n các tool như các API đ vẽ các dạng
bi u đồ, các dạng bi u đồ rất đa dạng và phong phú bao gồm các dạng chart:
 Areas Charts
 Bar Charts
 Pie Charts
 Column Charts
 Geo Charts
 Line Charts
 Combo Charts
 ...
Các tool trên đem lại nhiều l i ch cho các web developers, đỡ tốn nhiều thời
gian đ viết các ứng d ng vẽ bi u đồ trên nền web. Trong các bi u đồ th
google Org Chart chưa đư c phát tri n hoàn thiện và hiện đang ngưng phát
tri n, nên Org Chart vẫn còn một số lỗi và thiếu 1 số chức năng.

GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


9

Hình 2-3: Organization Chart
(Nguồn:
/>Đoạn script vẽ chart:
<script type='text/javascript'>
google.load('visualization', '1',
{packages:['orgchart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
data.addRows([
[{v:'Mike', f:'Mike<div style="color:red; fontstyle:italic">President</div>'}, '', 'The President'],
[{v:'Jim', f:'Jim<div style="color:red; fontstyle:italic">Vice President</div>'}, 'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
var chart = new
google.visualization.OrgChart(document.getElementById('chart_d
iv'));
chart.draw(data, {allowHtml:true});
}
</script>

2.3.1 Cấu trúc dữ liệu của Org Chart
Là 1 bảng với 3 trường cột, mà mỗi hàng đại diện cho 1 node trong bi u đồ
orgchart:

 cột 0: là id của node. Nó phải là duy nhất trong các nodes, có th chứa
các ký tự, bao gồm khoảng trắng. Nó sẽ hiện lên trên node. Bạn có th
GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


10
thiết lập ki u th hiện trên node nhưng giá trị của node vẫn là giá trị của
id.
 cột 1: là id của node cha. Giống như cột 1, có th thiết lập giá trị th
hiện khác mà giá trị vẫn là id.
 cột 2: cột tooltip, khi người d ng hover lên 1 node th se hiện ra thông
tin t cột này.
Mỗi node có th có 1 node cha hoặc không có, và có th có nhiều node con.
2.3.2 Các thuộc tính của Org Chart
Bảng 2-1: Các thuộc t nh của Org Chart
Tên thuộc
tính
slectedStyle

Dùng Cho

Mô tả

Datatable row

style

Datatable row

Thiết lập style bên trong cho 1 node khi đư c
chọn select.
Bạn
phải thiết
lập
allowHtml=true và phải trước hàm draw( ),
nó sẽ overide lên tuỳ chọn c trước.
V d : myDataTable.setRowProperty(2,
'selectedStyle', 'backgroundcolor:#00FF00');
Thiết lập stye bên trong cho các node. Bạn
phải thiêt lập trước hàm vẽ draw( ).
V d sau sẽ override màu của node:
myDataTable.setRowProperty(3,
'style',
'border: 1px solid green');

2.3.3 Tuỳ chọn cấu hình Org Chart
Bảng 2-2: Tuỳ chọn cấu h nh Org Chart

allowCollapse

Kiểu dữ
liệu
boolean

allowHtml

boolean

Color

string

nodeClass

string

Tên

selectedNodeClass string

GVHD: Vũ Đức Lung

Măc Định

Mô tả

Doubleclick sẽ xoá đi node đó
và các node con của nó.
false
Nếu giá trị là true, tên tron
node có chứa thẻ Html sẽ đư c
th hiện như HTML.
'#edf7ff'
Màu nền của các node trong
orgchart
Tên class Tên class gán cho các node.
mặc định

Đế thao tác CSS trên các tên
class này.
Tên class Tên class gán cho node đư c
mặc định
chọn. Thao tác CSS cho các
node nay thông qua tên class
false

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


11
slectionColor
Size

string
string

'#d6e9f8'
'medium'

Màu nền của node đư c chọn
Các size 'small', medium',
'large'

2.3.4 Các phƣơng thức của Org Chart
Bảng 2-3: Các phương thức của Org Chart
Tên
collapse(row, collapsed)

Giá trị trả về
None

draw(data, options)
getChildrenIndexes(row)

None
Mảng số
number
Mảng số
number
Mảng
các
thành
phần
đư c chọn
None

getCollapsedNodes
getSelection( )

setSeletion(selection)

Mô tả
Huỷ hoặc mở rộng một node.Với
các tham số:
+row: ch số hàng.
+collapsed: true hoặc false.
Vẽ bi u đồ org chart

Trả về 1 mảng ch số của các
node con.
Trả về 1 mảng các node bị huỷ
Các thành phần đư c chọn là tất
cả các hàng thành phần. Trả về 1
hoặc nhiều hàng đươc chọn
Tất cả các entry đư c chọn của 1
hàng

2.3.5 Các sự kiện của Org Chart
Bảng 2-4: Các sự kiện của Org Chart
Tên
collapse

onmouseover

onmouseout
select
ready

GVHD: Vũ Đức Lung

Thuộc tính
+collapsed: 1 giá trị true
false cho huỷ hoặc mở
rộng 1 node
+row: ch số hàng (t nh
t 0)
Khi người d ng rê chuột +row: ch số hàng(t nh
lên 1 hàng

t o) của node đư c
hover
Khi người d ng rê chuột +row: ch số hàng(t nh
ra ngoài node
t o) của node đư c out
Đư c chọn
None
Bi u đồ chart sẵn sàng None
cho các hàm bên ngoài
gọi.Nếu muốn gắn với
Mô tà
Sự kiện khi
allowCollapse đư c gán
là true và người d ng
doubleclick lên 1 node

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


12
chart, và gọi sau khi
draw, bạn nên thiết lập 1
listener cho sự kiện
trước khi gọi hàm draw,
và gọi phương thức sau
khi sự kiện xảy ra.
2.3.6 Tìm hiểu về Datatable và các phƣơng thức cơ bản của nó
Lớp Datatable th hiện 1 bảng các giá trị 2 chiều độc lập. Đ tạo 1 bảng
copy và ch đọc t 1 DataTable, chúng ta cần d ng đến DataView.Mỗi cột

trong DataTable đư c gán 1 ki u dữ liệu , với nhiều thuộc t nh tuỳ chọn bao
gồm ID,label và chuỗi pattern.Bạn có th gán các thuộc t nh tuỳ chọn (cặp
name/value) đối với bất kỳ ô, hàng, cột hoặc cả table.
Hàm khởi tạo: DataTable(opt_data, opt_version)
+tham số opt_data:
Dữ liệu đư c sử d ng đ khởi tạo cho table. Dữ liệu có th là dạng
JSON bằng cách gọi DataTable.toJSON( ) ở trên table, hoặc một đối tư ng
javascript chứa dữ liệu đư c d ng cho khời tạo table. Nếu tham số này không
có, một dữ liệu mới rỗng sẽ đư c đưa vào table.
+tham số opt_version:
Giá trị số xác định version của giao thức sẽ d ng. Đư c sử d ng bời
Chart Tools Datasource implementors. Hiện tại phiên bản là 0.6
Chi Tiết:
 Đối tư ng DatTabe đư c d ng đ lưu giữ dữ liệu đ đưa vào
visualization. Một DataTable là một table 2 chiều cơ bản. Tất cả dữ liệu
ở mỗi cột phải c ng ki u dữ liệu. Mỗi cột có một mô tả bao gồm ki u
dữ liệu của no, 1 tên cho cột đó, và 1 ID. Mỗi cell trong table giữ 1 giá
trị. Các cells có th có giá trị null, hoặc giá trị bởi giá trị cột đó.
 Đ thêm 1 data rows sau khi gọi hàm khởi tạo, ta có th gọi hàm
addRow( ) cho 1 hàng hoặc addRows( ) cho nhiều hàng. Ta c ng có th
gọi hàm addColumn( ). Có các phương xoá bỏ các hàng và cột, nhưng
nên dùng DataView.
 Nếu chúng ta thay đổi giá trị trog DataTable sau khi nó đưa dữ lệu qua
hàm draw( ), thay đổi sẽ không xảy ra ngay. Chúng ta phải gọi lại hàm
draw( ) đ có tác d ng.
V d :
Tạo 1 bảng DataTable với literal string:
var dt = new google.visualization.DataTable(
{
cols: [{id: 'task', label: 'Task', type: 'string'},

{id: 'hours', label: 'Hours per Day', type:
'number'}],
rows: [{c:[{v: 'Work'}, {v: 11}]},
{c:[{v: 'Eat'}, {v: 2}]},
{c:[{v: 'Commute'}, {v: 2}]},
GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


13
{c:[{v: 'Watch TV'}, {v:2}]},
{c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
]
},
0.6
)

Tạo 1 bảng DataTable với dữ liệu trống rỗng, sau đó thêm vào dữ liệu:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', {v:7, f:'7.000'}]
]);

Bảng 2-5: Các phương thức của Datatable
Phƣơng Thức( Hàm)
addColumn(type, opt_label,opt_id)
hoặc
addColumn(description_object)

addRow(opt_cellArray)

GVHD: Vũ Đức Lung

Giá Trị
Trả về
Number

Number

Mô Tả
Thêm 1 cột vào data table, và trả về ch
số của cột. Tất cả các cells của cột mới
đư c gán giá trị null. Hàm này có 2 chú
ý:
Ki u thứ nhất:
+type: ki u dữ liệu của cột.Có th là
'string' 'number' 'boolean' 'date' 'datetime
'timeofday'
+opt_label: Chuỗi tên của cột, nếu không
đư c gán sẽ có giá trị rỗng
+Opt_id: chuỗi duy nhất. Giá trị rỗng
mặc định

Ki u thứ hai:
+type: ki u dữ liệu cột
+label: tên cột ki u chuỗi
+id: ID của cột
+role: vai trò của cột
+pattern: là một số hay ki u ngày đư c
th hiện bên trong cột
Thêm một hàng vào bảng data, trả về ch
số của hàng mới
+Opt_cellArray: một đối tư ng row, tho
dạng Javascript notation xác định dữ liệu
cho hàng mới. Nếu tham số này không
có, sẽ thêm 1 hàng rỗng cuối bảng. Tham
số này là mảng các giá trị cell: nếu ta ch
muốn ch rõ giá trị của cell, hãy đưa ra
SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


14
giá trị cell. Nếu muốn ch định dạng giá
trị định dạng và thuộc t nh cho cell, ta
phải d ng đối tư ng cell. Chúng ta có t
d ng chung giá trị và đối tư ng cell trên
c ng phương thức. D ng null hay mảng
rỗng cho 1 ô rỗng
Thêm nhiều hàng vào bảng, giá trị trả về
là ch số c a hàng cuối. Có th tạo những
hàng rỗng
numOrArray: sô hoặc mảng

+Number: ch định có bao nhiêu row
đư c thêm vào
+Array: một mảng đối tư ng row d ng đ
thiết lạp giá trị cho các hàng.

addRows(numorArray)

Number

Clone( )

DataTable Trả về một clone của bảng data. Kết quả
là copy tất cả dữ liệu ngoại tr thuộc t nh
của cell,table và cột. Nghĩa là các thuộc
t nh không nguyên thuỷ đư c copy theo
tham chiếu, thuộc t nh nguyên thuỷ sẽ
copy theo giá trị
String
Trả về giá trị ID của cột theo ch số cột
String
Trả về tên của cột
String
Trả về dạng định dạng giá trị của cột
+columnIndex là 1 số >=0 và nhỏ hơn số
lư ng cột ( getNumberOfColumns( ) )
Object
Trả về 1 map các thuộc t nh của cột. Các
thuộc t nh đối tư ng trả về bới tham
chiếu.
columnIndex: số ch số cột đ lấy thuộc

tính
Auto
Trả về gia trị tên thuộc t nh hoạc null nếu
không có thuộc tinh gán cho cột. Giá trị
trả về khác nhau dựa vào thuộc t n
+columnIndex: 1 số >=0 và nhỏ hơn số
lư ng cột
+name: tên thuộc t nh dạng chuỗi
Object
Trả về giá trị nhỏ và lớn nhất trong các
cột. Có 2 thuộc t nh min max trả về. Nếu
không có giá trị th min và max = null
columnIndex: 1 số >=0 và nhỏ hơn số
lư ng cột
String
Trả về role của cột
String
Trả về ki u dữ liệu của cột
columnIndex: 1 số >=0 và nhỏ hơn số
lư ng cột

getColumnId(columnIndex)
getColumnLabel(columnIndex)
getColumnPattern(columnIndex)

getColumnProperty(columnIndex)

getColumnProperty(columnIndex,
name)

getColumnRange( columnIndex)

getColumnRole(columnIndex)
getCoumnType(columnIndex)

GVHD: Vũ Đức Lung

SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt


15

getDistinctValues(columnIndex)

Mảng
Object

getFilteredows(filters)

Mảng
numbers

getFrmattedValue(owIndex,
columnIndex)

String

getNumberOfColumns( )
gerNumberOfRows( )

getProperties(rowIndex,
coumnIndex)

Number
Number
Object

getProperty(rowIndex,
columnIndex,name)

Auto

getRowProperties(rowIndex)

Object

getRowproperty(rowIndex, name)

Auto

getSortedRows(sortColumns)

Mảng
Numbers

GVHD: Vũ Đức Lung

Giá trị trả về : 'string' 'number ' 'boolean'
'date' 'datetime' 'timeofday'
Trả về giá trị duy nhất của cột theo thứ tự

tăng
columnIndex: 1 số>=0 và nhỏ hơn số
lư ng cột
Trả về các ch số các hàng mà tr ng với
giá trị filter. Các ch số theo thứ tự tăng.
Output của hàm này có th d ng cho
input của hàm DataView.setRows( ) đ
thay đổi các hàng
Filters: 1 mảng đối tư ng mô t3 các cell
có giá trị h p với.Một ch số hàngđư c
trả về nếu nó h p với các filters. Mỗi
filter là 1 đối tư ng với 1 số thuộc t nh
của cột
Trả về giá trị theo ki u định dạng của ô
với ch số hàng và cột
rowIndex, ColumnIndex: 1 số >=0 và nhở
hơn số hàng, số cột
Trả về số lư ng cột của bảng
Trả về số lương hàng của bảng
Trả về 1 map các thuộc t nh của ô ch
định. Chú ý các thuộc t nh đối tư ng trả
về theo ki u tham số, thay đổi giá trị
chúng th sẽ tha đổi giá trị chúng trong
DataTable
+rowIndex: ch số hàng của cell
+columnIndex: ch số cột c a cell
Trả về giá trị tên thuộc t nh hoặc null nếu
không có thuộc tinh nào đư c thiết lập
cho cell. Ki u trả về dựa trên thuộc t nh
+rowIndex, columnIndex: 1 số >=0 và

nhỏ hơn số lư ng hàng,cột
+name: tên thuộc t nh dạng chuỗi
Trả về 1 map các thuộc t nh của hàng.
Chú ý ki u trả về dạng tham chiếu sẽ thay
đổi cả trong DataTable
rowIndex: ch số hàng đ lấy thuộc t nh
Trả về giá trị tên thuộc t nh hoặc null nếu
không có thuộc tinh nào đư c thiết lập
cho cell. Ki u trả về dựa trên thuộc t nh
+rowIndex: 1 số >=0 và nhỏ hơn số hàng
+name: chuỗi tên thuộc t nh
Trả về 1 bảng sắp xếp table mà không
thay đổi thứ tự dữ liệu bên dưới. Muốn
SVTH: Trần Đức Anh Tuấn
Phan Lâm Hoàng Việt