pdf reviewứng dụng hỗ trợ công việc review trong phát triển phần mềm

ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ
----------------------------------------

BÁO CÁO THỰC TẬP
NGÀNH : CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI: PDF REVIEW-ỨNG DỤNG HỖ TRỢ
CÔNG VIỆC REVIEW TRONG PHÁT TRIỂN
PHẦN MỀM
Cán bộ hướng dẫn: Đỗ Việt Trung
Giảng viên đánh giá: Thạc sĩ Vũ
Quang Dũng

Hà Nội, tháng 9 năm 2013


Nhóm sinh viên thực hiện :
STT
1
2
3
4
5

Họ và tên
Trương Văn Hưng
Chu Văn Minh
Đỗ Văn Phong
Đỗ Thành Trung
Nguyễn Tiến Trung

MSSV
10020172
10020215
10020252
10020382
10020390

Lớp
K55C-CLC
K55C-CLC
K55C-CLC
K55C-CLC
K55C-CLC


Mục lục
I. GIỚI THIỆU CHUNG .........................................................................................5
1.

Giới thiệu môi trường thực tập ............................................................................................ 5

2.

Giới thiệu qua về dự án ........................................................................................................ 5

3.

Phân công công việc ............................................................................................................ 6

MÔ TẢ DỰ ÁN ................................................................................................6

II.

Mô tả bài toán ...................................................................................................................... 6

1.
a.

Tình trạng thực tế ......................................................................................................................... 6

b.

Giải pháp ....................................................................................................................................... 7

2.

Môi trường phát triển ........................................................................................................... 7

3.

Các chức năng của ứng dụng PDF Review.......................................................................... 7

4.

Mô tả chi tiết yêu cầu chức năng ......................................................................................... 9
a.

Đăng nhập, đăng xuất, quản lý tài khoản người dùng. ................................................................. 9

b.

Hiển thị danh sách các tài liệu ...................................................................................................... 9

c.

Upload document ......................................................................................................................... 9

d.

Hiển thị chi tiết nội dung file pdf .................................................................................................. 9

e.

Thêm, sửa hoặc xóa issue khi đang hiển thị file pdf ................................................................... 10

f.

Hiển thị danh sách các project, issues. ....................................................................................... 10

g.

Xuất dữ liệu từ bảng ra file CSV. ................................................................................................. 10

h.

Thống kê issues và hiển thị dưới dạng biểu đồ........................................................................... 10

i.

Quản lý, phân quyền truy cập cho các user trong các project. ................................................... 10

III.

CÔNG NGHỆ VÀ GIẢI PHÁP .....................................................................10

1.

Công nghệ và thuật toán .................................................................................................... 10
a.

Giới thiệu về Yii Framework và MVC. ......................................................................................... 10

b.

CGridView. .................................................................................................................................. 12

c.

PHPExcel...................................................................................................................................... 12

d.

EExcelView. ................................................................................................................................. 13

e.

OpenFlashChart2Widget. ............................................................................................................ 13

f.

CUploadedFile ............................................................................................................................. 13

g.

PDF.js........................................................................................................................................... 13

h.

Rangy........................................................................................................................................... 13

i.

QPDF.JS ....................................................................................................................................... 14

Giải pháp ............................................................................................................................ 14

2.
a.

Quản lý đăng nhập đăng xuất tài khoản người dùng: ................................................................ 14

b.

Quản lý tài khoản người dùng..................................................................................................... 14

c.

Hiển thị danh sách tài liệu........................................................................................................... 15

d.

Upload file ................................................................................................................................... 15

e.

Hiển thị danh sách issue. ............................................................................................................ 15

f.

Xuất dữ liệu ra file CSV................................................................................................................ 16

g.

Hiển thị issues dưới dạng biểu đồ. ............................................................................................. 16

h.

Quản lý, phân quyền truy cập cho user (tác vụ của admin). ...................................................... 16

i.

Hiển thị nội dung chi tiết của tài liệu .......................................................................................... 17

j.

Annotation tool ........................................................................................................................... 17

IV.

MÔ TẢ PHẦN MỀM .....................................................................................19

V.

KẾT QUẢ ĐẠT ĐƯỢC, HƯỚNG PHÁT TRIỂN ........................................24

1.

Kĩ năng, kiến thức học được .............................................................................................. 24

2.

Hướng phát triển ................................................................................................................ 25

VI.

TÀI LIỆU THAM KHẢO ..............................................................................25

-

Hoàn thiện Annotation tool có thể đặt các annotation chồng lên nhau. ............................ 25


