XÂY DỰNG WEBSITE HỖ TRỢ QUẢN LÝ TRIỂN KHAI ĐỒ ÁN TỐT NGHIỆP

Cơ bản xây dựng và vận hành được một website quản lý quá trình làm ĐATN như mục tiêu và phạm vi đặt ra ban đầu. Về các chức năng chung: Mọi người dùng hệ thống đều phải đăng nhập trước khi sử dụng bất kỳ một chức năng nào. Hệ thống cung cấp chức năng cập nhật thông tin cá nhân cho tất cả người dùng. Về phía chức năng của giáo vụ khoa: Hệ thống đã cho phép giáo vụ khoa có thể tạo mới đợt ĐATN; lập danh sách sinh viên và giảng viên tham gia hướng dẫn trong đợt ĐATN.điều chỉnh và xác nhận phân công giảng viên hướng dẫn; xem thống kê về tình trạng báo cáo tiến độ của sinh viên. Bên cạnh đó, giáo vụ khoa còn có thể dễ dàng quản lý thông tin sinh viên, giảng viên.

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA

KHOA CÔNG NGHỆ THÔNG TIN

MÃ SINH VIÊN : 102110134

Đà Nẵng, 06/2016

LỜI CẢM ƠN

Em xin chân thành cảm ơn các quý thầy cô giáo trong khoa Công Nghệ Thông Tin cùng toàn thể quý thầy cô của trường Đại Học Bách Khoa – Đại Học Đà Nẵng đã tận tình dạy dỗ, truyền đạt cho em những kiến thức quý giá trong suốt những năm học tại trường, là tiền đề và cơ sở giúp cho em thực hiện đồ án này.

Xin chân thành cảm ơn TS.Lê Thị Mỹ Hạnh đã tận tình chỉ bảo, hướng dẫn và giúp đỡ cho em trong suốt quá trình thực hiện để hoàn thành đồ án này đúng thời hạn.

Trong suốt quá trình thực hiện đồ án, mặc dù đã cố gắng hết mình để hoàn thành, nhưng chắc chắn không tránh khỏi thiếu sót, em rất mong nhận được sự thông cảm và góp ý từ phía quý thầy cô và các bạn.

Một lần nữa em xin chân thành cảm ơn!

Hoàng Thị Mai Liên

LỜI CAM ĐOAN

Tôi xin cam đoan:

1 Nội dung trong đồ án này là do tôi thực hiện dưới sự hướng dẫn trực tiếp của TS.Lê Thị Mỹ Hạnh

2 Các tham khảo dùng trong đồ án đều được trích dẫn rõ ràng tên tác giả, tên công trình, thời gian, địa điểm công bố.

3 Nếu có những sao chép không hợp lệ, vi phạm, tôi xin chịu hoàn toàn trách nhiệm.

Sinh viên thực hiện

Hoàng Thị Mai Liên

NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN

NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN

MỤC LỤC

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 5

1.1 SPRING FRAMEWORK 5

1.2 ANGULARJS 9

1.3 KẾT CHƯƠNG 15

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ 16

2.1 PHÂN TÍCH YÊU CẦU 16

2.2 THIẾT KẾ HỆ THỐNG 19

2.3 THIẾT KẾ CƠ SỞ DỮ LIỆU 34

2.4 KẾT CHƯƠNG 35

CHƯƠNG 3: CÀI ĐẶT VÀ TRIỂN KHAI 36

3.1 MÔI TRƯỜNG CÀI ĐẶT 36

3.2 KẾT QUẢ TRIỂN KHAI 36

DANH SÁCH HÌNH ẢNH

HÌNH 1-1: CÁC MODULE CỦA SPRING FRAMEWORK 7

HÌNH 1-2: SINGLE PAGE APPLICATION 9

HÌNH 1-3: KIẾN TRÚC MVC TRONG ANGULARJS 10

HÌNH 1-4: ONE-WAY BINDING VÀ TWO-WAY BINDING 11

HÌNH 2-5: BIỂU ĐỒ CA SỬ DỤNG TỔNG QUÁT 20

HÌNH 2-6: BIỂU ĐỒ CA SỬ DỤNG CỦA NGƯỜI DÙNG 21

HÌNH 2-7: BIỂU ĐỒ CA SỬ DỤNG CỦA GIẢNG VIÊN 21

HÌNH 2-8: BIỂU ĐỒ CA SỬ DỤNG CỦA SINH VIÊN 22

