Chương 1: Tổng quan - _ Chương 2: Cơ sở lý thuyết - _ Chương 3: Thiết kế hệ thông - _ Chương 4: Kết quả thực nghiệm 17 CHƯƠNG 2.1 Trello - _ Trello là một nền tảng giúp người dùng theo dõi tiến độ công việc một cách dễ dàng, chính xác và trực quan. Nền tảng này cho phép người dùng lên danh sách các công việc cần làm, đang làm, đã làm xong, thấy được công việc được làm tới đâu, những ai tham gia, và những lưu ý khác trong công việc. - _ Hỗ trợ phan chia va quan lý các công việc một cách rất cụ thể theo từng vị trí hoặc dựa trên tình trạng của công việc như: đang được triển khai, đã kết thúc, hủy bỏ. - _ Tổng hợp và phân chia công việc tới từng thành viên trong nhóm bao gồm mô tả công việc cụ thể, thời hạn deadline, tình hình tiến độ công việc.2 Git và Github - Git chính là hệ thống quản lý phiên bản phân tán (DVCS), với các ưu điểm: tốc độ, đơn giản, phân tán, phù hợp với dự án lớn nhỏ.
- Git là tên gọi là một hệ thống quản lý phiên bản phân tán phổ biến nhất hiện nay (Distributed Version Control System - DVCS). DVCS nghĩa là hệ thống giúp mỗi máy tính có thể lưu trữ nhiều phiên bản khác nhau của một mã nguồn được nhân bản (clone) từ một kho chứa mã nguồn (repository), mỗi thay đổi vào mã nguồn trên máy tính sẽ có thể ủy thác (commit) rồi đưa lên máy chủ nơi đặt kho chứa chính. Và một máy tính khác (nếu họ có quyền truy cập) cũng có thể clone lại mã nguồn từ kho chứa hoặc clone lại một tập hợp các thay đổi mới nhất trên máy tính kia. Trong Git, thư mục làm việc trên máy tính gọi là Working Tree.
18 Cơ chế lưu trữ phiên bản của Git là nó sẽ tạo ra một “ảnh chụp” (snapshot) trên mỗi tập tin và thư mục sau khi commiit, từ đó nó có thể cho phép bạn tái sử dụng lại một ảnh chụp nào đó mà bạn có thể hiểu đó là một phiên bản. Đây cũng chính là lợi thế của Git so với các DVCS khác khi nó không “lưu cứng” dữ liệu mà sẽ lưu với dạng snapshot.3 NodeJS và ExpressJS Môi trường Node.js là một nền tảng được xây dựng trên V8 JavaScript Engine - trình thông dịch thực thi mã JavaScript, bao gồm mọi thứ bạn cần để thực thi một chương trình được viết bằng JavaScript.js ra đời khi các nhà phát triển ban đầu của JavaScript mở rộng nó từ thứ bạn chỉ có thể chạy trong trình duyệt thành thứ bạn có thể chạy trên máy của mình như một ứng dụng độc lập. Xây dựng backend bằng nodeJS sẽ giúp cho chương trình dễ dàng mở rộng, hơn nữa phần core của Node.js viết bằng C++ cùng với cơ chế bất đồng bộ nên cho tốc độ xử lý và hiệu năng rất cao. ExpressJS là một framework rất phổ biến được xây dựng trên nền tảng của Node.js, nó cung cấp rất nhiều các tính năng mạnh mẽ, các method HTTP và middleware để xây dựng API, phù hợp để thiết kế ứng dụng ở server side.
Bên cạnh đó, nó cung cấp một môi trường làm việc thân thiện, dễ sử dụng, hỗ trợ nhiều thư viện, module sẵn có, giúp cho việc quản lý API trở nên dễ dàng, và đương nhiên sử dụng framework thì mang tính bảo mật và an toàn cao hơn so với việc xây dựng thuần.4 MongoDB MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở thuộc noSQL - một dạng CSDL phi quan hệ. NoSQL được phát triển cũng trên javascript Framework, lưu trữ dữ liệu kiểu JSON với dạng dữ liệu tổ chức theo key-value, mục đích hướng đến đối tượng. Điều này cho phép MongoDb linh hoạt trong việc insert dữ liệu dữ liệu, bởi dữ liệu không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS. Mô hình này giải quyết khá nhiều hạn chế tồn đọng của mô hình CSDL quan hệ RDBMS (Relation Database Management System) về tốc độ, tính mở rộng,.
Về hoạt động, MongoDB hoạt động dưới dạng một dịch vụ chạy ngầm và thực hiện xử lý liên tục các yêu cầu được tiếp nhận. Mỗi bản ghi trong MongoDB có một trường khoá là “_id” nhằm xác định tính duy nhất của bản ghi như trong RDBMS, nhưng lại được thực hiện tự động nhằm đảm bảo tốc độ truy vấn và tối ưu về hiệu suất cao nhất. Mỗi truy vấn dữ liệu đều được ghi lên bộ nhớ RAM nên các truy vấn sau đó sẽ diễn ra nhanh hơn bởi không cần đọc dữ liệu từổ cứng. Vì tính phi cấu trúc và dễ dàng thêm dữ liệu nên MongoDB rất thích hợp cho các hệ thống có nhiều sự thay đổi liên tục, và phù hợp với cả việc cảo dữ liệu từ các website khác về cơ sở dữ liệu của hệ thống.
Chỉ tiết hơn, trong đồ án tốt nghiệp em 20 sẽ sử dụng thư viện mongoose để tương tác với cơ sở dữ liệu.5 Tailwind CSS - Thì nó là một utility-first CSS framework, nó cũng giống như Bootstrap, nó có những class built-in mà chúng ta có thể dùng. Tailwind CSS có nhiều các class bao gồm các thuộc tính CSS khác nhau và quan trọng, chúng ta có thể dễ dàng mở rộng tạo mới ra những class bằng chính những class của nó.6 ReactJS - ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website. Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa. - ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giao diện người dùng hay UI.
Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phải làm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng. UI là tập hợp những thành phần mà bạn nhìn thấy được trên bất kỳ một ứng dụng nào, ví dụ có thể kể đến bao gồm: menu, thanh tìm kiếm, những nút nhấn, card,. Giả sử bạn đang lập trình một website thương mại điện tử, sau khi người dùng chọn được sản phẩm ưng ý rồi và nhấn vào nút “Thêm vào giỏ hàng”, thì việc tiếp theo mà bạn phải làm đó là thêm sản phẩm được chọn vào giỏ hàng và hiển thị lại sản phẩm đó khi user vào xem => xử lý tương tác. CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 3.1 Sở đồ BFD Website hỗ trợ học tập Giáo lý Công Giáo Quin tr hệ thông Quan tri dir liệu Phục vu người dùn |_ | 0uảnlvà phân quyển |__ |tảp nhật hông tin người |__| Chinh sia, cép nhat nguoi dung ding hông tí cá nhân Cập nhật, phân loai bal |_| Quan ly bai hoc theo F—] lụt lheo chương, môn Xem, làm bải lập thương, mon hoc học |_| Quan ly blog, théng tin |_ | tâp nh! thôngtì gới Thi dau kien thức su kiện thiéu, banner Quan ly bai tap trac F] "hiện vận dụng theo Xem két qua hoc tap bài học |_| Quan I banner va thong tin giới thiệu 22 3.1 Usercase Tổng quát () *4fbude>> <xincludếx> ` XXmede> > | TRm en \ => .“ Hệ Thông ;! ««Include>> <cinclyde>> ` 7 ` Quảng lý tải khoản thành viên os Admin Nguoi dung 3= Đăng các bài học Đăng nhập.
admin ' Đăng bài tập ¬m. ssinciide>> Quan ly thong ~3include>> , ` <<include>> ‘ \ Thông kê điểm 30 học sinh 23 3.2 Usercase Học Bài “ao C pina nnao > _= >> - NHÀ ' ME ~ waimclude>> ‹ <ine Hde> ~~ Chọn Bài học “Sonduda> XKSinh Luu Két qua baitap 3.3 Usercase thông Tin cá nhân cc. _<<indude>> _ _ - Xem Blog Chon Blog ~~ Đăng Nhập ` <<indude>> Ñ Cập nhật Học VN mg thông tin cá nhân nhân + ⁄ <<intlude>> <<extgnd>> Déi mat khau <- ~ =include>> ` 24 3.3 Usercase Thi Đấu [we Vào trang thi Chọn sô người dau phong <<includez+ \ z a ae <<include>>. Z ` ` , “ ee Tao Phong , “Re ì <extend>> + ~«~ <<ext¢nd>> ~s.
' Tham Gia ý Phóng ' <<extend=> <7 Hoc sinh Bat Dau thi _ đầu Cập Nhat bang \ xếp hạng <<include>> 7 ¥ ==incluđe>> , Cham Điểm Lưu thông tin 3.1 Activity học tập act Activity Diagramo J Hoc sinh Hộ Thông “ Đưa ra Yêu cầu danh sách học tập các thông †in học tập. Kiam tra Chon Bai cac bai hoc da chon Duara danh sach khoa hoc ( Học tập. K Dừng học Ì Lưu thông tap tin da hoc 26 3.2 Activity Tạo câu hỏi 27 actA y Diagram0 J Admin Hệ thống Hiễn thị Tạp câu 1rang quản hỏi | l cầu hỏi Lựa chọn Chọn lớp chon muôn học kiểm tra thông tin câu hỏi Lưu câu hỏi Thông báo Thông báo thẽm tạo câu hồi không thảnh công 3.3 Activity thi đấu act Activity Diagram) J Người dùng Hệ thông Đăng nhập Chọn các Tạo phòng Tham gia thuộc tính phong mời phù hợp Gửi lời mời Tạo phòng Đạt yêu cầu Không đạt bất đâu yêu cầu bắt đâu Bat dau lam bai Hoan : Roi phòng thanh bai q ua thi 29 3.4 Activity đổi mật khẩu act Activity Diagram0 J Người dùng Hệ thống Tiền hành đổi mật Nhập mat khẩu mới Kiém tra Xác nhận mật khẩu cũ Kiém tra ràng buộc Iniật khẩu Yêu cầu nhập đúng định dạng mật khau kiểm tra mat khau xác nhận Thông báo mật l‹hầu xác nhận sai Thông báo thành công 30 3.5 Activity đổi thông tin cá nhân act Activity Diagram0 Người dũng Hệ thống Đổi thông tin cá nhân Kiémtra Thay đổi thông tin thiéu thôngtin Thiéu Thông báo cân điền day đủ Thông báo sai dứ liệu 31 3.1 Bang “NHANVIEN” ST Tên Kiểu Mô tả T dữ liệu 1 MANV Objectl Mã người D dùng 2 HOTEN String Tên người dùng 3 Email String E-mail 4 Password String Mật khẩu 5 BirthDay Date Ngày sinh 6 Phone String Số điện 32 thoại 7 Active Boolea Kích hoạt n 8 Address String Địa chỉ 9 MATDHV Object! Mã Trình độ D học vấn 10 MAPB Object Ma Phong D ban 11 BACLUONG Objectl Bac Luong D 3.3 Bang “BlogCategory” ST Tén Kiểu dữ Mô tả T liệu 1 BclD ObjectID Ma thé loai Blog 2 Categor String Tén thé loai y Blog 3.4 Bang “Blog” ST Tén Kiéu du M6 ta T liệu 1 BlogID ObjectID Ma Blog 2 Content String Nội dung Blog 3 Title String Tiêu đề Blog Created Date Ngày tạo At 33 5 Updated Date Ngày cập At nhật 6 UserlD ObjectID Mã người dùng 7 BclID ObjectID Ma thé loai Blog 3.