LỜI CẢM ƠN
Trước hết, chúng tôi xin gửi lời cảm ơn tới công ty Toshiba Software
Development Vietnam (TSDV) đã hết sức tạo điều kiện cho chúng tôi thực hiện
chương trình thực tập này.
Chúng tôi cũng gửi lời cảm ơn sâu sắc tới anh Đỗ Việt Trung tận tình chỉ
bảo và hướng dẫn chúng tôi trong suốt quá trình thực tập. Đồng thời, chúng tôi

cũng gửi lời cảm ơn tới ban giám đốc, các anh chị nhân viên của TSDV-những
người đã tạo điều kiện tốt nhất và giúp đỡ chúng tôi trong thời gian thực tập ở công
ty.
Cuối cùng, chúng tôi muốn gửi lời cảm ơn tới Thạc sĩ Vũ Quang Dũng, đã
tận tình hướng dẫn chúng tôi trong đợt thực tập này.


I.

GIỚI THIỆU CHUNG

1. Giới thiệu môi trường thực tập
- Được thành lập vào năm 2007, công ty TNHH phát triển phần mềm Toshiba
Việt Nam (TSDV) là công ty phần mềm 100% vốn đầu tư nước ngoài của
tập đoàn Toshiba Nhật Bản. TSDV chuyên phát triển phần mềm cho cơ sở
hạ tầng xã hội và các thiết bị điện tử. Đồng thời TSDV cũng phát triển các
công cụ hỗ trợ cho tập đoàn Toshiba. TSDV hướng đến trở thành một công
ty hàng đầu trong lĩnh vực phát triển phần mềm tại Việt Nam.
- Với một môi trường làm việc chuyên nghiệp, Công ty đã giúp cho sinh viên
thực tập chúng tôi nắm được kiến thức thực tế và kinh nghiệm trong các vấn
đề mang tính chuyên nghiệp như:
+ Hiểu và có kinh nghiệm về Hệ thống nhúng.
+ Hiểu và có kinh nghiệm về Qui trình phát triển phần mềm.
+ Hiểu và có kinh nghiệm về Môi trường làm việc chuyên nghiệp thực sự.
- Trong quá trình thực tập tại TSDV, nhóm chúng tôi được tham gia phát triển
một dự án nhỏ. Chúng tôi được học quy trình phát triển phần mềm của
TSDV, dựa vào những kiến thức đó để áp dụng vào dự án được giao.
- Chúng tôi được các anh chị trong công ty hướng dẫn, chỉ bảo một cách nhiệt
tình, giúp cho chúng tôi hoàn thành thực tập đúng hạn và có kết quả. Anh
Đỗ Việt Trung là người hướng dẫn chính của chúng tôi trong suốt quá trình

thực tập này, từ việc phân tích yêu cầu bài toán đến thiết kế, tiếp đó là quá
trình viết code và viết test case,…Ngoài ra chúng tôi còn được anh Nguyễn
Đức Thịnh chỉ dẫn trong giai đoạn thiết kế sản phẩm. Chị Đặng Thị Hồng
Yến chỉ dẫn cho chúng tôi về quy trình thực hiện viết các test case. Đặc
biệt, thực tập ở công ty chúng tôi phải tuân thủ những quy tắc cũng như
những quy định của công ty giống như một nhân viên chính thức của
công ty với giờ làm việc là 08 giờ/ngày, 40 giờ /tuần.

2. Giới thiệu qua về dự án
- Review là một phần quan trọng trong quá trình phát triển phần mềm. Ở
TSDV, công việc Review vẫn còn làm thủ công, chưa có một công cụ hỗ trợ


nên tốn khá nhiều thời gian và công sức của nhân viên.Vì vậy, nhóm thực
tập đã phát triển một ứng dụng web hỗ trợ công việc Review với những chức
năng cơ bản giúp cải thiện hiệu quả công việc của nhân viên.

3. Phân công công việc
STT Tên thành viên

Công việc cụ thể

1

Trương Văn Hưng

Làm tài liệu SRS,Design,Coding : Annotation tool
(liên quan tới bắt tọa độ vùng được chọn) và chỉnh
sửa PDF.js và tổng hợp các báo cáo.

2

Chu Văn Minh

Làm tài liệu SRS,Design,Coding : các chức năng
trên Yii framework (như upload file pdf,hiển thị danh
sách document,…),database và Testing.

3

Đỗ Văn Phong

Làm tài liệu SRS,Design,Coding : Annotation tool
(liên quan tới khả năng khôi phục vùng đã được lưu)
và chỉnh sửa PDF.js.