HÌNH 2-9: BIỂU ĐỒ CA SỬ DỤNG CỦA GIÁO VỤ KHOA 23

HÌNH 2-10: BIỂU ĐỒ HOẠT ĐỘNG CHỨC NĂNG ĐĂNG NHẬP 24

HÌNH 2-11: BIỂU ĐỒ HOẠT ĐỘNG CHỨC NĂNG THÊM SINH VIÊN TỪ FILE 24

HÌNH 2-12: BIỂU ĐỒ HOẠT ĐỘNG CHỨC NĂNG SỬA THÔNG TIN SINH VIÊN 25

HÌNH 2-13: BIỂU ĐỒ HOẠT ĐỘNG CHỨC NĂNG XÓA SINH VIÊN 25

HÌNH 2-14: BIỂU ĐỒ HOẠT ĐỘNG CHỨC NĂNG ĐĂNG KÍ GIẢNG VIÊN HƯỚNG DẪN 26

HÌNH 2-15: BIỂU ĐỒ HOẠT ĐỘNG CHỨC NĂNG SINH VIÊN BÁO CÁO TIẾN ĐỘ 26

HÌNH 2-16: BIỂU ĐỒ HOẠT ĐỘNG CHỨC NĂNG GIẢNG VIÊN DUYỆT BÁO CÁO TIẾN ĐỘ 27

HÌNH 2-17: BIỂU ĐỒ HOẠT ĐỘNG CHỨC NĂNG KHỞI TẠO ĐỢT ĐỒ ÁN TỐT NGHIỆP 27

HÌNH 2-18: BIỂU ĐỒ HOẠT ĐỘNG CHỨC NĂNG THÊM GIẢNG VIÊN THAM GIA ĐỢT ĐỒ ÁN 28

HÌNH 2-19: BIỂU ĐỒ TUẦN TỰ CHỨC NĂNG ĐĂNG NHẬP 28 HÌNH 2-20: BIỂU ĐỒ TUẦN TỰ CHỨC NĂNG THÊM SINH VIÊN TỪ

FILE 29 HÌNH 2-21: BIỂU ĐỒ TUẦN TỰ CHỨC NĂNG SỬA THÔNG TIN SINH

VIÊN 29 HÌNH 2-22: BIỂU ĐỒ TUẦN TỰ CHỨC NĂNG XÓA SINH VIÊN 30 HÌNH 2-23: BIỂU ĐỒ TUẦN TỰ CHỨC NĂNG ĐĂNG KÍ GIẢNG VIÊN

HƯỚNG DẪN 30 HÌNH 2-24: BIỂU ĐỒ TUẦN TỰ CHỨC NĂNG SINH VIÊN BÁO CÁO

TIẾN ĐỘ 31 HÌNH 2-25: BIỂU ĐỒ TUẦN TỰ CHỨC NĂNG GIẢNG VIÊN DUYỆT BÁO

CÁO TIẾN ĐỘ 31 HÌNH 2-26: BIỂU ĐỒ TUẦN TỰ CHỨC NĂNG KHỞI TẠO ĐỢT ĐỒ ÁN .32 HÌNH 2-27: BIỂU ĐỒ LỚP 33 HÌNH 2-28: MÔ HÌNH CƠ SỞ DỮ LIỆU QUAN HỆ 35 HÌNH 3-29: GIAO DIỆN CHỨC NĂNG THÊM 1 SINH VIÊN 36 HÌNH 3-30: GIAO DIỆN CHỨC NĂNG THÊM SINH VIÊN TỪ FILE

EXCEL 37 HÌNH 3-31: GIAO DIỆN CHỨC NĂNG XEM DANH SÁCH SINH VIÊN 37 HÌNH 3-32: GIAO DIỆN CHỨC NĂNG GIÁO VỤ KHOA TẠO ĐỢT ĐỒ ÁN

TỐT NGHIỆP 38 HÌNH 3-33: GIAO DIỆN HIỆN THỊ CHI TIẾT VỀ THỜI GIAN CỦA ĐỢT

ĐATN 39 HÌNH 3-34: GIAO DIỆN CHỨC NĂNG GIẢNG VIÊN XEM DANH SÁCH

ĐỢT ĐATN 40

HÌNH 3-36: GIAO DIỆN CHỨC NĂNG GIẢNG VIÊN DUYỆT BÁO CÁO

TIẾN ĐỘ 41 HÌNH 3-37: GIAO DIỆN CHỨC NĂNG SINH VIÊN XEM CHI TIẾT ĐỢT

