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ủ: http://phpexcel.codeplex.com 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 http://www.yiiframework.com/extension/qpdfjs/ o http://www.yiiframework.com/doc/guide/1.1/en/1.1 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ử, … 2. Hướng phát triển - Hoàn thiện Annotation tool có thể đặt các annotation chồng lên nhau. VI. TÀI LIỆU THAM KHẢO - [1] Yii framework : www.yiiframework.com [2] PDF.JS : http://mozilla.github.io/pdf.js/ [3] Rangy : https://code.google.com/p/rangy/ [4] PHPExcel : http://phpexcel.codeplex.com Ýkiến đánh giá: ……………………………………….………………………… ……………………………………….………………………… ……………………………………….………………………… ……………………………………….………………………… ……………………………………….………………………… ……………………………………….………………………… ……………………………………….………………………… ……………………………………….………………………… Hà Nội, ngày tháng năm 20 Người hướng dẫn (Ký, ghi rõ họ tên & dấu công ty) . Ý kiến đánh giá: ……………………………………….………………………… ……………………………………….………………………… ……………………………………….………………………… ……………………………………….………………………… ……………………………………….………………………… ……………………………………….………………………… ……………………………………….………………………… ……………………………………….………………………… ……………………………………….………………………… Điểm số: ……. Điểm chữ: ………… Hà Nội, ngày tháng năm 20 Giảng viên đánh giá (Ký, ghi rõ họ tên) [...]... đế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... 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... 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,... “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... ứ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... (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... 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... 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... 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... 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 ... phần mềm Ở TSDV, công việc Review làm thủ công, chưa có công cụ hỗ trợ nên tốn nhiều thời gian công sức nhân viên.Vì vậy, nhóm thực tập phát triển ứng dụng web hỗ trợ công việc Review với chức... trình phát triển phần mềm + Hiểu có kinh nghiệm Môi trường làm việc chuyên nghiệp thực - Trong trình thực tập TSDV, nhóm tham gia phát triển dự án nhỏ Chúng học quy trình phát triển phần mềm TSDV,... Đồng thời TSDV phát triển công cụ hỗ trợ cho tập đoàn Toshiba TSDV hướng đến trở thành công ty hàng đầu lĩnh vực phát triển phần mềm Việt Nam - Với môi trường làm việc chuyên nghiệp, Công ty giúp