4

Đỗ Thành Trung

Làm tài liệu SRS,Design,Coding : các chức năng
trên Yii framework (hiển thị danh sách các issue,hiển
thị theo dạng đồ thị,export csv file,…),database và
Testing.

5

Nguyễn Tiến Trung

Làm tài liệu SRS,Design,Coding : các chức năng

trên Yii framework (quản lý user và nhúng PDF.js
vào Yii) và Testing.

II. MÔ TẢ DỰ ÁN
1. Mô tả bài toán
a. Tình trạng thực tế
- Mặc dù công việc Review được thực hiện hầu hết ở các nhóm trong công ty,
nhưng có sự khác biệt trong cách thực hiện giữa nhóm này với nhóm khác.
Ví dụ vẫn còn thiếu một cách chung để tìm hay phân loại các lỗi.


- Công việc review còn thực hiện thủ công, mỗi báo cáo được ghi trên file
dạng excel dẫn đến sự bất tiện khi tổng hợp.
- Ngoài ra, còn thiếu một công cụ để tổng kết và phân tích lỗi theo nhiều
khung nhìn khác nhau (Ví dụ như : Từ phía giám đốc, nhân viên PJL, ….).
- Do những nguyên nhân trên, công việc Review vẫn cần nhiều thời gian và
công sức để hoàn thiện một báo cáo.
b. Giải pháp
- Xây dựng một ứng dụng web cho phép người dùng quản lý việc review của
các dự án. Trong mỗi dự án, người quản trị có thể quản lý nhân viên nào
hiện đang tham gia dự án, người dùng bình thường có thể thêm, chỉnh sửa
hoặc xóa những tài liệu trong dự án mà họ đang tham gia. Tương ứng với
mỗi tài liệu là một file PDF. Trong phần hiển thị nội dung file PDF, người
dùng có thể thêm, chỉnh sửa hoặc xóa các ghi chú trên file PDF đó. Người
dùng có thể tổng hợp các vấn đề (issue) thông qua hai khung nhìn là : danh
sách hoặc đồ thị. Tất cả các thông tin liên quan tới công việc review của
từng dự án sẽ được lưu trữ trong cơ sở dữ liệu.

2. Môi trường phát triển
- Phía Server : Hệ điều hành Ubuntu Linux có cài đặt Apache2, PHP5 và

MySQL.
- Phía Client : trình duyệt Firefox 22.0 có cài shockware flash.
- Ngôn ngữ lập trình : PHP, javascript, css và HTML.
- Phương thức lập trình : OOP.
- Hệ quản trị cơ sở dữ liệu: MySQL5.
- Framework : Yii framework
- Design pattern : MVC.

3. Các chức năng của ứng dụng PDF Review


Hình 1 : Biểu đồ ca sử dụng
ID

Function name

LO-01

Đăng nhập

DOC01
DOC02
DOC04

Thêm tài liệu

Description

Priorit
y

Cho phép người dùng đăng nhập vào hệ Trung
thống
bình
Cho phép người dùng upload một tài
Cao
liệu mới lên cơ sở dữ liệu.

Hiển thị danh sách Hiển thị danh sách tài liệu đang có
tài liệu
trong project
Hiển thị nội dung tài Hiện thỉ nội dung tài liệu (file pdf)
liệu

Cao
Cao


DOC05
DOC06
DOC07
DOC08
DOC09
DOC10

Thêm một issue vào Cho phép người dùng thêm một issue
tài liệu đang xem
vào tài liệu đang xem.
Xóa một issue
Cho phép người dùng xóa một hoặc
nhiều issue trên tài liệu đang xem.

Hiển thị danh sách Hiển thị danh sách issue theo list hoặc
issue
đồ thị
Chỉnh sửa một issue Chỉnh sửa một issue trên tài liệu đang
xem
Thêm một project
Thêm một project vào cơ sở dữ liệu
Quản lý project

Cho phép admin quản lý những người
tham gia dự án

Cao
Cao
Cao
Cao
Trung
bình
Trung
bình

Bảng 1 : Các chức năng chính của ứng dụng PDF Review

4. Mô tả chi tiết yêu cầu chức năng
a. Đăng nhập, đăng xuất, quản lý tài khoản người dùng.
- Cho phép hiển thị, tạo, xóa tài khoản và sửa chữa thông tin người dùng:
- Chỉ có admin mới có đầy đủ quyền hiển thị, tạo mới, chỉnh sửa thông tin
tài khoản, xóa tài khoản người dung. Đối với các người dùng khác chỉ có
thể hiển thị thông tin và chỉnh sửa thông tin tài khoản.
- Không cho phép hiển thị password người dùng trừ tài khoản admin.