ĐATN 42 HÌNH 3-38: GIAO DIỆN CHỨC NĂNG SINH VIÊN ĐĂNG KÍ GIẢNG VIÊN

HƯỚNG DẪN 43 HÌNH 3-39: GIAO DIỆN SINH VIÊN XEM DANH SÁCH BÁO CÁO TIẾN

ĐỘ 43 HÌNH 3-40: GIAO DIỆN CHỨC NĂNG SINH VIÊN XEM VÀ SỬA BÁO

CÁO TIẾN ĐỘ 44

MỞ ĐẦU

1 Tổng quan về đề tài

Hiện nay Công nghệ thông tin ngày càng phát triển và đã đem lại rất nhiềuthành tựu to lớn trong các hoạt động của con người Nhằm hòa nhập với xu thếchung của thời đại, cải tiến đổi mới trong hoạt động quản lý, thông tin cập nhậtnhanh chóng, chính xác, thuận tiện thì chúng ta cần đẩy mạnh hơn nữa việc ứngdụng công nghệ thông tin để mang lại hiệu quả cao trong công việc

Có thể nói rằng trong bất kỳ ở đâu có một tổ chức, là ở đó có nhu cầu quản

lý Các hoạt động quản lý rất đa dạng nhưng có nhưng đều có đặc điểm chung làphải xử lý một khối lượng thông tin lưu trữ lớn Vì vậy, việc đẩy mạnh ứng dụngcông nghệ thông tin vào bài toán quản lý là hết sức cần thiết

Tại khoa Công nghệ thông tin – Đại học Bách Khoa – ĐHĐN, hàng năm tổchức nhiều đợt đồ án tốt nghiệp, với mỗi đợt làm đồ án tốt nghiệp như vậy có nhiềucông việc cần được quản lý như: Quản lý sinh viên, giảng viên tham gia đợt đồ ántốt nghiệp; Quản lý đăng ký giảng viên hướng dẫn; Quản lý đề tài đồ án của sinhviên; Quản lý báo cáo tiến độ của sinh viên… Thế nhưng, hiện nay vẫn chưa cóphần mềm nào hỗ trợ công tác quản lý, mọi công việc vẫn đang được thực hiện thủcông dẫn tới một số hạn chế như: Giáo vụ khoa có lượng công việc lớn vì phải xử

lý nhiều dữ liệu; Phân công giảng viên hướng dẫn hầu như không đúng nguyệnvọng của sinh viên; Sinh viên và giảng viên khó nắm bắt thông tin về đợt đồ án;Nộp báo cáo tiến độ còn rườm rà, thủ công…

Từ những hạn chế nêu trên, tôi đề xuất “Xây dựng website hỗ trợ quản lý

triển khai đồ án tốt nghiệp” nhằm giúp cho quá trình quản lý hiệu quả hơn.

2 Mục đích và ý nghĩa của đề tài

2.1 Mục đích

“Xây dựng website hỗ trợ quản lý triển khai đồ án tốt nghiệp” nhằm mục đích

xây dựng kênh thông tin chung để mọi người có thể dễ dàng truy cập và xem mọithông tin nhanh chóng và chính xác Bên cạnh đó, website còn tích hợp một sốchức năng như:

- Giáo vụ khoa có thể sử dụng chức năng quản lý sinh viên, giảng viên, đợt

đồ án tốt nghiệp đồng thời với chức năng tìm kiếm

- Giảng viên có thể cập nhật hướng nghiên cứu của mình để sinh viên thamkhảo, nhằm mục đích tìm kiếm giảng viên phù hợp với mình

- Giảng viên có thể đề xuất sinh viên để hướng dẫn nhằm đảm bảo rằng trongtrường hợp sinh viên và giảng viên đã làm việc với nhau trước đó thì chắcchắn người hướng dẫn đồ án tốt nghiệp cho sinh viên chính là giảng viên đó(tất nhiên là sẽ có sự xác nhận đồng ý của sinh viên)

- Cho phép sinh viên tìm kiếm, xem thông tin và đăng ký giảng viên hướngdẫn Xem mỗi giảng viên như một lớp học phần, số lượng sinh viên tối đa

mà giảng viên đó có thể hướng dẫn như là số lượng sinh viên tối đa cho lớphọc phần đó Thời gian đăng giảng viên sẽ được giới hạn trong khung thờigian nhất định Nếu giảng viên nào có số lượng sinh viên đăng ký bằng với