b. Hiển thị danh sách các tài liệu
- Lấy dữ liệu từ cơ sở dữ liệu và hiển thị dưới dạng bảng.
- Cho phép người dung sắp xếp, tìm kiếm theo từng trường.
c. Upload document
- Cho phép người dùng đưa tài liệu lên server.
- Chỉ có file pdf mới được chọn để tải lên.
- Tên đúng định dạng, không có kí tự đặc biệt.
d. Hiển thị chi tiết nội dung file pdf
- Hiển thị nội dung của file pdf cùng với các issue được bôi màu của file
đó và bảng danh sách rút gọn của các issue ứng với file pdf được hiển thị.
- Hiển thị nội dung file pdf thông qua đường dẫn tới thư mục lưu trữ file
“/assets/uploads/documents”
- Lấy dữ liệu từ database và hiển thị dưới dạng bảng rút gọn gồm issue_id,
issue_type, issue_pagenumber, reviewer. Bảng này có thể được sắp xếp
và tìm kiếm theo các cột tương ứng.


e. Thêm, sửa hoặc xóa issue khi đang hiển thị file pdf
- Thêm một ghi chú vào file PDF.
- Sửa một Issue do chính người dùng đó tạo.
- Xóa một issue do chính người dùng đó tạo.
f. Hiển thị danh sách các project, issues.
- Lấy dữ liệu từ database và hiển thị dưới dạng bảng.
- Bảng cho phép người dùng sắp xếp, tìm kiếm theo từng trường.
g. Xuất dữ liệu từ bảng ra file CSV.
- Cho phép người duất dữ liệu từ bảng ra file có định dạng CSV.
h. Thống kê issues và hiển thị dưới dạng biểu đồ.
- Hiển thị tỉ lệ các loại issue dưới dạng biểu đồ tròn (pie chart).
- Hiển thị tỉ lệ mức độ của các issue dưới dạng biểu đồ tròn (pie chart).
- Hiển thị số issue theo mức độ cụ thể mỗi user tìm được dưới dạng biểu

đồ tầng (stacked column).
i. Quản lý, phân quyền truy cập cho các user trong các project.
- Cho phép admin xem danh sách các user nào đang thuộc project và cấp
quyền tham gia vào project cho các user.
- Không cho phép những user không thuộc project truy cập vào trang của
project đó hoặc các tài liệu và issue thuộc project đó.

III. CÔNG NGHỆ VÀ GIẢI PHÁP
1. Công nghệ và thuật toán
a. Giới thiệu về Yii Framework và MVC.
i. MVC (Model-View-Controller) là một kiến trúc phần mềm hay
mô hình thiết kế được sử dụng trong kỹ thuật phần mềm. Nó giúp
cho các developer tách ứng dụng của họ ra 3 thành phần khác nhau
Model, View và Controller. Trong đó Model thể hiện các thông tin
(dữ liệu) các quy tắc; View chứa các thành phần thuộc về giao diện
người dùng như text, form input; Controller quản lý việc giao tiếp
giữa Model và View.


ii. Yii: là một PHP Framework mã nguồn mở theo mô hình MVC, có
hiệu quả xử lý cao, phát triển tốt nhất trên các ứng dụng Web 2.0,
sử dụng tối đa các thành phần để tăng tốc độ viết ứng dụng.
- So sánh với các framework khác Yii tốt hơn các framework khác
bởi tính hiệu quả, nhiều tính năng và tài liệu hướng dẫn đầy đủ.
Yii được thiết kế cẩn thận từ ban đầu để đáp ứng nhu cầu phát
triển ứng dụng Web nghiêm ngặt. Yii không phải là sự trộn lẫn
của các dự án đã qua hay tập hợp các 3rd party library. Nó là kết
quả của kinh nghiệm phát triển ứng dụng Web lâu năm của các
tác giả và sự phân tích kỹ lưỡng, tận dụng những điểm mạnh của
các framework khác.

- Kế thừa:
 Prado: là tiền thân của Yii. Yii làm theo những ý tưởng về
component-base, "event-driven programming paradigm",
các lớp database abstraction, kiến trúc ứng dụng theo các
module, "internationalization and localization",...
 Rubi on Rails: kế thừa các quy ước của ROR thông qua
cấu hình.
 jQuery: jQuery được tích hợp sẵn trong Yii và được sử
dụng như một Javascripts framework.
 Symfony: Yii tham khảo cách thiết kế các bộ lọc (filter
design) của Sym và kiến trúc plug-in của nó.
 Joomla: Yii tham khảo thiết kế module (modular design)
và message translation scheme.


Hình 1 : Cấu trúc tĩnh của một ứng dụng Yii
b. CGridView.
- Là một widget của Yii cho phép hiển thị danh sách dữ liệu dưới dạng
bảng. Mỗi hàng của bảng tương ứng với dữ liệu của một data item và các
cột tương ứng với thuộc tính của item đó.
o CGridView hỗ trợ cả sắp xếp và phân trang có thể được gọi qua
ajax hoặc request bình thường của người dùng thông qua url.
o Ưu điểm của CGridView đó là khi người dùng tắt javascript, phân
trang sẽ tự động chuyển sang request dưới dạng url. Ví dụ muốn
sắp xếp cột issue_date và gọi đến trang thứ 2, url request sẽ có
dạng (Issues là tên class model):
http://localhost/pdfreview/index.php/issues/list/125?Issues_sort=iss
ue_date&Issues_page=2
c. PHPExcel.
- PHPExcel cung cấp một tập các class cho ngôn ngữ lập trình PHP, cho

phép ghi và đọc các định dạng file bảng tính: Excel (BIFF) .xls, Excel
2007 (OfficeOpenXML) .xlsx, CSV, Libre/OpenOffice Calc .ods,
Gnumeric, PDF, HTML, ...
Trang chủ:


d. EExcelView.
- Một widget được mở rộng từ CGridView và bao gồm thêm PHPExcel. Ý
tưởng chính là xuất các lưới ghi (grid) đã được xác định trước vào file
excel. Widget này sẽ tạo ra bảng dữ liệu tương tự như của CGridView và
dùng PHPExcel để xuất ra file.
e. OpenFlashChart2Widget.
- Widget này sử dụng thư viện OpenFlashChart2 để đưa các đối tượng đã
được khởi tạo vào và hiển thị dưới dạng biểu đồ.
- Ngoài hiển thị biểu đồ, OpenFlashChart2 còn hỗ trợ các chức năng:
o Tooltips cho việc hiển thị dữ liệu biểu đồ.
o Xử lý giá trị null.
o Cho phép người xem điều chỉnh kích thước biểu đồ.
o Lưu biểu đồ dưới dạng ảnh.
- Để hiển thị biểu đồ sử dụng OpenFlashChart2 yêu cầu trình duyệt đã
được cài Shockwave Flash.
f. CUploadedFile
- Là một thư viện của Yii cho phép người dùng có thể tải lên server các
file. Có thể thiết lập được kiểu file cho phép tải lên.
g. PDF.js
- PDF.js là một công cụ mã nguồn mở cho phép hiển thị nội dung file PDF
trên nền web.
- PDF.JS là một thư viện được viết bằng javascript. Thư viện này biến đổi nội
dung của file PDF thành các nội dung HTML và hiển thị nội dung HTML
này lên trình duyệt. Mỗi trang trên file PDF tương ứng với một thẻ div trên

mã HTML.
- PDF.JS còn cung cấp một số tính năng khác như : zoom, download file,..
h. Rangy
- Đây là thư viện javascript liên quan đến tương giác giữa người dùng các
vùng Range hoặc các lựa chọn Selection .
- Một số tính năng chính của Rangy :
+ Cung cấp các API làm việc với Range và Selection trên hầu hết các trình
duyệt (IE 6+, Chrome, Firefox,…).


+ CSSApplierModule cung cấp chức năng chèn style css vào vùng được
chọn.
+ SelectionSaveRestoreModule cung cấp chức năng lưu vị trí vùng chọn, từ
vị trí đó có thể khôi phục vùng chọn nếu có reload trang.
+ Ngoài ra còn có các module khác như HighlighterModule,
SerializerModule là các module nhỏ hỗ trợ hai tính năng chính ở trên.
i. QPDF.JS
- Extension: hay được sử dụng trong việc phát triển ứng dụng trên Yii
Framework. Extension có thể là thừa kế lớp CController khi tạo mới một lớp
controller hay tạo một widget mới bằng việc mở rộng từ CWidget hoặc của
một widget đã có sẵn. Một extension được sử dụng cho một mục đích và
được phân loại thành application, behavior, widget, Controller, Action,
filter, console command, validator, module.
- QPDF.JS là một extension của Yii framework. Bản chất của QPDF.JS chính
là PDF.JS. Nó được thay đổi để nhúng được PDF.JS vào các view của Yii.
- Link:
o />o />
2. Giải pháp
a. Quản lý đăng nhập đăng xuất tài khoản người dùng:
- Sử dụng các lớp mà Yii cung cấp sẵn khi cài đặt: lớp SiteController với các