số lượng sinh viên tối đa có thể hướng dẫn thì không cho phép đăng kýthêm nữa, sinh viên buộc phải đăng ký các giảng viên khác

- Website cung cấp chức năng báo cáo tiến độ Sinh viên có thể làm báo cáotiến độ trong thời gian quy định, giảng viên có thể cho ý kiến và duyệt báocáo tiến độ của sinh viên Báo cáo sẽ được tự động tổng hợp, đưa ra thốngkê

website cung cấp các chức năng tìm kiếm, xem thông tin chi tiết đồ án nhanhchóng, tiện lợi.

2.2 Ý nghĩa

Việc “Xây dựng website hỗ trợ quản lý triển khai đồ án tốt nghiệp” không

những giúp hỗ trợ quá trình quản lý làm đồ án tốt nghiệp hiệu quả hơn mà còn gópphần đẩy mạnh việc sử dụng công nghệ thông tin vào công tác quản lý

- Giáo vụ khoa thực hiện các chức năng quản lý như:

• Quản lý tài khoản của Sinh viên và Giảng viên

• Quản lý thông tin các đợt đồ án tốt nghiệp như danh sách sinh viên,giảng viên tham gia

• Quản lý báo cáo tiến độ và quá trình làm đồ án của sinh viên

• Xuất các báo cáo tổng hợp

- Giảng viên có thể đề xuất sinh viên hướng dẫn, duyệt báo cáo tiến độ củasinh viên và xem thông tin sinh viên Ngoài ra, giảng viên có thể cập nhật cácthông tin cá nhân và các thông tin về hướng nghiên cứu…

- Sinh viên có thể đăng kí giảng viên hướng dẫn, báo cáo tiến độ, xem thôngtin giảng viên và cập nhật thông tin cá nhân cũng như thông tin về đề tài đồ án

4 Phương pháp thực hiện

− Chức năng hóa các tác vụ quản lý.

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

5 Bố cục của đồ án

Đồ án bao gồm các nội dung sau:

* Mở đầu

* Chương 1: Cơ sở lý thuyết

Trình bày lý thuyết cơ bản về Spring Framework, AngularJS, Bootstrap,HTML5, CSS3

* Chương 2: Phân tích và thiết kế

Phân tích đặc tả yêu cầu và thiết kế hệ thống website hỗ trợ quản lý quá trìnhlàm đồ án tốt nghiệp

* Chương 3: Cài đặt và triển khai

Triển khai xây dựng chương trình, trình bày xây dựng những module chínhcủa chương trình, kết quả demo của chương trình

* Kết luận và hướng phát triển.

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT1.1 SPRING FRAMEWORK

1.1.1 Tổng quan về Spring Framework

Spring framework, hay ngắn hơn là Spring, là một cấu trúc dùng để xây dựngchương trình ứng dụng mã nguồn mở dành cho ngôn ngữ lập trình Java Phiên bảnđầu tiên của nó do Rod Johnson viết và đã được ông xuất bản cùng với quyển sáchđầu tay Expert One-on-One JavaEE Design and Development (Nhà xuất bảnWroxPress, Tháng 10 năm 2002)

Tuy Spring framework không bắt buộc người ta phải tuân theo một mô hìnhlập trình cụ thể nào, song nó lan truyền rộng rải trong cộng đồng những người viếtchương trình dùng Java, như một hình thức chủ yếu thay thế cho mô hìnhEnterprise Java Bean

Theo thiết kế, bộ framework này giải phóng lập trình viên dùng Java, chophép họ nhiều quyền tự do hơn và đồng thời cung cấp một giải pháp tiện lợi, đầy

đủ dẫn chứng bằng tài liệu, dễ dàng sử dụng, phù hợp với những thực hành thôngdụng trong công nghệ phần mềm

Bên cạnh những đặc trưng nền tảng của Spring framework là những cái có thểdùng được trong bất cứ một chương trình ứng dụng Java nào, rất nhiều các mởrộng và tiến bộ trong việc kiến tạo các trình ứng dụng dành cho nền tảng mạngweb (web-based application) dựa trên nền Java Enterprise cũng tồn tại nữa Springframework nổi tiếng cũng một phần do chính đặc thù kể trên và được giới thươngmại công nhận như một nền tảng kiến trúc có tầm quan trọng trong chiến lược kiếntạo phần mềm

1.1.2 Một số khái niệm chính