action Login và action Logout, tạo lớp LoginForm với phương thức login()
để xác nhận người dùng.
- SiteController thực thi action Login sẽ lấy thông tin người dùng nhập vào từ
view login , tạo một đối tượng LoginForm với các thông tin người dùng
nhập vào và gọi tới login() để xác nhận các thông tin tài khoản. Khi người
dùng logout thì action Logout được thực hiện và đưa về trang đăng nhập ban
đầu.
b. Quản lý tài khoản người dùng
- Tạo lớp model User chứa thông tin tài khoản người dùng, UserController để
thực thi các action Create, Update, Delete tương ứng với các view. Riêng
action Create, Delete chỉ được gọi với tài khoản admin. Action Update sẽ


căn cứ vào người dùng hiện thời có phải là admin hay không để gọi tới view
“_formadmin” hay “_formupdate”. “_formadmin” cho phép admin thay đổi
thông tin người dùng mà không cần xác nhận mật khẩu còn với người dùng
thường việc thay đổi thông tin cần xác nhận mật khẩu.
- Các lớp trên cùng với các action được Yii hỗ trợ tạo khung sẵn và ta cần
chỉnh lại accessRule của UserController, các Action Create, Update, Delete;
rules() trong lớp model Users.
c. Hiển thị danh sách tài liệu
- Tạo class model ReviewItems gồm các hàm truy vấn dữ liệu từ
database, class ReviewItems Controller với các hàm action thể hiện các
view tương ứng.
- Khi người dùng gửi request, controller khởi tạo đối tượng model và
hiển thị ra view tương ứng.
- File view có trách nhiệm lấy dữ liệu từ controller gửi đến và gọi
CGridView để hiển thị thông tin dưới dạng bảng
d. Upload file
- Tạo class model ReviewItems gồm các hàm truy vấn dữ liệu từ

database, class ReviewItems Controller với các hàm action thể hiện các
view tương ứng.
- Khi người dùng gửi request, controller khởi tạo đối tượng model và
hiển thị ra view tương ứng.
- File view có trách nhiệm đẩy dữ liệu lên controller để thực hiện các
thao tác upload file.
- Khi dữ liệu được đẩy lên controller, dữ liệu được save vào cơ sở dữ
liệu bảng tbl_reviewitems đồng thời cũng đẩy file lên server. Sau khi
save, tên file được lưu trữ và đường dẫn file được ghi vào cơ sở dữ liệu
bảng tbl_documents.
e. Hiển thị danh sách issue.
- Tạo class model Issues gồm các hàm truy vấn dữ liệu từ database, class
IssuesController với các hàm action thể hiện các view tương ứng.
- Khi người dùng gửi request, controller khởi tạo đối tượng model và
hiển thị ra view tương ứng.
- File view có trách nhiệm lấy dữ liệu từ controller gửi đến và gọi
CGridView để hiển thị thông tin dưới dạng bảng.


f. Xuất dữ liệu ra file CSV.
- Trong IssueController tạo actionExport2CSV có trách nhiệm lấy dữ
liệu từ model và gọi đến widget EExcelView.
- Khi người dùng bấm vào button export nghĩa là gọi đến
actionExport2CSV. Thông tin sẽ được chuyển dưới dạng bảng tương
tự CGridView đưa vào file CSV nhờ PHPExcel và tự động tải về máy
của người dùng.
g. Hiển thị issues dưới dạng biểu đồ.
- Khi người dùng gửi request, controller khởi tạo đối tượng model và
hiển thị ra view tương ứng.
- Mỗi biểu đồ tương ứng với một hàm truy vấn dữ liệu trong model. File

view lấy dữ liệu từ các hàm, cài đặt các tham số và gọi đến widget
OpenFlashChart2 để hiển thị ra dạng biểu đồ.
h. Quản lý, phân quyền truy cập cho user (tác vụ của admin).
- Trong cơ sở dữ liệu, 2 bảng tbl_projects và tbl_users có quan hệ nhiều
nhiều, ta tạo thêm bảng liên kết giữa 2 bảng này gồm các trường
role_id, project_id (id của project) và user_id (id của user thuộc project
đó).
- Sau khi truy cập vào một project và chọn chức năng chỉnh sửa quyền
truy cập, trang chỉnh sửa quyền truy cập project gồm 2 trường selected
và unselected hiển thị những người đã thuộc project và những người
chưa thuộc project, admin có thể chuyển user qua lại giữa 2 trường.
Thông tin hiển thị là user_name nhưng khi thông tin gửi đi sẽ là
user_id.
- Khi bấm button save, thông tin của 2 trường sẽ được gửi đến controller
xử lý:
 Đối với trường selected: dùng vòng lặp, controller kiểm tra nếu
có user nào mới được thêm sẽ thực hiện insert hàng dữ liệu mới
gồm project_id hiện thời và user_id của user đó và bảng liên kết.
 Đối với trường unselected: dùng vòng lặp, controller kiểm tra
nếu có user nào đang thuộc project đó, controller sẽ tiến hành
xóa hàng dữ liệu có user_id và project_id tương ứng.
- Khi user gửi yêu cầu hiển thị một project hoặc document hay issue
trong project đó, controller sẽ kiểm tra user_id hiện thời và project_id
request có tồn tại trong bảng liên kết hay không. Nếu đã tồn tại, trang


view sẽ được hiển thị, ngược lại, trang thông báo lỗi truy cập sẽ được
hiển thị cho user.
i. Hiển thị nội dung chi tiết của tài liệu
- Hiển thị nội dung của file PDF:

 Tạo ra lớp DocumentController với hàm action “ViewPDF” tương
ứng với view “ViewPDF” để hiển thị nội dung của file PDF. Tạo lớp
model Document để tạo một đối tượng Document khi lớp
DocumentController thi hành action ViewPDF.
 Sử dụng extension Qpdfjs cùng với thư viện pdf.js để có thể hiển thị
nội dung file PDF và các issue.
 Khi có request từ người dùng DocumentController sẽ gọi action
ViewPDF. Action sẽ reviewitem_id được gửi qua view “index” thuộc
reviewitems, từ đó sẽ lấy được đối tượng Document cùng với danh
sách các issue tương ứng với reviewitem_id và được truyền tới view
“viewpdf”. Tại đây sẽ xác định được đường dẫn tới file PDF cần hiển
thị bằng thuộc tính doc_name của đối tượng Document đã truyền vào.
Kết hợp với extension Qpfjs và widget CGridView ta sẽ hiển thị được
nội dung cùng với các issue cũng như danh sách rút gọn các issue của
file PDF đó.
j. Annotation tool
- PDF.JS không hỗ trợ việc thêm các ghi chú vào file pdf nên nhóm đã phát
triển một công cụ có thể làm việc này, tạm gọi là Annotation tool.
- Annotation tool có 3 chức năng chính là : thêm ghi chú, sửa ghi chú và xóa
ghi chú trên nội dung file pdf đang được người dùng xem.
- Ý tưởng chính của Annotation Tool :
 Dựa vào cấu trúc thẻ HTML chứa nội dung file PDF ta biết mỗi
trang tương ứng với một pageContainer (Ví dụ : trang 1 là
pageContainer1). Việc tạo mới hay khôi phục một Annotation
sẽ dựa vào vị trí tương đối của vùng được chọn (Range
Selection) so với pageContainer tương ứng.
- Khi tạo mới Annotation:
 Người dùng sẽ bôi đen đoạn text cần được ghi chú, khi đó Rangy
CSSApplierModule sẽ tiến hành bôi đen tạo màu cho đoạn text đó
một cách tạm thời để đánh dấu trong thời gian người dùng nhập dữ

liệu.. Người dùng sau khi nhập thông tin và lưu lại Annotation thì hệ
thống sẽ lưu lại vị trí (bao gồm 2 tham số: start và end) của đoạn text
vừa được bôi đen và pageContainer tương ứng.
 Sau đó tiến hành khôi phục trực tiếp annotation vừa tạo ra bằng cách
lấy ra annotation mới nhất vừa mới thêm vào cơ sở dữ liệu và tiến
hành highlight đoạn text vừa thêm.
- Khi khôi phục Annotation từ cơ sở dữ liệu:
 Hệ thống sẽ lấy từ cơ sở dữ liệu các tham số start, end và pageContainer.
Từ 3 tham số này, hệ thống sẽ tự động bôi đen tạm thời đoạn text tương
ứng với ba tham số đó (Đây là Restore Range Selection). Sau đó, Rangy
CSSApplierModule sẽ thực hiện công việc chèn đoạn mã style css vào
đoạn text tương ứng. Lúc này đoạn text đã được highlight và có
background màu vàng. Người dùng nhìn vào đó có thể nhận biết đó là
đoạn text có ghi chú. Khi di chuột qua đoạn text đó, các thông tin chi tiết
của ghi chú sẽ được hiện lên cho người dùng xem.
 Vấn đề load lại: Pdf.js có đặc điểm là chỉ load tới những trang đang xem