Hai trong những thành phần chủ chốt và là nền tảng tạo nên sức mạnh củaSpring chính là IoC và DI

1.1.2.1 Inversion of Control (IoC)

IoC Container trong Spring được xây dựng dựa trên nguyên lý Inversion ofControl (đảo ngược điều khiển) đã xuất hiện khá lâu trong các mẫu hình thiết kế(design pattern), và được phổ biến rộng rãi nhờ Robert C Martin và MartinFowler Để hiểu về Spring, trước tiên chúng ta cần hiểu khái niệm IoC là gì? Muốnvậy, chúng ta cần trả lời câu hỏi: Control (điều khiển) trong chương trình phầnmềm là gì, và Inversion (sự đảo ngược) đối với điều khiển trong ngữ cảnh nàyđược hiểu như thế nào?

Khái niệm “đảo ngược” ở đây chính là chuyển nhiệm vụ kiểm soát lưu trìnhthực thi từ ứng dụng cho một thành phần chuyên trách (thường là một thư việnphần mềm khung – framework – dựng sẵn ở bên ngoài) Ứng dụng chính chúng taquan tâm phát triển không kiểm soát việc điều khiển luồng thực thi nữa, mà chỉ tậptrung vào việc định nghĩa chức năng Thư viện phần mềm khung chuyên tráchkiểm soát điều khiển sẽ dựa trên mô tả trong cấu hình của ứng dụng để thay mặtứng dụng điều phối luồng thực thi trong chương trình

Nói một cách ngắn gọn IoC là một design pattern và tập hợp các kỹ thuật lậptrình liên quan, trong đó luồng thực thi của một hệ thống bị đảo ngược so với cáchtương tác truyền thống [4, tr1] IoC trong Spring cũng hoàn toàn mang ý nghĩa nhưtrên Trong Spring các đối tượng chính để xây dựng ứng dụng thì được quản lý bởiSpring IoC container Và IoC container gọi các đối tượng đó là các bean Một beanchỉ đơn giản là một đối tượng được khởi tạo và quản lý bởi Spring IoC container

1.1.2.2 Dependency Injection (DI)

Dependency Injection là khả năng liên kết giữa các thành phần lại với nhau,đó

chính là việc các thuộc tính trong một đối tượng được “tiêm chích” (injection) đểtham chiếu lần lượt đến các đối tượng khác Dependency Injection trong Springhoạt động dựa trên Java Reflection

1.1.2.3 Các module

Spring được xây dựng với 7 module chính:

Hình 1-1: Các module của Spring framework

- Spring Core: Core package là phần cơ bản nhất của Spring, cung cấp

những

đặc tính như IoC (Inversion of Control) và DI (Dependency Injection) Kháiniệm cơ bản là BeanFactory, một cài đặt của Factory pattern, cho phép

“móc nối” sự phụ thuộc giữa các đối tượng trong file cấu hình

- Spring Context: Spring context là một file cấu hình để cung cấp thông tin

ngữ cảnh của Spring Spring context cung cấp các service như JNDI access,EJB integration, e-mail, internalization, validation, và schedulingfunctionality

- Spring AOP (Aspect – Oriented Programming): Spring AOP module tích

hợp chức năng lập trình hướng khía cạnh vào Spring framework thông quacấu hình của nó Spring AOP module cung cấp các dịch vụ quản lý giaodịch cho các đối tượng trong bất kỳ ứng dụng nào sử dụng Spring Với

Spring AOP chúng ta có thể tích hợp declarative transaction managementvào trong ứng dụng mà không cần dựa vào EJB component Spring AOPmodule cũng đưa lập trình metadata vào trong Spring Sử dụng cái nàychúng ta có thể thêm annotation vào source code để hướng dẫn Spring nơi

và làm thế nào để liên hệ với aspect

- Spring DAO (Data Access Object): Tầng JDBC và DAO đưa ra một cây

phân cấp exception để quản lý kết nối đến database, điều khiển exception

và thông báo lỗi được ném bởi vendor của database Tầng exception đơngiản điều khiển lỗi và giảm khối lượng code mà chúng ta cần viết như mở

và đóng kết nối Module này cũng cung cấp các dịch vụ quản lý giao dịchcho các đối tượng trong ứng dụng Spring

- Spring ORM (Object Relational Mapping): Spring có thể tích hợp với

- Spring MVC: MVC Framework thì cài đặt đầy đủ đặc tính của MVC

1.2 ANGULARJS

1.2.1 Tổng quan về AngularJS

AngularJS là framework JavaScript được bắt đầu phát triển từ năm 2009, dolập trình viên Misko Hevery tại Google viết ra như là một dự án kiểu “viết chovui” Misko và nhóm lúc này đang tham gia vào 1 dự án của Google tên là GoogleFeedback Với AngularJS, Misko đã rút ngắn số dòng code front-end từ 17000dòng còn chỉ khoảng 1500 Với sự thành công đó, đội ngũ của dự án GoogleFeedback quyết định phát triển AngularJS theo hướng mã nguồn mở Theo thông

số từ Github hiện tại dự án AngularJS đang có gần 11.000 người theo dõi và hơn2.000 lượt fork

Một Single Page Application là một ứng dụng web hiển thị vừa vặn trên mộtmặt của trang với mục đích giúp người dùng có trải nghiệm giống như đang dùngứng dụng trên desktop và làm tăng hiệu suất của ứng dụng Hay nói một cách khác

là ứng dụng chạy bên trong trình duyệt mà không yêu cầu phải tải lại toàn bộ trangweb mỗi lần sử dụng

Hình 1-2: Single Page Application

1.2.2 Các đặc trưng của AngularJS

1.2.2.1 Kiến trúc MVC trong AngularJS

MVC (Model - View - Controller) là một kiến trúc phần mềm hay mô hìnhthiết kế được sử dụng trong kỹ thuật phần mềm Nó giúp cho các nhà phát triểntách ứng dụng của họ ra 3 thành phần khác nhau Model (xử lý, truy xuất database),View (giao diện) và Controller (điều hướng yêu cầu từ người dùng)

Mỗi thành phần có một nhiệm vụ riêng biệt và độc lập với các thành phầnkhác MVC thể hiện tính chuyên nghiệp trong lập trình, phân tích thiết kế Dođược chia thành các thành phần độc lập nên giúp phát triển ứng dụng nhanh, đơngiản, dễ nâng cấp, bảo trì

Hình 1-3: Kiến trúc MVC trong AngularJS

Đối với Angular, View sẽ là DOM, Controller là các lớp JavaScript, cònModel sẽ là dữ liệu được lưu ở thuộc tính của các đối tượng trong JavaScript

dữ liệu từ một trong hai lớp đó đều không liên quan gì đến lớp còn lại Hệ quả làdeveloper phải viết thêm phần “đồng bộ hóa” giữa hai lớp này Đó chính là one-

Tuy nhiên AngularJS có thể thực hiện được cả hai chiều, đó chính là two-waybinding Hay nói một cách khác two-way binding trong AngularJS là tính năngđồng bộ hóa giữa model và view Quá trình đồng bộ luôn xảy ra giữa model vàview Mọi sự thay đổi dữ liệu trong lớp này, ngay lập tức được cập nhật vào lớpkia [7, 11] Chúng ta chỉ cần “bind” một lần, và mọi thứ hoạt động trơn tru Hình2-19 sẽ cho thấy rõ hơn về one-way binding và two-way binding.

Hình 1-4: One-way binding và Two-way binding

Cũng vì dữ liệu mà view hiển thị thực chất là sự ánh xạ từ model, nêncontroller cũng hoàn toàn không cần các thao tác data binding phức tạp và phụthuộc vào cấu trúc DOM của view, kết quả là controller sẽ không quan tâm xemview của chúng ta là gì Và dĩ nhiên, logic giữa controller và view được bóc táchrất rõ ràng Code của chúng ta sẽ rất dễ để debug, viết unit-test

1.2.2.3 Directives

Mặc dù HTML có thể có nhiều thẻ, nhưng nó không đủ mạnh để tạo ra mộtứng dụng web hiện đại Với directive, chúng ta có thể tạo ra những thẻ HTML mớihoặc các thuộc tính mới cho tất cả các thẻ trong HTML để trình duyệt hiểu nó cónghĩa là gì và nên làm gì

Directtive không chỉ giới hạn một phần tử HTML mà còn có thể là thuộc tính,lớp hoặc các chú thích HTML AngularJS cung cấp cho chúng ta 3 loại directive:

- Directive dạng element (một thẻ HTML) viết tắt là E:

- Directive dạng attribute (thuộc tính của một thẻ HTML) viết tắt là A, dạngnày là mặc định.

- Directive dạng class(class CSS) viết tắt là C

1.2.2.4 Templates