và sắp xem để cho vào bộ đệm, những trang nào ở xa vị trí đang xem sẽ
bọ xóa đi để giảm tải, khi khung view kéo đến đâu mới load tới đó. Vì
vậy mỗi lần một trang nào đó bị xóa đi thì annotation đã highlight ở vùng
đó cũng bị xóa theo.
 Cách giải quyết: Đồng bộ hóa quá trình khôi phục với quá trình
load trang của pdf.js. Tức là mỗi lần pdf.js load đến trang nào thì ta
lại tiến hành khôi phục annotation ở trang đó
- Khi xóa Annotation:
 Mỗi annotation đều bao gồm sẵn ba tham số là start, end, pageContainer.
Khi người dùng kích vào nút xóa thì có thể bôi đen tạm thời annotation
đó và sử dụng CSSApplierModule để bỏ highlight đồng thời gửi các
thông tin của annotation đó về cơ sở dữ liệu và xóa nó khỏi cơ sở dữ liệu.

- Khi sửa Annotation:
 Tương tự như xóa, khi người dung sửa sẽ thay đổi các tham số của các
annotation và gửi thông tin sửa về cơ sở dữ liệu để cập nhật lại.


IV. MÔ TẢ PHẦN MỀM
- Dưới đây là những hình ảnh chụp từ chương trình PDFReview :

Hình 1: Trang Login hệ thống

Hình 2 : Hiển thị danh sách các tài liệu trong một Project


Hình 3 : Upload một tài liệu vào project

Hình 4 : Thêm một issue vào tài liệu đang xem


Hình 5 : Hiển thị chi tiết một issue có sẵn

Hình 6 : Hiển thị danh sách các issue trong một tài liệu


Hình 7 : Tìm kiếm issue với 2 trường Issue Type và Issue Severity

Hình 8 : Sắp xếp danh sách issue theo cột Issue Page


Hình 9 : Hiển thị biểu đồ tổng hợp các issue

Hình 10 : Phân quyền truy cập


V. KẾT QUẢ ĐẠT ĐƯỢC, HƯỚNG PHÁT
TRIỂN
1. Kĩ năng, kiến thức học được
Project về cơ bản đã đáp ứng hầu hết các yêu cầu cơ bản như hiển thị file PDF
cùng với các issue; cho phép tạo mới, chỉnh sửa, xóa các issue; liệt kê các issue
theo danh sách và biểu đồ… Ứng dụng cũng được hoàn thiện về luồng thao tác,
xử lý một cách dễ hiểu, hợp lý theo yêu cầu được đề ra. Tuy nhiên do hạn chế
về thời gian nên ứng dụng vẫn còn một số hạn chế như:
- Chưa đáp ứng được chức năng nhảy đến vị trí issue trên file PDF khi click
issue đó trong danh sách rút gọn. Điều này phần nào làm giảm tính tiện dụng
của chương trình.
- Chưa kết hợp được với LDAP của công ty để thống nhất việc người dùng
chỉ cần một tài khoản sử dụng được trong các công việc khác nhau. HIện
thời ứng dụng này vẫn cần một bảng dữ liệu riêng để quản lý tài khoản
người dùng.
Tuy vậy trong tương lai việc hoàn thiện các yêu cầu trên là hoàn toàn có thể làm
được dựa trên những gì đã xây dựng hiện thời.
Qua thời gian thực tập từ 22/7/2011 – 21/08/2013 tại TSDV, chúng tôi gặp
không ít những khó khăn nhưng được sự giúp đỡ rất nhiệt tình của các anh chị
trong Công ty nên chúng tôi đã hoàn thành thực tập đúng thời gian và đúng yêu
cầu. Ngoài ra, chúng tôi cũng học được:
- Phong cách làm việc chuyên nghiệp của các anh chị trong TSDV.
- Biết cách sắp xếp thời gian biểu tạo điều kiện cho công việc đi làm sau này.
- Kỹ năng làm việc nhóm. Biết phân công công việc dựa theo năng lực của mỗi
thành viên.
- Học được thêm cách phát triển dựa trên framework.
- Có kinh nghiệm trong việc làm dự án như: phân tích yêu cầu, thiết kế cơ bản,

thiết kế chi tiết, kiểm thử, …