Trong quá trình xây dựng hệ thống lớn, file HTML trở nên rất phức tạp, đểgiải quyết vấn đề này ta cần chia thành nhiều phần khác nhau, AngularJS cung cấpcho chúng ta một giải pháp hữu ích đó là template

Angular template là một đặc tả dạng declarative, cùng với thông tin từ model vàcontroller, template được render thành một view mà để hiển thị trên trình duyệt.Template bao gồm các static DOM chứa HTML, CSS và các thành phần, thuộctính

riêng của Angular Các thành phần Angular và các thuộc tính giúp Angular thêmcác

hành vi và biến đổi template thành dynamic view DOM

Trong Angular, chúng ta có 2 cách để tạo một template:

- Dùng file script: Chúng ta có thể tích hợp template vào file HTML hiện

- Dùng file ngoài: Chúng ta cũng có thể tạo một file html với nội dung sau:

- Sử dụng template: Có nhiều cách để sử dụng template, tuy nhiên trong

AngularJS có 2 cách thông dụng để dùng template đó là include và route Ví dụ dưới đây sẽ dùng ng-include để sử dụng template:

ng-Tuy nhiên cách sử dụng ng-include chỉ thích hợp trong các ứng dụng nhỏ, đốivới các ứng dụng lớn ng-route (được trình bày trong phần xây dựng ứng dụng)được sử dụng nhiều hơn

1.2.2.5 Dependency Injection

Dependency Injection làm cho ứng dụng Angular dễ dàng hơn để phát triển,

có thể sắp xếp mã (code) thành các module Bằng cách này, chúng ta có thể tạo racác thành phần tái sử dụng mà có thể được gọi về sau, bất cứ khi nào cần thiết Ýtưởng này là đặc biệt tốt khi ứng dụng lớn và cần phải được mở rộng, dễ dàng bảotrì và testing Dependency Injection là một cách để ghép các đoạn code với nhau,điều này đòi hỏi phải phân chia code theo các chức năng riêng biệt như service,controller, hoặc provider

1.2.2.6 Services

Service trong AngularJS là một object hoặc một function phụ trách một tác

vụ nào đó Việc viết service chỉ là việc gom các đoạn xử lý logic vào object hoặcfunction để dễ quản lý hơn Cũng giống như mô hình MVC tách phần xử lý, điềuhướng và hiển thị riêng biệt

Trong AngularJS service sẽ chứa tất cả các phần xử lý, controller nhận yêucầu và gọi các service cần thiết để xử lý, model lưu trữ dữ liệu từ các control, viewhiển thị dữ liệu, route điều hướng request tới controller

AngularJS cũng xây dựng rất nhiều service vô cùng tiện lợi như: $http,

$scope, $window,…

1.2.2.7 Expression

Expression được sử dụng trong tất cả các phần của AngularJs, expressionđược bao bởi kí hiệu {{ }} Một biến được khởi tạo từ controller thông qua $scopecũng được coi là một expression

Expression được xử lý bởi $parse service

Ví dụ: <body> 2 + 2 = {{2 + 2}} </body> Angular sẽ tính toán giá trị trongbiểu thức và xuất ra màn hình kết quả “2 + 2 = 4”

1.2.2.8 Fillters

Trong AngularJS, một filter cung cấp một định dạng dữ liệu để hiển thị tớingười dùng AngularJS cung cấp một số filter được xây dựng sẵn như: lowercase,date, number, currency, limitTo, orderBy… Một số fillter như:

1.2.2.9 Scope

Scope là đối tượng tham chiếu tới model được sử dụng trong controller Làthành phần gắn kết giữa view và controller Scope cung cấp các APIs để theo dõicác thay đổi của model (services $watch) và các APIs để truyền bất kỳ thay đổinào của model tới view (services $apply) Scope giúp tự động đồng bộ dữ liệu giữamodel và view

1.3 KẾT CHƯƠNG

Chương này trình bày tổng quan về những công nghệ chính được sử dụng đểxây dựng website

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ

2.1 PHÂN TÍCH YÊU CẦU

2.1.1 Mô tả bài toán

Tương ứng với mỗi đợt làm Đồ án tốt nghiệp, giáo vụ khoa sẽ khởi tạo mộtđợt mới ở trên hệ thống Các thông tin về đợt làm đồ án, danh sách sinh viên, danhsách giảng viên tham gia sẽ được giáo vụ khoa lập

Giảng viên sẽ đề xuất sinh viên để hướng dẫn trước thời gian sinh viên đăng

ký giảng viên Sinh viên có thể xem thông tin giảng viên, hướng nghiên cứu và đềtài đề xuất của giảng viên để chọn cho mình giảng viên phù hợp Sau thời gian này,giáo vụ khoa sẽ có thể chỉnh sửa danh sách phân công hướng dẫn và công bố chotoàn sinh viên biết

Với mỗi đợt nộp báo cáo tiến độ, sinh viên sẽ làm báo cáo theo mẫu trênwebsite, sau đó báo cáo được gửi đến cho giảng viên hướng dẫn duyệt Nếu giảngviên không chấp nhận báo cáo thì có thể gửi lại phản hồi cho sinh viên Báo cáosau khi được giảng viên chấp nhận sẽ chính thức được gửi lên hệ thống Giáo vụkhoa có thể xem được các báo cáo mà đã được giảng viên chấp nhận, đồng thời cóthể xem các thông tin tổng hợp như số sinh viên đã nộp và chưa nộp báo cáo tiếnđộ

2.1.2 Yêu cầu chức năng

Website có 3 đối tượng người dùng là sinh viên, giảng viên và giáo vụ khoa.Với mỗi đối tượng người dùng có những chức năng tương ứng

2.1.2.1 Sinh viên

Người dùng là sinh viên có các chức năng:

- Xem thông tin giảng viên và hướng nghiên cứu, đề tài của giảng viên

- Xem thông tin tình trạng về đồ án hiện tại đang làm

- Đăng kí và thay đổi giảng viên hướng dẫn

- Đăng kí và thay đổi đề tài ĐATN

- Báo cáo tiến độ

- Cập nhật thông tin cá nhân

2.1.2.2 Giảng viên

Người dùng là giảng viên có các chức năng:

- Cập nhật thông tin cá nhân

- Cập nhật thông tin về hướng nghiên cứu và đề tài

- Đề xuất sinh viên để hướng dẫn

- Duyệt đề tài ĐATN của sinh viên đưa ra

- Duyệt báo cáo tiến độ của sinh viên

- Xem thông tin sinh viên và tình trạng làm ĐATN của sinh viên mà giảngviên đó hướng dẫn

2.1.2.3 Giáo vụ khoa

Người dùng là giáo vụ khoa có các chức năng:

- Quản lý tài khoản

• Tạo tài khoản của sinh viên và giảng viên: Tạo mới, sửa, xóa,block, unblock

• Xem, sửa thông tin giảng viên, sinh viên

- Khởi tạo đợt làm ĐATN:

• Mô tả thông tin đợt làm đồ án:

o Năm học, học kỳ, mô tả thêm

o Thời gian bắt đầu, kết thúc

o Thời gian GViên đề xuất SV hướng dẫn

o Thời gian SV đăng kí GViên hướng dẫn

o Số lần nộp báo cáo tiến độ và thời gian cụ thể (SV nộp, GViên duyệt)

o Thời gian nộp luận văn (bảo vệ demo)

o Thời gian bảo vệ

• Lập danh sách sinh viên được làm ĐATN

• Lập danh sách giảng viên tham gia hướng dẫn

• Nhập số lượng sinh viên/giảng viên hướng dẫn ĐATN

- Điều chỉnh, xác nhận phân công hướng dẫn ĐATN

- Xem, xuất các báo cáo tổng hợp:

• Danh sách phân công hướng dẫn đồ án

• Danh sách đề tài

• Danh sách sinh viên báo cáo tiến độ đúng hạn và không đúng hạn

- Xem lại lịch sử các đợt làm ĐATN

2.1.3 Yêu cầu phi chức năng

Hệ thống gồm các yêu cầu phí chức năng sau:

- Khả năng chịu tải: Đảm bảo khả năng 400 người sử dụng dịch vụ truy cậpđồng thời

- Giao diện: Tông màu chủ đạo của các giao diện là tông màu sáng trắng,menu màu tối Ngôn ngữ là tiếng Việt

- Bảo mật: Mật khẩu phải đảm bảo là được bảo mật bằng cách mã hóa.

- Xác thực: Hệ thống hỗ trợ việc xác thực bằng tên tài khoản, mật khẩu đăngnhập

- Tính sẵn sàng : Tính sẵn sàng của hệ thống phải đạt mức 99,5% theo năm,trong đó không kể thời gian bảo trì theo kế hoạch định trước; thời gian khôngsẵn sàng của hệ thống phải nhỏ hơn 1 giờ/1 tháng không tính thời gian bảo trì