XÂY DỰNG WEBSITE DIỄN ĐÀN TIẾNG ANH

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN TỐT NGHIỆP NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ PHẦN MỀM ĐỀ TÀI: XÂY DỰNG WEBSITE DIỄN ĐÀN TIẾNG ANH Người hướng dẫn: THS. NGUYỄN THỊ MINH HỶ Sinh viên thực hiện: NGUYỄN THẾ CƯỜNG Số thẻ sinh viên: 102150088 Lớp : 15T2 Đà Nẵng, 12/2019 NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ Đà Nẵng, ngày … tháng … năm 2019 Giảng viên hướng dẫn Ths. Nguyễn Thị Minh Hỷ NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ ............................................................................................................................................................ .......................................... Đà Nẵng, ngày … tháng … năm 2019 i TÓM TẮT Tên đề tài: Xây dựng website diễn đàn tiếng Anh Sinh viên thực hiện: Nguyễn Thế Cường Số thẻ SV: 102150088 Lớp: 15T2 Website diễn đàn tiếng Anh được xây dựng dựa trên nhu cầu học ngoại ngữ, đặc biệt là tiếng Anh ngày một tăng cao của người dân Việt Nam hiện nay. Website cung cấp một môi trường mà mọi người dùng có mong muốn học tiếng Anh đều có thể dễ dàng sử dụng. Các vấn đề một người tự học tiếng Anh sẽ thường gặp phải sẽ thường bao gồm:  Cần tìm một người học cùng: Một trong yếu tố rất quan trọng góp phần tạo nên thành công cho một người học tiếng Anh là có một người cùng học cùng. Việc cùng học tiếng Anh với một người bạn khiến người học tiếng Anh có thể tìm được động lực để học tập và sẽ nhanh chóng tiến bộ.  Cần lời giải đáp trong một vấn đề khó: Trong quá trình tự học sẽ luôn có những vấn đề khó mà người tự học không biết hỏi ai và muốn có một môi trường để giải đáp cho họ những vấn đề trên.  Cần góp ý trong quá trình luyện tập tiếng Anh: Việc tự luyện tập trong tiếng Anh là điều cần thiết để giúp kĩ năng của người học tiến bộ hơn. Nhưng trong quá trình đó người tự học luôn muốn nghe lời góp ý nhận xét của người khác về kĩ năng của mình để biết mình sai ở đâu và cần cải thiện ở điểm nào. Hiểu được các vấn đề đó website diễn đàn tiếng Anh được xây dựng nhằm cung cấp cho người dùng các chức năng như tìm kiếm người cùng học, hỏi đáp các vấn đề khó khan trong quá trình tự học và lấy góp ý nhận xét từ người khác. ii ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN CỘNG HÒA XÃ HÔI CHỦ NGHĨA VIỆT NAM Độc lập - Tự do - Hạnh phúc NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP Họ tên sinh viên: NGUYỄN THẾ CƯỜNG Số thẻ sinh viên: 102150088 Lớp: 15T2 Khoa: Công nghệ thông tin Ngành: Công nghệ thông tin 1. Tên đề tài đồ án: Xây dựng website diễn đàn tiếng Anh 2. Đề tài thuộc diện: ☐ Có ký kết thỏa thuận sở hữu trí tuệ đối với kết quả thực hiện 3. Các số liệu và dữ liệu ban đầu: Không có. 4. Nội dung các phần thuyết minh và tính toán: Nội dung của thuyết minh gồm: Mở đầu: Phần mở đầu của luận văn, giới thiệu về nhu cầu thực tế và lý do thực hiện đề tài, đồng thời giới thiệu sơ lược về đề tài và mục tiêu phải đạt được. Chương 1 . Cơ sở lý thuyết: trình bày những lý thuyết học được và đã áp dụng vào hệ thống. Chương 2 . Phân tích và thiết kế: trình bày các hồ sơ phân tích và hồ sơ thiết kế trong xây dựng hệ thống và luồng hoạt động của hệ thống. Chương 3 . Triển khai và đánh giá kết quả: mô tả cách cài đặt, vận hành hệ thống và đánh giá kết quả đạt được. 5. Các bản vẽ, đồ thị (ghi rõ các loại và kích thước bản vẽ): Không có. 6. Họ tên người hướng dẫn: THS. NGUYỄN THỊ MINH HỶ 7. Ngày giao nhiệm vụ đồ án: ……../……./ 2019 8. Ngày hoàn thành đồ án: ……../……./ 2019 Đà Nẵng, ngày tháng 12 năm 2019 Trưởng Bộ môn …………………….. Người hướng dẫn iii LỜI CẢM ƠN Trên thực tế, không có thành công nào mà không gắn liền với những sự hỗ trợ, giúp đỡ dù ít hay nhiều, dù là trực tiếp hay gián tiếp của người khác. Trong suốt thời gian năm năm qua từ khi bắt đầu học tập ở giảng đường đại học đến nay, em đã nhận được rất nhiều sự quan tâm, giúp đỡ của quý thầy cô, gia đình và bạn bè. Em xin chân thành cảm ơn cô - ThS. Nguyễn Thị Minh Hỷ, người đã tận tình hướng dẫn, cũng như đã tạo mọi điều kiện để em có thể hoàn thành đồ án tốt nghiệp này. Nếu như không nhờ những lời hướng dẫn, những đánh giá và chỉ bảo sâu sắc của cô thì em nghĩ việc hoàn thành đồ án tốt nghiệp của em sẽ khó khăn hơn rất nhiều. Một lần nữa em xin chân thành cảm ơn cô. Sau cùng, em xin kính chúc quý thầy cô trong Khoa Công nghệ Thông tin và cô Nguyễn Thị Minh Hỷ thật dồi dào sức khỏe, niềm tin để tiếp tục thực hiện sứ mệnh cao đẹp của mình là truyền đạt kiến thức cho thế hệ mai sau. Một lần nữa em xem chân thành cảm ơn! Nguyễn Thế Cường iv CAM ĐOAN Em xin cam đoan: 1. Nội dung trong đồ án này là do em thực hiện dưới sự hướng dẫn trực tiếp của Cô giáo ThS. Nguyễn Thị Minh Hỷ. 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ố. Nếu có những sao chép không hợp lệ, vi phạm quy chế đào tạo, em xin chịu hoàn toàn trách nhiệm. Sinh viên thực hiện Nguyễn Thế Cường v MỤC LỤC TÓM TẮT.............................................................................................................................. i NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP ....................................................................................ii LỜI CẢM ƠN ..................................................................................................................... iii CAM ĐOAN........................................................................................................................ iv MỤC LỤC ............................................................................................................................ v DANH SÁCH CÁC BẢNG ............................................................................................. viii DANH SÁCH HÌNH VẼ...................................................................................................... x DANH SÁCH CÁC KÝ HIỆU, CHỮ VIẾT TẮT .............................................................xii MỞ ĐẦU .............................................................................................................................. 1 1. Bối cảnh chọn đề tài .................................................................................................... 1 2. Mục đích của đề tài ..................................................................................................... 1 3. Nội dung của đề tài ...................................................................................................... 2 4. Phạm vi sử dụng đề tài................................................................................................ 3 5. Bố cục của đồ án .......................................................................................................... 3 Chương 1: CƠ SỞ LÝ THUYẾT ...................................................................................... 4 1.1. Tổng quan về ASP.NET Core ................................................................................. 4 1.2. Tổng quan về Entity Framework core ................................................................... 5 1.3. Tổng quan về RESTful API .................................................................................... 7 1.4. Tổng quan về React js .............................................................................................. 8 1.4.1. React js là gì? ...................................................................................................... 8 1.4.2. Các khái niệm chính ............................................................................................ 8 Chương 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ................................................ 14 2.1. Khảo sát bài toán thực tế ....................................................................................... 14 vi 2.1.1. Khảo sát một số diễn đàn tiếng Anh ................................................................. 14 2.1.2. Mục tiêu của hệ thống ....................................................................................... 15 2.2. Phân tích chức năng ............................................................................................... 15 2.2.1. Phát biểu bài toán .............................................................................................. 15 2.2.2. Chức năng của user ........................................................................................... 16 2.2.3. Chức năng của admin ........................................................................................ 17 2.3. Sơ đồ use case ......................................................................................................... 18 2.3.1. Các tác nhân của hệ thống................................................................................. 18 2.3.2. Sơ đồ use case tổng quát ................................................................................... 19 2.3.3. Sơ đồ use case phân rã ...................................................................................... 19 2.4. Sơ đồ lớp của hệ thống ........................................................................................... 46 2.5. Sơ đồ hoạt động của hệ thống ............................................................................... 48 2.5.1. Sơ đồ hoạt động chức năng đăng bài ................................................................ 48 2.5.2. Sơ đồ hoạt động chức năng gửi yêu cầu ........................................................... 50 2.5.3. Sơ đồ hoạt động chức năng gửi báo cáo ........................................................... 52 2.6. Thiết kế cơ sở dữ liệu ............................................................................................. 53 2.6.1. Sơ đồ mối quan hệ giữa các bảng cơ sở dữ liệu: .............................................. 55 2.6.2. Mô tả chi tiết các bảng ...................................................................................... 56 Chương 3: TRIỂN KHAI VÀ CHẠY THỬ NGHIỆM ................................................. 64 3.1. Môi trường triển khai ............................................................................................ 64 3.1.1. Quản lý mã nguồn ............................................................................................. 64 3.1.2. Công cụ triển khai ............................................................................................. 64 3.1.3. Môi trường cài đặt ............................................................................................. 66 3.2. Kết quả demo và hướng dẫn cài đặt chương trình ............................................. 69 3.3. Đánh giá .................................................................................................................. 79 KẾT LUẬN ....................................................................................................................... 80 vii TÀI LIỆU THAM KHẢO................................................................................................ 83 viii DANH SÁCH CÁC BẢNG Bảng 2.1 Đặc tả use case đăng nhập................................................................................... 20 Bảng 2.2 Đặc tả use case đăng kí ....................................................................................... 21 Bảng 2.3 Đặc tả use case đổi mật khẩu .............................................................................. 22 Bảng 2.4 Đặc tả use case cập nhật thông tin cá nhân ......................................................... 23 Bảng 2.5 Đặc tả use case xem danh sách thông báo .......................................................... 24 Bảng 2.6 Đặc tả use case đánh dấu đã đọc ......................................................................... 25 Bảng 2.7 Đặc tả use case xem danh sách cuộc trò chuyện ................................................. 27 Bảng 2.8 Đặc tả use case gửi tin nhắn ................................................................................ 27 Bảng 2.9 Đặc tả use case xem chi tiết cuộc trò chuyện...................................................... 28 Bảng 2.10 Đặc tả use case xem danh sách yêu cầu ............................................................ 29 Bảng 2.11 Đặc tả use case gửi yêu cầu .............................................................................. 30 Bảng 2.12 Đặc tả use case chấp nhận yêu cầu ................................................................... 31 Bảng 2.13 Đặc tả use case xóa yêu cầu .............................................................................. 31 Bảng 2.14 Đặc tả use case tạo mới bài đăng ...................................................................... 33 Bảng 2.15 Đặc tả use case xem danh sách bài đăng........................................................... 34 Bảng 2.16 Đặc tả use case xem chi tiết bài đăng ............................................................... 35 Bảng 2.17 Đặc tả use case tìm kiếm bài đăng .................................................................... 35 Bảng 2.18 Đặc tả use case thích bài đăng .......................................................................... 36 Bảng 2.19 Đặc tả use case bình luận .................................................................................. 37 Bảng 2.20 Đặc tả use case xem thông tin cá nhân ............................................................. 38 Bảng 2.21 Đặc tả use case báo cáo ..................................................................................... 39 Bảng 2.22 Đặc tả use case xem danh sách báo cáo ............................................................ 40 Bảng 2.23 Đặc tả use case xóa báo cáo .............................................................................. 41 ix Bảng 2.24 Đặc tả use case xử lý báo cáo ........................................................................... 41 Bảng 2.25 Đặc tả use case xem danh sách user.................................................................. 43 Bảng 2.26 Đặc tả use case chặn user .................................................................................. 44 Bảng 2.27 Đặc tả use case bỏ chặn..................................................................................... 44 Bảng 2.28 Bảng dữ liệu UserAccounts .............................................................................. 56 Bảng 2.29 Bảng dữ liệu Roles ............................................................................................ 56 Bảng 2.30 Bảng dữ liệu UserRoles .................................................................................... 56 Bảng 2.31 Bảng dữ liệu UserInformations ......................................................................... 57 Bảng 2.32 Bảng dữ liệu PartnerRequests ........................................................................... 58 Bảng 2.33 Bảng dữ liệu Conversations .............................................................................. 58 Bảng 2.34 Bảng dữ liệu Messages ..................................................................................... 59 Bảng 2.35 Bảng dữ liệu Posts ............................................................................................. 59 Bảng 2.36 Bảng dữ liệu Comments .................................................................................... 60 Bảng 2.37 Bảng dữ liệu Notifications ................................................................................ 61 Bảng 2.38 Bảng dữ liệu Partnerships ................................................................................. 62 x DANH SÁCH HÌNH VẼ Hình 1.1 Kiến trúc của EF Core ........................................................................................... 6 Hình 1.2 Hai cách tiếp cận chủ yếu của EF Core ................................................................. 7 Hình 1.3 Virtual DOM ......................................................................................................... 9 Hình 1.4 Cơ chế binding trong React ................................................................................. 10 Hình 2.1 Sơ đồ use case tổng quát...................................................................................... 19 Hình 2.2 Sơ đồ use case chức năng quản lý tài khoản ....................................................... 20 Hình 2.3 Sơ đồ use case chức năng quản lý thông báo ...................................................... 24 Hình 2.4 Sơ đồ use case chức năng quản lý tin nhắn ......................................................... 26 Hình 2.5 Sơ đồ use case chức năng quản lý yêu cầu .......................................................... 29 Hình 2.6 Sơ đồ use case chức năng quản lý bài đăng ........................................................ 33 Hình 2.7 Sơ đồ use case chức năng tương tác với user ...................................................... 38 Hình 2.8 Sơ đồ use case chức năng quản lý báo cáo .......................................................... 40 Hình 2.9 Sơ đồ use case quản lý user ................................................................................. 43 Hình 2.10 Sơ đồ lớp của hệ thống ...................................................................................... 47 Hình 2.11 Sơ đồ hoạt động chức năng đăng bài ................................................................. 48 Hình 2.12 Sơ đồ hoạt động chức năng gửi yêu cầu ............................................................ 50 Hình 2.13 Sơ đồ hoạt động chức năng báo cáo .................................................................. 52 Hình 2.14 Mối quan hệ giữa các bảng cơ sở dữ liệu .......................................................... 55 Hình 3.1 Công cụ visual studio 2019 ................................................................................. 65 Hình 3.2 Công cụ Visual Code ........................................................................................... 66 Hình 3.3 Node js ................................................................................................................. 66 Hình 3.4 React js ................................................................................................................ 67 Hình 3.5 .Net core của Microsoft ....................................................................................... 67 xi Hình 3.6 Microsoft SQL server .......................................................................................... 68 Hình 3.7 Màn hình đăng kí tài khoản ................................................................................. 69 Hình 3.8 Màn hình đăng nhập ............................................................................................ 70 Hình 3.9 Màn hình sau khi đăng nhập ................................................................................ 70 Hình 3.10 Màn hình gửi yêu cầu ........................................................................................ 71 Hình 3.11 Màn hình danh sách các partner ........................................................................ 72 Hình 3.12 Màn hình xem chi tiết một bài đăng .................................................................. 72 Hình 3.13 Màn hình bình luận tại bài đăng ........................................................................ 73 Hình 3.14 Màn hình chỉnh sửa thông tin cá nhân............................................................... 74 Hình 3.15 Màn hình quản lý yêu cầu ................................................................................. 74 Hình 3.16 Màn hình quản lý thông báo .............................................................................. 76 Hình 3.17 Màn hình nhắn tin với user khác ....................................................................... 76 Hình 3.18 Màn hình đặt câu hỏi ......................................................................................... 77 Hình 3.19 Màn hình đăng bài hỏi góp ý từ người khác...................................................... 78 Hình 3.20 Màn hình xem thông tin cá nhân của người khác ............................................. 78 xii DANH SÁCH CÁC KÝ HIỆU, CHỮ VIẾT TẮT Từ Viết tắt của Diễn giải API Application Programming Interface Giao diện lập trình ứng dụng RESTful RE presentational S tate T ransfer Một dạng chuyển đổi cấu trúc dữ liệu, một kiểu kiến trúc để viết API DB Database Cơ sở dữ liệu DOM Document Object Model Mô hình đối tượng tài liệu JSX JavaScript XML Một loại cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo kiểu XML SQL Structured Query Language Ngôn ngữ truy vấn cấu trúc Partner Người học tiếng Anh cùng (áp dụng trong báo cáo này) LINQ Language Integrated Query Ngôn ngữ truy vấn tích hợp ORM Object Relational Mapping Chỉ sự ánh xạ các bảng cơ sở dữ liệu thành các đối tượng trong các ngôn ngữ lập trình Framework Mẫu đã được dựng sẵn giúp cho việc xây dựng một sản phẩm phần mềm nhanh chóng hơn Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 1 MỞ ĐẦU 1. Bối cảnh chọn đề tài Hiện nay với sự phát triển nhanh chóng của kinh tế xã hội đặc biệt là sự hội nhập kinh tế với nước ngoài, ngoại ngữ đang dần trở thành một yêu cầu không thể thiếu trong hầu hết các trường học và các doanh nghiệp, đặc biệt là doanh nghiệp nước ngoài. Trong đó tiếng Anh vẫn luôn là một yêu cầu hàng đầu và là ngôn ngữ chính được giảng dạy tại hầu hết các đơn vị giáo dục tại Việt Nam. Chính vì thế nhu cầu học và tự học tiếng Anh ở Việt Nam đang ngày càng tăng lên. Một trong các yếu tố quan trọng cần thiết cho một người tự học tiếng Anh là một môi trường để trao đổi, hỏi đáp, lấy ý kiến từ người khác và tìm 1 người cùng học chung.Trong quá trình tự học tiếng Anh của mình, tôi nhận thấy có ba vấn đề gây khó khăn cho người tự học tiếng Anh bao gồm:  Cần tìm một người học cùng: Một trong yếu tố rất quan trọng góp phần tạo nên thành công cho một người học tiếng Anh là có một người cùng học cùng. Việc cùng học tiếng Anh với một người bạn khiến người học tiếng Anh có thể tìm được động lực để học tập và sẽ nhanh chóng tiến bộ.  Cần lời giải đáp trong một vấn đề khó: Trong quá trình tự học sẽ luôn có những vấn đề khó mà người tự học không biết hỏi ai và muốn có một môi trường để giải đáp cho họ những vấn đề trên.  Cần góp ý trong quá trình luyện tập tiếng Anh: Việc tự luyện tập trong tiếng Anh là điều cần thiết để giúp kĩ năng của người học tiến bộ hơn. Nhưng trong quá trình đó người tự học luôn muốn nghe lời góp ý nhận xét của người khác về kĩ năng của mình để biết mình sai ở đâu và cần cải thiện ở điểm nào. Chính vì thế ý tưởng về một diễn đàn giúp người học tiếng Anh tìm kiếm một người bạn cùng học tập, một môi trường để mọi người trao đổi hỏi đáp, lấy ý kiến của người khác khiến cho “ Diễn đàn học tiếng Anh – Partner Finder ” ra đời. 2. Mục đích của đề tài “ Diễn đàn học tiếng Anh – Partner Finder ” với mục đích xây dựng một website với giao diện đơn giản, thân thiện với mọi người dùng ở mọi lứa tuổi. Website cung cấp một Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 2 môi trường để người dùng có thể dễ dàng tìm kiếm một người phù hợp với cùng nhu cầu học tiếng Anh để cùng nhau học tập. Vì theo hầu hết các hướng dẫn về việc tự học tiếng Anh, tìm kiếm một đối tác để học cùng luôn là yếu tố quan trọng trong việc cải thiện trình độ tiếng Anh của người học. Ngoài ra website còn cung cấp cho người dùng chức năng hỏi đáp. Chức năng này giúp giải quyết vấn đề khi người tự học gặp vấn đề khó khăn nhưng không biết hỏi ai. Chức năng này còn giúp người dùng chia sẻ kiến thức với mọi người cũng như cũng cố lại những kiến thức đã biết. Một chức năng lớn nữa của website là người dùng có thể lấy ý kiến của người khác về những bài viết hay bài nói của người dùng. Mục đích của việc này giúp cho người dùng tự học tiếng Anh có thể được người khác góp ý sửa lỗi về các bài viết, bài nói. Vì trong việc học tiếng Anh, việc tìm và sửa lỗi là yếu tốt quan trọng giúp người học có thể cải thiện kĩ năng nói và viết.Ngoài ra chức năng này còn giúp người dùng khác có thể tham khảo các bài nói, bài viết của người khác. 3. Nội dung của đề tài Những công việc cần thực hiện để hoàn thành đề tài bao gồm:  Tìm hiểu bài toán thực tế.  Tìm hiểu và phân tích UML.  Phân tích và thiết kế hệ thống thông tin.  Tìm hiểu công nghệ cần sử dụng và ngôn ngữ kết nối cơ sở dữ liệu.Ở đây tôi sử dụng Asp.net core một framework xây dựng bởi Microsoft hỗ trợ xây dựng các ứng dụng web để xây dựng back-end cho website. Cùng với đó ở phía client tôi sử dụng React js – một library của javascript được xây dựng bởi Facebook để xây dựng giao diện phía người dùng.  Thiết kế cơ sở dữ liệu. Cơ sở dữ liệu SQL Server được sử dụng để lưu trữ dữ liệu của website  Xây dựng ứng dụng với các chức năng chính. Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 3 4. Phạm vi sử dụng đề tài Với nhu cầu học tiếng Anh ngày càng tăng cao của mọi người ở mọi lứa tuổi và mọi tầng lớp. Đề tài được kì vọng sẽ có thể ứng dụng rộng rãi cho người tự học tiếng Anh ở mọi độ tuổi. Với giao diện đơn giản dễ sử dụng, các chức năng đơn giản nhưng đáp ứng được các nhu cầu cần thiết nhất của một người tự học tiếng Anh, đề tài có thể phục vụ rộng rãi trong cộng đồng những người tự học tiếng Anh tại nhà hiện nay. 5. Bố cục của đồ án Đồ án được viết thành 3 chương chính, với độ dài khoảng 80 trang, bao gồm: Với chương thứ nhất, đồ án đi sâu vào tìm hiểu về công nghệ , cơ sở lý thuyết cần thiết cho đề tài để có thể áp dụng vào đề tài như các framework, thư viện cần thiết. Trong chương thứ hai đề tài đi vào khảo sát tình hình thực tế, khảo sát các website có chức năng tương tự. Sau đó thực hiện phân tích thiết kế hệ thống thông tin bao gồm các hoạt động như xác định các tác nhân và các đặc tả hoạt động của các tác nhân , phân tích luồng hoạt động của hệ thống và xây dựng cơ sở dữ liệu của hệ thống. Chương thứ ba đề tài sẽ trình bày quá trình triển khai hệ thống, quá trình xây dựng mã nguồn của chương trình và các hình ảnh thực tế của đề tài Và cuối cùng là kết luận và hướng phát triển để đánh giá kết quả đạt được và đưa ra giải pháp cho các vấn đề chưa giải quyết được. Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 4 Chương 1: CƠ SỞ LÝ THUYẾT 1.1. Tổng quan về ASP.NET Core ASP.NET Core là một framework mã nguồn mở, hiệu suất cao và đa nền tảng dùng để xây dựng các ứng dụng hiện đại có kết nối với internet và dựa trên mô hình đám mây. ASP.NET Core được phát triển bởi tập đoàn Microsoft và cộng đồng lập trình viên. ASP.NET Core cũng là một framework kiểu module có khả năng thực thi trên framework .NET, Windows và .NET Core đa nền tảng. ASP.NET Core còn được xem là sự kết hợp giữa ASP.NET MVC và ASP.NET Web API tạo thành một mô hình lập trình đơn. Mặc dù được xây dựng mới, ASP.NET Core vẫn có tính tương thích cao với ASP.NET MVC. Hơn nữa, các ứng dụng ASP.NET Core hỗ trợ kiểu phiên bản “side by side”, tức là cùng chạy trên một máy tính với việc lựa chọn nhiều phiên bản ASP.NET Core khác nhau. Điều này là không thể với các phiên bản ASP.NET trước kia. Với ASP.NET Core, bạn có thể:  Xây dựng các ứng dụng web, các dịch vụ, ứng dụng IoT và các phần backend mobile.  Sử dụng các công cụ phát triển ưa thích trên Windows, macOS và Linux.  Triển khai trên đám mây hoặc tại chỗ.  Chạy trên .NET Core hoặc .NET Framework. ASP.NET mang lại các lợi ích như sau:  Dùng để xây dựng giao diện Web (Web UI) cũng như các API Web.  Tích hợp các framework phía client hiện đại và các quy trình làm việc phát triển.  Hệ thống cấu hình sẵn có trên đám mây.  Tích hợp sẵn nhúng phụ thuộc.  Đường ống (pipeline) yêu cầu HTTP mang tính module, hiện suất cao và nhẹ ký.  Có khả năng lưu trữ (host) ở IIS, Nginx, Apache, Docker, hoặc tự host ở các tiến trình riêng.  Tạo mới phiên bản app side-by-side với .NET Core.  Tạo công cụ đơn giản hóa phát triển web hiện đại. Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 5  Khả năng xây dựng, chạy trên Windows, macOS, và Linux.  Mã nguồn mở và tập trung vào cộng đồng phát triển mã nguồn. ASP.NET Core được cung cấp dưới dạng các gói NuGet. Bạn có thể sử dụng các gói này để tối ưu hóa ứng dụng khi chỉ nhúng những thành phần cần thiết. Trên thực tế, các ứng dụng ASP.NET Core 2.x cũng chỉ yêu cầu một gói NuGet đơn lẻ. 1.2. Tổng quan về Entity Framework core Entity Framework Core (ef core) là phiên bản mới của Entity Framework sau EF 6.x. Nó là mã nguồn mở, nhẹ, có thể mở rộng và là phiên bản đa nền tảng của công nghệ truy cập dữ liệu Entity Framework. Entity Framework là một khung đối tượng / Ánh xạ quan hệ (O / RM). Đây là một cải tiến của ADO.NET, cung cấp cho các nhà phát triển một cơ chế tự động để truy cập và lưu trữ dữ liệu trong cơ sở dữ liệu. EF Core dự định sẽ được sử dụng với các ứng dụng .NET Core. Tuy nhiên, nó cũng có thể được sử dụng với các ứng dụng dựa trên khung .NET 4.5+ tiêu chuẩn. EF Core giúp cho việc thực hiện truy vấn dữ liệu từ cơ sở dữ liệu trở lên đơn giản với việc ánh xạ các bảng trong cơ sở dữ liệu thành các model trong back-end, và sử dụng LINQ (ngôn ngữ truy vấn tích hợp) để thực hiện các câu truy vấn mà không cần phải viết các câu query trực tiếp với database. Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 6 Hình 1.1 Kiến trúc của EF Core EDM (Entity Data Model): EDM bao gồm 3 thành phần chính Conceptual model, Mapping and Storage model Conceptual Model: The conceptual model bao gồm các model class và quan hệ giữa chúng. Conceptual model độc lập hoàn toàn với thiết kế các bảng nằm trong cơ sở dữ liệu Storage Model: Storage model là một thiết kế của cơ sở dữ liệu bao gồm các bảng, các views, các thủ tục, và các quan hệ và khóa của chúng. Mapping: Ánh xạ thể hiện cách mà các model được ánh xạ từ các model nằm ở cơ sở dữ liệu. LINQ to Entities: LINQ-to-Entities (L2E) là một ngôn ngữ truy vấn được dùng để viết các câu truy vấn dựa vào các model. L2E sẽ trả về các thực thể, các thực thể này là các đối tượng đã được định nghĩa trong các model class. Object Service: Object service là điểm vào chính để truy cập dữ liệu từ cơ sở dữ liệu. Object service chuyển đổi dữ liệu từ Entity Client Data Provider thành các entities. Entity Client Data Provider: Có vai trò chính trong việc chuyển đổi LINQ-to-Entities thành các câu truy vấn SQL mà cơ sở dữ liệu có thể hiểu được. Nó giao tiếp với ADO.Net Data Provider để gửi và nhận dữ liệu từ cơ sở dữ liệu Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 7 ADO.Net Data Provider: Tầng này trực tiếp sử dụng ADO.Net để giao tiếp với cơ sở dữ liệu EF Core hỗ trợ 2 kiểu tiếp cận chính bao gồm:  Code-First  Database-First Tuy nhiên EF Core chủ yếu tập trung hỗ trợ các tiếp cận code-first và hỗ trợ rất ít cho database-first. Với code-first, EF Core tạo ra cơ sở dữ liệu và các bảng khi sử dựng Migration dựa trên các qui tắc và các cấu hình của người dùng lên các model class. Với database-first EF Core tạo các model class dự trên cơ sở dữ liệu đã có sẵn. Hình 1.2 Hai cách tiếp cận chủ yếu của EF Core 1.3. Tổng quan về RESTful API RESTful ( Representational State Transfer ) là một tiêu chuẩn dùng trong việc thết kế các thiết kế API cho các ứng dụng web để quản lý các resource . RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến nhất ngày nay. Trọng tâm của REST quy định cách sử dụng các HTTP method (như GET , POST , PUT , DELETE ...) và cách định dạng các URL cho ứng dụng web để quản các resource. Việc quản lý resource của một website bao gồm 4 tác vụ chính:  Tạo mới một resource (create) Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 8  Lấy thông tin một resource (read)  Cập nhật một resource (update)  Xoá một resource (delete) Với các ứng dụng web được thiết kế sử dụng RESTful, lập trình viên có thể dễ dàng biết được URL và HTTP method để quản lý một resource. Bạn cũng cần lưu ý bản thân RESTful không quy định logic code ứng dụng và RESTful cũng không giới hạn bởi ngôn ngữ lập trình ứng dụng. Bất kỳ ngôn ngữ lập trình (hoặc framework) nào cũng có thể áp dụng RESTful trong việc thiết kế API cho ứng dụng web. 1.4. Tổng quan về React js 1.4.1. React js là gì? React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướng Single Page Application. Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác. Nếu như AngularJS là một Framework cho phép nhúng code javasscript trong code html thông qua các attribute như ng-model, ng-repeat...thì với react là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS. Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được. React được sử dụng tại Facebook trong production, và www.instagram.com được viết hoàn toàn trên React. Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau. React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM. 1.4.2. Các khái niệm chính Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 9 a. Virtual DOM Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý. React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này. Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật. Hình 1.3 Virtual DOM React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều. Dữ liệu được truyền từ parent đến child thông qua props. Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi . Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 10 Hình 1.4 Cơ chế binding trong React Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian. Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện. Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi. Khi đó React sẽ rất hữu ích để sử dụng. b. Giới thiệu về JSX JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc điểm: Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript. Safer: an toàn hơn. Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++. Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng. c. Giới thiệu về component React được xây dựng xung quanh các component, chứ không dùng template như các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác. Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 11 cập nhật component dựa trên những thay đổi của trạng thái. Mọi thứ React đều là component. Chúng giúp bảo trì mã code khi làm việc với các dự án lớn. Một react component đơn giản chỉ cần một method render. Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo. d. Props và State: Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render. Prop là bất biến. State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI. e. LifeCycle: Một thành phần đặc trưng không kém Props và State của React đó là LifeCycle. LifeCycle là những phương thức được viết sẵn truy cập đến từng thời điểm trong một vòng đời của component, từ đó chúng ta có thể triển khai ý tưởng một cách dễ dàng mà linh động. contructor Hàm này là hàm khởi tạo, là hàm chạy ngay sau khi component được tạo ra, đầu vào của hàm này là props (tức là thuộc tính của component được dùng để truyền dữ liệu từ bên ngoài vào). Trong hàm này chúng ta cũng có thể khởi tạo state cho component. componentWillMount: Trước khi render thì sẽ gọi đến hàm này. Ở đây chúng ta có thể đăng kí các biến toàn cục và có thể dựa vào props tính toán và setState nếu có. render Là hàm bắt buộc, vì đây là đầu ra của component. Nó chịu trách nhiệm trả về một đối tượng JSX những gì chúng ta muốn hiển thị ra bên ngoài. componentDidMount: Là hàm được gọi ngay sau khi giao diện được render xong, có nghĩa là khi giao diện hiện lên sẽ gọi hàm này. Trong hàm này chúng ta có thể dùng để lấy dữ liệu từ api, server… và setState dữ liệu ra. Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 12 componentWillRecieveProps(nextProps): Hàm này được gọi đến mỗi khi props thay đổi. Do vậy được sử dụng để thay đổi trạng thái của các component phụ thuộc vào props và sử dụng các kết quả, khởi tạo các biến có tính chất bất đồng bộ. shouldComponentUpdate(nextProps, nextState): Hàm này được gọi khi state và props thay đổi và sẽ trả về kết quả true/false, chúng ta sử dụng hàm này để xử lý xem có cần update component hay không. Mặc định hàm này sẽ trả về true. componentWillUpdate(nextProps, nextState): Hàm này được gọi dựa vào kết quả của hàm shouldComponentUpdate, nếu trả về false thì hàm này sẽ không được gọi. componentDidUpdate(prevProps, prevState): Hàm này được gọi ngay sau khi component được render lại. componentWillUnmount: Hàm này được gọi khi component loại bỏ DOM, thực hiện các thao tác dọn dẹp, loại bỏ những phần tử dư thừa và hủy các timer…  Ưu điểm và nhược điểm của ReactJS:  Ưu điểm: ReactJs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất nhiều. Reactjs cũng tính toán những thay đổi nào cần cập nhật len DOM và chỉ thực hiện chúng. Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí. ReactJs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dùng cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript. Ta có thể thêm vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi. Đây là đặc tính thú vị của Reactjs. Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX. Reactjs có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng dụng mở rộng của Chrome dành cho Reactjs. Nó giúp bạn debug code dễ dàng hơn. Sau Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 13 khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOM thông thường Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu SEO và thời gian tải trang. Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện ở client, thì người dùng sẽ phải chờ cho trang được khởi tạo và hiển thị lên. Điều này thực tế là chậm. Hoặc nếu giả sử người dung vô hiệu hóa Javascript thì sao? Reactjs là một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS. Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi  Nhược điểm ReactJs chỉ phục vụ cho tầng View. React chỉ là View Library nó không phải là một MVC framework như những framework khác. Đây chỉ là thư viện của Facebook giúp render ra phần view. Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ không có 2-way binding hay là Ajax. Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại. React khá nặng nếu so với các framework khác, React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó Angular là một framework hoàn chỉnh. Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 14 Chương 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 2.1. Khảo sát bài toán thực tế 2.1.1. Khảo sát một số diễn đàn tiếng Anh Hiện nay theo khảo sát các trang web liên quan đến các diễn đàn phục vụ cho người học tiếng Anh ở Việt Nam thì vẫn chưa tìm thấy website nào có đầy đủ các chức năng tương tự như “ Diễn đàn học tiếng Anh – Partner Finder ”. Ở Việt Nam có một số website diễn đàn tiếng Anh có chức năng tương tự như đề tài như: Duolingo:  Địa chỉ truy cập : https://forum.duolingo.com/  Mô tả: Duolingo là website diễn đàn tiếng anh cung cấp môi trường học tiếng Anh cho người dùng với các lộ trình và các bài học được định sẵn. Website cung cấp chức năng xếp loại người dùng làm tang khả năng cạnh tranh giữa người dùng với nhau. Ngoài ra Duolingo còn cung cấp từ điển và chức năng học từ vựng.  Ưu điểm: Giao diện đơn giản, hiện đại, thân thiện và dễ sử dụng. Chức năng tự học với lộ trình được chuẩn bị kĩ lưỡng với hình ảnh và âm thanh.  Nhược điểm: Chức năng thảo luận hơi đơn giản khi không thể chèn ảnh vào nội dung bài đăng. TiengAnh.Com.Vn  Địa chỉ truy cập: http://www.tienganh.com.vn/  Mô tả: Đây là một website với chức năng chính là diễn đàn để người dùng có thể đăng các bài đăng hoặc bình luận trong các bài đăng liên quan đến các kiến thức về tiếng Anh.  Ưu điểm: Cộng đồng lớn với số lượng người dùng nhiều  Nhược điểm: Giao diện sơ sài, không thân thiện với người dùng Các trang web của nước ngoài có rất nhiều diễn đàn lớn về học tiếng Anh tuy nhiên các website này đa số tập trung vào chức năng nên giao diện còn đơn giản, sơ sài không thân thiện với người dùng đặc biệt là người chưa có nhiều kiến thức về tiếng Anh. Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 15 2.1.2. Mục tiêu của hệ thống Với việc khảo sát các website diễn đàn tiếng Anh tại Việt Nam và nước ngoài. Mục tiêu của dự án “ Diễn đàn học tiếng Anh – Partner Finder ” bao gồm:  Xây dựng website với giao diện hiện đại, đơn giản, thân thiện với mọi đối tượng người dùng học tiếng Anh tại Việt Nam.  Website dễ dàng cho người dùng đăng kí và tìm kiếm cho mình một người học cùng phù hợp các tiêu chí và trình độ của người dùng. Các tiêu chí có thể bao gồm trình độ học vấn và địa điểm  Website cho phép người dùng tự kiểm tra trình độ hiện tại của mình thông qua các bài kiểm tra trình độ  Website cho phép người dùng nhắn tin trao đổi với các “partner” của mình  Website cho phép người dùng thực hiện hỏi đáp để giải quyết các vấn đề khó khăn của người dùng gặp phải khi tự học tiếng Anh.Việc hỏi đáp sẽ dễ thực hiện với đầy đủ các chức năng cần thiết để người dùng mô tả câu hỏi của mình  Website cho phép người dùng thực hiện việc lấy ý kiến của người khác bằng việc đăng bài viết hoặc bài nói của mình lên website. 2.2. Phân tích chức năng 2.2.1. Phát biểu bài toán Khi sử dụng hệ thống, người dùng sẽ thực hiện việc đăng kí (nếu chưa có tài khoản) với các thông tin về tài khoản và email và sau đó thực hiện đăng nhập vào hệ thống. Sau khi đăng nhập thành công, người dùng có thể chọn làm một bài kiểu tra để xác định trình độ của mình hoặc có thể chọn việc cập nhật thông tin cá nhân của mình. Người dùng có thể bỏ qua hai bước này để chuyển thẳng tới trang chính của website. Người dùng có thể tự động cập nhật trình độ cho mình mà không cần thực hiện bài kiểm tra. Ở trang chính của website, người dùng có thể xem danh sách các người dùng khác đang tìm kiếm “partner”, danh sách các câu hỏi và các bài đăng lấy góp ý. Tại đây người dùng có thể lựa chọn thực hiện các chức năng như xem thông tin của các người dùng đang tìm kiếm “partner”, thực hiện gửi yêu cầu để trở thành partner của người khác, lọc các người dùng có các tiêu chí phù hợp với mình. Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 16 Đối với danh sách các câu hỏi và các bài lấy ý kiến, tại trang chính người dùng có thể chọn để xem chi tiết của các bài đăng và tìm kiếm các bài khác. Người dùng có thể chọn việc đặt câu hỏi hoặc tạo một bài để lấy ý kiến của người khác về bài nói bài viết của mình với các thông tin yêu cầu nhập vào từ trang web. Khi truy cập vào các bài đăng của người khác, người dùng có thể “up-vote” nếu cảm thấy bài viết hữu ích và “up-vote” nếu thấy bài viết không phù hợp hoặc vi phạm các tiêu chuẩn của cộng đồng. Người dùng có thể thực hiện việc bình luận bên dưới bài viết để bày tỏ ý kiến của mình hoặc trả lời cho câu hỏi của người khác. Người dùng có thể xem các thông báo liên quan tới các hoạt động của người dùng và có thể nhắn tin trao đổi đối với các “partner” của mình. Hệ thống chỉ cho phép người dùng nhắn tin với các “partner” của họ mà không được nhắn tin cho những người chưa trở thành “partner”. Hệ thống còn cho phép người dùng chặn các người dùng khác nếu những người đó gây rối cho họ. Đối với người quản trị(admin) của hệ thống, hệ thống cho phép admin có thể xem danh sách tất cả các người dùng của hệ thống để thực hiện các tác vụ như chặn một user khỏi việc đăng nhập vào hệ thống, hoặc kích hoạt lại hoạt động của một user. Ngoài ra admin còn có thể xem các báo cáo của người dùng về các vi phạm của hệ thống và thực hiện xóa các bài đăng vi phạm khỏi hệ thống. 2.2.2. Chức năng của user Chức năng đăng ký: Chức năng cho phép user có thể đăng ký tài khoản để sử dụng website. Chức năng đăng nhập: Sau khi đã thực hiện đăng kí và có tài khoản của hệ thống, user có thể sử dụng chức năng này để tiến hành đăng nhập vào hệ thống và sử dụng các chức năng của hệ thống. Chức năng tìm kiếm partner: Chức năng này cho phép user sau khi đã đăng nhập vào hệ thống có thể tìm kiếm và gửi yêu cầu cho các người dùng khác để có thể trở thành partner của nhau. Chức năng xem các bài đăng của người khác: Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 17 Sau khi đã tiến hành đăng nhập, chức năng này cho phép user xem được các bài đăng hỏi đáp hay bài đăng lấy ý kiến từ user khác. User có thể tìm kiếm các bài đăng khác dự trên từ khóa được nhập vào. Chức năng bình luận ở bài đăng: Chức năng này cho phép user có thể thực hiện việc bình luận của mình trong bài đăng của người khác cũng như bài đăng của mình. Chức năng thích bài đăng hoặc bình luận: Chức năng này cho user thực hiện việc thích lên trên bài đăng hoặc bình luận của người khác hoặc của chính mình: Chức năng đăng một bài đăng: Chức năng này cho phép user thực hiện việc đăng bài hỏi đáp và bài lấy ý kiến của người khác để mọi người có thể nhìn thấy được. Chức năng cập nhật thông tin cá nhân: Chức năng này cho phép user có thể thay đổi, chỉnh sửa thông tin cá nhân của mình nhằm gây ấn tượng với người khác. Chức năng xem thông báo: Chức năng này cho phép user xem tất cả các thông báo về hoạt động của mình và các hoạt động của người khác liên quan tới mình. Chức năng nhắn tin: Chức năng này cho phép user thực hiện việc nhắn tin trao đổi với các partner của mình 2.2.3. Chức năng của admin Chức năng xem danh sách toàn bộ user của hệ thống: Chức năng này cho phép admin xem danh sách toàn bộ các user đã đăng kí trong hệ thống. Chức năng chặn một user khỏi việc đăng nhập vào hệ thống: Chức năng cho admin chọn và chặn một user khỏi việc đăng nhập vào hệ thống. User bị chặn này không thể thực hiện bất kì hành động nào đối với trang web. Xây dựng website diễn đàn tiếng Anh SVTH: Nguyễn Thế Cường GVHD: Nguyễn Thị Minh Hỷ 18 Chức năng hủy chặn một user: Chức năng này cho phép admin hủy chặn một user, khiến cho user này có thể đăng nhập và sử dụng bình thường website. Chức năng xem toàn bộ các báo cáo từ user: Chức năng này cho phép admin xem toàn bộ các báo cáo từ user. 2.3. Sơ đồ use case 2.3.1. Các tác nhân của hệ thống Hệ thống bao gồm 2 tác nhân chính: user và admin. Hoạt động của từng tác nhân bao gồm: User:  Đăng ký, đăng nhập vào hệ thống và đăng xuất khỏi hệ thống  Đổi mật khẩu  Lấy lại mật khẩu khi quên mật khẩu  Thực hiện bài kiểm tra để xác định trình độ  Cập nhật thông tin cá nhân  Xem danh sách và lọc theo các tiêu chí khác nhau các user đang tìm kiếm “partner”  Xem danh sách và tìm kiếm các câu hỏi và các bài đăng lấy ý kiến của user khác  Gửi yêu cầu để trở thành partner của người khác  Tạo các bài đăng về hỏi đáp hoặc lấy ý kiến của người khác.  Xem chi

TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN

Người hướng dẫn: THS NGUYỄN THỊ MINH HỶ Sinh viên thực hiện: NGUYỄN THẾ CƯỜNG

Số thẻ sinh viên: 102150088

Lớp: 15T2

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

Đà Nẵng, ngày … tháng … năm 2019

Giảng viên hướng dẫn

Đà Nẵng, ngày … tháng … năm 2019

Tên đề tài: Xây dựng website diễn đàn tiếng Anh

Sinh viên thực hiện: Nguyễn Thế Cường

Số thẻ SV: 102150088 Lớp: 15T2

Website diễn đàn tiếng Anh được xây dựng dựa trên nhu cầu học ngoại ngữ, đặc biệt

là tiếng Anh ngày một tăng cao của người dân Việt Nam hiện nay Website cung cấp một môi trường mà mọi người dùng có mong muốn học tiếng Anh đều có thể dễ dàng sử dụng Các vấn đề một người tự học tiếng Anh sẽ thường gặp phải sẽ thường bao gồm:

 Cần tìm một người học cùng: Một trong yếu tố rất quan trọng góp phần tạo nên thành công cho một người học tiếng Anh là có một người cùng học cùng Việc cùng học tiếng Anh với một người bạn khiến người học tiếng Anh có thể tìm được động lực để học tập và sẽ nhanh chóng tiến bộ

 Cần lời giải đáp trong một vấn đề khó: Trong quá trình tự học sẽ luôn có những vấn đề khó mà người tự học không biết hỏi ai và muốn có một môi trường để giải đáp cho họ những vấn đề trên

 Cần góp ý trong quá trình luyện tập tiếng Anh: Việc tự luyện tập trong tiếng Anh là điều cần thiết để giúp kĩ năng của người học tiến bộ hơn Nhưng trong quá trình đó người tự học luôn muốn nghe lời góp ý nhận xét của người khác về kĩ năng của mình

để biết mình sai ở đâu và cần cải thiện ở điểm nào

Hiểu được các vấn đề đó website diễn đàn tiếng Anh được xây dựng nhằm cung cấp cho người dùng các chức năng như tìm kiếm người cùng học, hỏi đáp các vấn đề khó khan trong quá trình tự học và lấy góp ý nhận xét từ người khác

KHOA CÔNG NGHỆ THÔNG TIN

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Họ tên sinh viên: NGUYỄN THẾ CƯỜNG Số thẻ sinh viên: 102150088 Lớp: 15T2 Khoa: Công nghệ thông tin Ngành: Công nghệ thông tin

1 Tên đề tài đồ án:

Xây dựng website diễn đàn tiếng Anh

2 Đề tài thuộc diện: ☐ Có ký kết thỏa thuận sở hữu trí tuệ đối với kết quả thực hiện

3 Các số liệu và dữ liệu ban đầu:

Không có

4 Nội dung các phần thuyết minh và tính toán:

Nội dung của thuyết minh gồm:

Mở đầu: Phần mở đầu của luận văn, giới thiệu về nhu cầu thực tế và lý do thực hiện

đề tài, đồng thời giới thiệu sơ lược về đề tài và mục tiêu phải đạt được

Chương 1 Cơ sở lý thuyết: trình bày những lý thuyết học được và đã áp dụng vào hệ thống

Chương 2 Phân tích và thiết kế: trình bày các hồ sơ phân tích và hồ sơ thiết kế trong xây dựng hệ thống và luồng hoạt động của hệ thống

Chương 3 Triển khai và đánh giá kết quả: mô tả cách cài đặt, vận hành hệ thống và đánh giá kết quả đạt được

5 Các bản vẽ, đồ thị (ghi rõ các loại và kích thước bản vẽ):

Không có

6 Họ tên người hướng dẫn: THS NGUYỄN THỊ MINH HỶ

7 Ngày giao nhiệm vụ đồ án: …… /……./ 2019

8 Ngày hoàn thành đồ án: …… /……./ 2019

Đà Nẵng, ngày tháng 12 năm 2019

Trên thực tế, không có thành công nào mà không gắn liền với những sự hỗ trợ, giúp

đỡ dù ít hay nhiều, dù là trực tiếp hay gián tiếp của người khác Trong suốt thời gian năm năm qua từ khi bắt đầu học tập ở giảng đường đại học đến nay, em đã nhận được rất nhiều

sự quan tâm, giúp đỡ của quý thầy cô, gia đình và bạn bè

Em xin chân thành cảm ơn cô - ThS Nguyễn Thị Minh Hỷ, người đã tận tình hướng dẫn, cũng như đã tạo mọi điều kiện để em có thể hoàn thành đồ án tốt nghiệp này Nếu như không nhờ những lời hướng dẫn, những đánh giá và chỉ bảo sâu sắc của cô thì em nghĩ việc hoàn thành đồ án tốt nghiệp của em sẽ khó khăn hơn rất nhiều Một lần nữa em xin chân thành cảm ơn cô

Sau cùng, em xin kính chúc quý thầy cô trong Khoa Công nghệ Thông tin và cô Nguyễn Thị Minh Hỷ thật dồi dào sức khỏe, niềm tin để tiếp tục thực hiện sứ mệnh cao đẹp của mình là truyền đạt kiến thức cho thế hệ mai sau

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

Nguyễn Thế Cường

Em xin cam đoan:

1 Nội dung trong đồ án này là do em thực hiện dưới sự hướng dẫn trực tiếp của Cô giáo ThS Nguyễn Thị Minh Hỷ

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ố

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

Sinh viên thực hiện

Nguyễn Thế Cường

TÓM TẮT i

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP ii

LỜI CẢM ƠN iii

CAM ĐOAN iv

MỤC LỤC v

DANH SÁCH CÁC BẢNG viii

DANH SÁCH HÌNH VẼ x

DANH SÁCH CÁC KÝ HIỆU, CHỮ VIẾT TẮT xii

MỞ ĐẦU 1

1 Bối cảnh chọn đề tài 1

2 Mục đích của đề tài 1

3 Nội dung của đề tài 2

4 Phạm vi sử dụng đề tài 3

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

Chương 1: CƠ SỞ LÝ THUYẾT 4

1.1 Tổng quan về ASP.NET Core 4

1.2 Tổng quan về Entity Framework core 5

1.3 Tổng quan về RESTful API 7

1.4 Tổng quan về React js 8

1.4.1 React js là gì? 8

1.4.2 Các khái niệm chính 8

Chương 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 14

2.1.2 Mục tiêu của hệ thống 15

2.2 Phân tích chức năng 15

2.2.1 Phát biểu bài toán 15

2.2.2 Chức năng của user 16

2.2.3 Chức năng của admin 17

2.3 Sơ đồ use case 18

2.3.1 Các tác nhân của hệ thống 18

2.3.2 Sơ đồ use case tổng quát 19

2.3.3 Sơ đồ use case phân rã 19

2.4 Sơ đồ lớp của hệ thống 46

2.5 Sơ đồ hoạt động của hệ thống 48

2.5.1 Sơ đồ hoạt động chức năng đăng bài 48

2.5.2 Sơ đồ hoạt động chức năng gửi yêu cầu 50

2.5.3 Sơ đồ hoạt động chức năng gửi báo cáo 52

2.6 Thiết kế cơ sở dữ liệu 53

2.6.1 Sơ đồ mối quan hệ giữa các bảng cơ sở dữ liệu: 55

2.6.2 Mô tả chi tiết các bảng 56

Chương 3: TRIỂN KHAI VÀ CHẠY THỬ NGHIỆM 64

3.1 Môi trường triển khai 64

3.1.1 Quản lý mã nguồn 64

3.1.2 Công cụ triển khai 64

3.1.3 Môi trường cài đặt 66

3.2 Kết quả demo và hướng dẫn cài đặt chương trình 69

3.3 Đánh giá 79

Bảng 2.1 Đặc tả use case đăng nhập 20

Bảng 2.2 Đặc tả use case đăng kí 21

Bảng 2.3 Đặc tả use case đổi mật khẩu 22

Bảng 2.4 Đặc tả use case cập nhật thông tin cá nhân 23

Bảng 2.5 Đặc tả use case xem danh sách thông báo 24

Bảng 2.6 Đặc tả use case đánh dấu đã đọc 25

Bảng 2.7 Đặc tả use case xem danh sách cuộc trò chuyện 27

Bảng 2.8 Đặc tả use case gửi tin nhắn 27

Bảng 2.9 Đặc tả use case xem chi tiết cuộc trò chuyện 28

Bảng 2.10 Đặc tả use case xem danh sách yêu cầu 29

Bảng 2.11 Đặc tả use case gửi yêu cầu 30

Bảng 2.12 Đặc tả use case chấp nhận yêu cầu 31

Bảng 2.13 Đặc tả use case xóa yêu cầu 31

Bảng 2.14 Đặc tả use case tạo mới bài đăng 33

Bảng 2.15 Đặc tả use case xem danh sách bài đăng 34

Bảng 2.16 Đặc tả use case xem chi tiết bài đăng 35

Bảng 2.17 Đặc tả use case tìm kiếm bài đăng 35

Bảng 2.18 Đặc tả use case thích bài đăng 36

Bảng 2.19 Đặc tả use case bình luận 37

Bảng 2.20 Đặc tả use case xem thông tin cá nhân 38

Bảng 2.21 Đặc tả use case báo cáo 39

Bảng 2.22 Đặc tả use case xem danh sách báo cáo 40

Bảng 2.23 Đặc tả use case xóa báo cáo 41

Bảng 2.25 Đặc tả use case xem danh sách user 43

Bảng 2.26 Đặc tả use case chặn user 44

Bảng 2.27 Đặc tả use case bỏ chặn 44

Bảng 2.28 Bảng dữ liệu UserAccounts 56

Bảng 2.29 Bảng dữ liệu Roles 56

Bảng 2.30 Bảng dữ liệu UserRoles 56

Bảng 2.31 Bảng dữ liệu UserInformations 57

Bảng 2.32 Bảng dữ liệu PartnerRequests 58

Bảng 2.33 Bảng dữ liệu Conversations 58

Bảng 2.34 Bảng dữ liệu Messages 59

Bảng 2.35 Bảng dữ liệu Posts 59

Bảng 2.36 Bảng dữ liệu Comments 60

Bảng 2.37 Bảng dữ liệu Notifications 61

Bảng 2.38 Bảng dữ liệu Partnerships 62

Hình 1.1 Kiến trúc của EF Core 6

Hình 1.2 Hai cách tiếp cận chủ yếu của EF Core 7

Hình 1.3 Virtual DOM 9

Hình 1.4 Cơ chế binding trong React 10

Hình 2.1 Sơ đồ use case tổng quát 19

Hình 2.2 Sơ đồ use case chức năng quản lý tài khoản 20

Hình 2.3 Sơ đồ use case chức năng quản lý thông báo 24

Hình 2.4 Sơ đồ use case chức năng quản lý tin nhắn 26

Hình 2.5 Sơ đồ use case chức năng quản lý yêu cầu 29

Hình 2.6 Sơ đồ use case chức năng quản lý bài đăng 33

Hình 2.7 Sơ đồ use case chức năng tương tác với user 38

Hình 2.8 Sơ đồ use case chức năng quản lý báo cáo 40

Hình 2.9 Sơ đồ use case quản lý user 43

Hình 2.10 Sơ đồ lớp của hệ thống 47

Hình 2.11 Sơ đồ hoạt động chức năng đăng bài 48

Hình 2.12 Sơ đồ hoạt động chức năng gửi yêu cầu 50

Hình 2.13 Sơ đồ hoạt động chức năng báo cáo 52

Hình 2.14 Mối quan hệ giữa các bảng cơ sở dữ liệu 55

Hình 3.1 Công cụ visual studio 2019 65

Hình 3.2 Công cụ Visual Code 66

Hình 3.3 Node js 66

Hình 3.4 React js 67

Hình 3.5 Net core của Microsoft 67

Hình 3.7 Màn hình đăng kí tài khoản 69

Hình 3.8 Màn hình đăng nhập 70

Hình 3.9 Màn hình sau khi đăng nhập 70

Hình 3.10 Màn hình gửi yêu cầu 71

Hình 3.11 Màn hình danh sách các partner 72

Hình 3.12 Màn hình xem chi tiết một bài đăng 72

Hình 3.13 Màn hình bình luận tại bài đăng 73

Hình 3.14 Màn hình chỉnh sửa thông tin cá nhân 74

Hình 3.15 Màn hình quản lý yêu cầu 74

Hình 3.16 Màn hình quản lý thông báo 76

Hình 3.17 Màn hình nhắn tin với user khác 76

Hình 3.18 Màn hình đặt câu hỏi 77

Hình 3.19 Màn hình đăng bài hỏi góp ý từ người khác 78

Hình 3.20 Màn hình xem thông tin cá nhân của người khác 78

Từ Viết tắt của Diễn giải

API Application Programming Interface Giao diện lập trình ứng dụng

RESTful REpresentational State Transfer

Một dạng chuyển đổi cấu trúc dữ liệu, một kiểu kiến trúc để viết API

DOM Document Object Model Mô hình đối tượng tài liệu

Một loại cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo

LINQ Language Integrated Query Ngôn ngữ truy vấn tích hợp

ORM Object Relational Mapping

Chỉ sự ánh xạ các bảng cơ sở dữ liệu thành các đối tượng trong các

ngôn ngữ lập trình

Framework

Mẫu đã được dựng sẵn giúp cho việc xây dựng một sản phẩm phần mềm nhanh chóng hơn

MỞ ĐẦU

1 Bối cảnh chọn đề tài

Hiện nay với sự phát triển nhanh chóng của kinh tế xã hội đặc biệt là sự hội nhập kinh

tế với nước ngoài, ngoại ngữ đang dần trở thành một yêu cầu không thể thiếu trong hầu hết các trường học và các doanh nghiệp, đặc biệt là doanh nghiệp nước ngoài Trong đó tiếng Anh vẫn luôn là một yêu cầu hàng đầu và là ngôn ngữ chính được giảng dạy tại hầu hết các đơn vị giáo dục tại Việt Nam Chính vì thế nhu cầu học và tự học tiếng Anh ở Việt Nam đang ngày càng tăng lên Một trong các yếu tố quan trọng cần thiết cho một người tự học tiếng Anh là một môi trường để trao đổi, hỏi đáp, lấy ý kiến từ người khác và tìm 1 người cùng học chung.Trong quá trình tự học tiếng Anh của mình, tôi nhận thấy có ba vấn đề gây khó khăn cho người tự học tiếng Anh bao gồm:

 Cần tìm một người học cùng: Một trong yếu tố rất quan trọng góp phần tạo nên thành công cho một người học tiếng Anh là có một người cùng học cùng Việc cùng học tiếng Anh với một người bạn khiến người học tiếng Anh có thể tìm được động lực để học tập và sẽ nhanh chóng tiến bộ

 Cần lời giải đáp trong một vấn đề khó: Trong quá trình tự học sẽ luôn có những vấn đề khó mà người tự học không biết hỏi ai và muốn có một môi trường để giải đáp cho họ những vấn đề trên

 Cần góp ý trong quá trình luyện tập tiếng Anh: Việc tự luyện tập trong tiếng Anh là điều cần thiết để giúp kĩ năng của người học tiến bộ hơn Nhưng trong quá trình đó người tự học luôn muốn nghe lời góp ý nhận xét của người khác về kĩ năng của mình

để biết mình sai ở đâu và cần cải thiện ở điểm nào

Chính vì thế ý tưởng về một diễn đàn giúp người học tiếng Anh tìm kiếm một người bạn cùng học tập, một môi trường để mọi người trao đổi hỏi đáp, lấy ý kiến của người khác khiến cho “Diễn đàn học tiếng Anh – Partner Finder” ra đời

2 Mục đích của đề tài

“Diễn đàn học tiếng Anh – Partner Finder” với mục đích xây dựng một website với giao diện đơn giản, thân thiện với mọi người dùng ở mọi lứa tuổi Website cung cấp một

môi trường để người dùng có thể dễ dàng tìm kiếm một người phù hợp với cùng nhu cầu học tiếng Anh để cùng nhau học tập Vì theo hầu hết các hướng dẫn về việc tự học tiếng Anh, tìm kiếm một đối tác để học cùng luôn là yếu tố quan trọng trong việc cải thiện trình

độ tiếng Anh của người học

Ngoài ra website còn cung cấp cho người dùng chức năng hỏi đáp Chức năng này giúp giải quyết vấn đề khi người tự học gặp vấn đề khó khăn nhưng không biết hỏi ai Chức năng này còn giúp người dùng chia sẻ kiến thức với mọi người cũng như cũng cố lại những kiến thức đã biết

Một chức năng lớn nữa của website là người dùng có thể lấy ý kiến của người khác về những bài viết hay bài nói của người dùng Mục đích của việc này giúp cho người dùng tự học tiếng Anh có thể được người khác góp ý sửa lỗi về các bài viết, bài nói Vì trong việc học tiếng Anh, việc tìm và sửa lỗi là yếu tốt quan trọng giúp người học có thể cải thiện kĩ năng nói và viết.Ngoài ra chức năng này còn giúp người dùng khác có thể tham khảo các bài nói, bài viết của người khác

3 Nội dung của đề tài

Những công việc cần thực hiện để hoàn thành đề tài bao gồm:

 Tìm hiểu bài toán thực tế

 Tìm hiểu và phân tích UML

 Phân tích và thiết kế hệ thống thông tin

 Tìm hiểu công nghệ cần sử dụng và ngôn ngữ kết nối cơ sở dữ liệu.Ở đây tôi sử dụng Asp.net core một framework xây dựng bởi Microsoft hỗ trợ xây dựng các ứng dụng web để xây dựng back-end cho website Cùng với đó ở phía client tôi sử dụng React js – một library của javascript được xây dựng bởi Facebook để xây dựng giao diện phía người dùng

 Thiết kế cơ sở dữ liệu Cơ sở dữ liệu SQL Server được sử dụng để lưu trữ dữ liệu của website

 Xây dựng ứng dụng với các chức năng chính

4 Phạm vi sử dụng đề tài

Với nhu cầu học tiếng Anh ngày càng tăng cao của mọi người ở mọi lứa tuổi và mọi tầng lớp Đề tài được kì vọng sẽ có thể ứng dụng rộng rãi cho người tự học tiếng Anh ở mọi độ tuổi Với giao diện đơn giản dễ sử dụng, các chức năng đơn giản nhưng đáp ứng được các nhu cầu cần thiết nhất của một người tự học tiếng Anh, đề tài có thể phục vụ rộng rãi trong cộng đồng những người tự học tiếng Anh tại nhà hiện nay

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

Đồ án được viết thành 3 chương chính, với độ dài khoảng 80 trang, bao gồm:

Với chương thứ nhất, đồ án đi sâu vào tìm hiểu về công nghệ , cơ sở lý thuyết cần thiết cho đề tài để có thể áp dụng vào đề tài như các framework, thư viện cần thiết

Trong chương thứ hai đề tài đi vào khảo sát tình hình thực tế, khảo sát các website có chức năng tương tự Sau đó thực hiện phân tích thiết kế hệ thống thông tin bao gồm các hoạt động như xác định các tác nhân và các đặc tả hoạt động của các tác nhân , phân tích luồng hoạt động của hệ thống và xây dựng cơ sở dữ liệu của hệ thống

Chương thứ ba đề tài sẽ trình bày quá trình triển khai hệ thống, quá trình xây dựng mã nguồn của chương trình và các hình ảnh thực tế của đề tài

Và cuối cùng là kết luận và hướng phát triển để đánh giá kết quả đạt được và đưa ra giải pháp cho các vấn đề chưa giải quyết được

Chương 1: CƠ SỞ LÝ THUYẾT

1.1 Tổng quan về ASP.NET Core

ASP.NET Core là một framework mã nguồn mở, hiệu suất cao và đa nền tảng dùng

để xây dựng các ứng dụng hiện đại có kết nối với internet và dựa trên mô hình đám mây ASP.NET Core được phát triển bởi tập đoàn Microsoft và cộng đồng lập trình viên ASP.NET Core cũng là một framework kiểu module có khả năng thực thi trên framework NET, Windows và NET Core đa nền tảng

ASP.NET Core còn được xem là sự kết hợp giữa ASP.NET MVC và ASP.NET Web API tạo thành một mô hình lập trình đơn Mặc dù được xây dựng mới, ASP.NET Core vẫn có tính tương thích cao với ASP.NET MVC Hơn nữa, các ứng dụng ASP.NET Core

hỗ trợ kiểu phiên bản “side by side”, tức là cùng chạy trên một máy tính với việc lựa chọn nhiều phiên bản ASP.NET Core khác nhau Điều này là không thể với các phiên bản ASP.NET trước kia

Với ASP.NET Core, bạn có thể:

 Xây dựng các ứng dụng web, các dịch vụ, ứng dụng IoT và các phần backend mobile

 Sử dụng các công cụ phát triển ưa thích trên Windows, macOS và Linux

 Triển khai trên đám mây hoặc tại chỗ

 Chạy trên NET Core hoặc NET Framework

ASP.NET mang lại các lợi ích như sau:

 Dùng để xây dựng giao diện Web (Web UI) cũng như các API Web

 Tích hợp các framework phía client hiện đại và các quy trình làm việc phát triển

 Hệ thống cấu hình sẵn có trên đám mây

 Tích hợp sẵn nhúng phụ thuộc

 Đường ống (pipeline) yêu cầu HTTP mang tính module, hiện suất cao và nhẹ ký

 Có khả năng lưu trữ (host) ở IIS, Nginx, Apache, Docker, hoặc tự host ở các tiến trình riêng

 Tạo mới phiên bản app side-by-side với NET Core

 Tạo công cụ đơn giản hóa phát triển web hiện đại

 Khả năng xây dựng, chạy trên Windows, macOS, và Linux

 Mã nguồn mở và tập trung vào cộng đồng phát triển mã nguồn

ASP.NET Core được cung cấp dưới dạng các gói NuGet Bạn có thể sử dụng các gói này để tối ưu hóa ứng dụng khi chỉ nhúng những thành phần cần thiết Trên thực tế, các ứng dụng ASP.NET Core 2.x cũng chỉ yêu cầu một gói NuGet đơn lẻ

1.2 Tổng quan về Entity Framework core

Entity Framework Core (ef core) là phiên bản mới của Entity Framework sau EF 6.x Nó là mã nguồn mở, nhẹ, có thể mở rộng và là phiên bản đa nền tảng của công nghệ truy cập dữ liệu Entity Framework

Entity Framework là một khung đối tượng / Ánh xạ quan hệ (O / RM) Đây là một cải tiến của ADO.NET, cung cấp cho các nhà phát triển một cơ chế tự động để truy cập và lưu trữ dữ liệu trong cơ sở dữ liệu

EF Core dự định sẽ được sử dụng với các ứng dụng NET Core Tuy nhiên, nó cũng có thể được sử dụng với các ứng dụng dựa trên khung NET 4.5+ tiêu chuẩn

EF Core giúp cho việc thực hiện truy vấn dữ liệu từ cơ sở dữ liệu trở lên đơn giản với việc ánh xạ các bảng trong cơ sở dữ liệu thành các model trong back-end, và sử dụng LINQ (ngôn ngữ truy vấn tích hợp) để thực hiện các câu truy vấn mà không cần phải viết các câu query trực tiếp với database

Hình 1.1 Kiến trúc của EF Core EDM (Entity Data Model): EDM bao gồm 3 thành phần chính Conceptual model, Mapping and Storage model

Conceptual Model: The conceptual model bao gồm các model class và quan hệ giữa chúng Conceptual model độc lập hoàn toàn với thiết kế các bảng nằm trong cơ sở dữ liệu Storage Model: Storage model là một thiết kế của cơ sở dữ liệu bao gồm các bảng, các views, các thủ tục, và các quan hệ và khóa của chúng

Mapping: Ánh xạ thể hiện cách mà các model được ánh xạ từ các model nằm ở cơ sở

dữ liệu

LINQ to Entities: LINQ-to-Entities (L2E) là một ngôn ngữ truy vấn được dùng để viết các câu truy vấn dựa vào các model L2E sẽ trả về các thực thể, các thực thể này là các đối tượng đã được định nghĩa trong các model class

Object Service: Object service là điểm vào chính để truy cập dữ liệu từ cơ sở dữ liệu Object service chuyển đổi dữ liệu từ Entity Client Data Provider thành các entities

Entity Client Data Provider: Có vai trò chính trong việc chuyển đổi LINQ-to-Entities thành các câu truy vấn SQL mà cơ sở dữ liệu có thể hiểu được Nó giao tiếp với ADO.Net Data Provider để gửi và nhận dữ liệu từ cơ sở dữ liệu

ADO.Net Data Provider: Tầng này trực tiếp sử dụng ADO.Net để giao tiếp với cơ sở

Hình 1.2 Hai cách tiếp cận chủ yếu của EF Core 1.3 Tổng quan về RESTful API

RESTful (Representational State Transfer) là một tiêu chuẩn dùng trong việc thết kế các thiết kế API cho các ứng dụng web để quản lý các resource RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến nhất ngày nay

Trọng tâm của REST quy định cách sử dụng các HTTP method (như GET, POST, PUT, DELETE ) và cách định dạng các URL cho ứng dụng web để quản các resource

Việc quản lý resource của một website bao gồm 4 tác vụ chính:

 Tạo mới một resource (create)

 Lấy thông tin một resource (read)

 Cập nhật một resource (update)

 Xoá một resource (delete)

Với các ứng dụng web được thiết kế sử dụng RESTful, lập trình viên có thể dễ dàng biết được URL và HTTP method để quản lý một resource Bạn cũng cần lưu ý bản thân RESTful không quy định logic code ứng dụng và RESTful cũng không giới hạn bởi ngôn ngữ lập trình ứng dụng Bất kỳ ngôn ngữ lập trình (hoặc framework) nào cũng có thể áp dụng RESTful trong việc thiết kế API cho ứng dụng web

1.4 Tổng quan về React js

1.4.1 React js là gì?

React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướng Single Page Application Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác Nếu như AngularJS là một Framework cho phép nhúng code javasscript trong code html thông qua các attribute như ng-model, ng-repeat thì với react

là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn

React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được React được sử dụng tại Facebook trong production, và www.instagram.com được viết hoàn toàn trên React

Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM

1.4.2 Các khái niệm chính

Hình 1.3 Virtual DOM React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều Dữ liệu được truyền từ parent đến child thông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi

Hình 1.4 Cơ chế binding trong React Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau

và mỗi status lại có số like, share, comment liên tục thay đổi Khi đó React sẽ rất hữu ích

để cho các lập trình viên Javascripts có thể sử dụng

c Giới thiệu về component

React được xây dựng xung quanh các component, chứ không dùng template như các framework khác Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện

cập nhật component dựa trên những thay đổi của trạng thái Mọi thứ React đều là component Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơn giản chỉ cần một method render Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo

d Props và State:

Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật

UI

e LifeCycle:

Một thành phần đặc trưng không kém Props và State của React đó là LifeCycle LifeCycle là những phương thức được viết sẵn truy cập đến từng thời điểm trong một vòng đời của component, từ đó chúng ta có thể triển khai ý tưởng một cách dễ dàng mà linh động

contructor

Hàm này là hàm khởi tạo, là hàm chạy ngay sau khi component được tạo ra, đầu vào của hàm này là props (tức là thuộc tính của component được dùng để truyền dữ liệu từ bên ngoài vào) Trong hàm này chúng ta cũng có thể khởi tạo state cho component

componentWillRecieveProps(nextProps):

Hàm này được gọi đến mỗi khi props thay đổi Do vậy được sử dụng để thay đổi trạng thái của các component phụ thuộc vào props và sử dụng các kết quả, khởi tạo các biến có tính chất bất đồng bộ

shouldComponentUpdate(nextProps, nextState):

Hàm này được gọi khi state và props thay đổi và sẽ trả về kết quả true/false, chúng ta

sử dụng hàm này để xử lý xem có cần update component hay không Mặc định hàm này

Hàm này được gọi khi component loại bỏ DOM, thực hiện các thao tác dọn dẹp, loại

bỏ những phần tử dư thừa và hủy các timer…

 Ưu điểm và nhược điểm của ReactJS:

 Ưu điểm:

ReactJs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn tại trên đó Điều này sẽ giúp cải thiện hiệu suất rất nhiều Reactjs cũng tính toán những thay đổi nào cần cập nhật len DOM và chỉ thực hiện chúng Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí

ReactJs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dùng cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript Ta có thể thêm vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi Đây là đặc tính thú

vị của Reactjs Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX

Reactjs có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng dụng mở rộng của Chrome dành cho Reactjs Nó giúp bạn debug code dễ dàng hơn Sau

khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOM thông thường

Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu SEO

và thời gian tải trang Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện ở client, thì người dùng sẽ phải chờ cho trang được khởi tạo và hiển thị lên Điều này thực tế là chậm Hoặc nếu giả sử người dung vô hiệu hóa Javascript thì sao? Reactjs là một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về

Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS

Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi

 Nhược điểm

ReactJs chỉ phục vụ cho tầng View React chỉ là View Library nó không phải là một MVC framework như những framework khác Đây chỉ là thư viện của Facebook giúp render ra phần view Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác React cũng sẽ không có 2-way binding hay là Ajax

Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại React khá nặng nếu so với các framework khác, React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb của Angular) Trong khi đó Angular là một framework hoàn chỉnh

Chương 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

2.1 Khảo sát bài toán thực tế

2.1.1 Khảo sát một số diễn đàn tiếng Anh

Hiện nay theo khảo sát các trang web liên quan đến các diễn đàn phục vụ cho người học tiếng Anh ở Việt Nam thì vẫn chưa tìm thấy website nào có đầy đủ các chức năng tương tự như “Diễn đàn học tiếng Anh – Partner Finder” Ở Việt Nam có một số website diễn đàn tiếng Anh có chức năng tương tự như đề tài như:

Duolingo:

 Địa chỉ truy cập : https://forum.duolingo.com/

 Mô tả: Duolingo là website diễn đàn tiếng anh cung cấp môi trường học tiếng Anh cho người dùng với các lộ trình và các bài học được định sẵn Website cung cấp chức năng xếp loại người dùng làm tang khả năng cạnh tranh giữa người dùng với nhau Ngoài ra Duolingo còn cung cấp từ điển và chức năng học từ vựng

 Ưu điểm: Giao diện đơn giản, hiện đại, thân thiện và dễ sử dụng Chức năng tự học với lộ trình được chuẩn bị kĩ lưỡng với hình ảnh và âm thanh

 Nhược điểm: Chức năng thảo luận hơi đơn giản khi không thể chèn ảnh vào nội dung bài đăng

TiengAnh.Com.Vn

 Địa chỉ truy cập: http://www.tienganh.com.vn/

 Mô tả: Đây là một website với chức năng chính là diễn đàn để người dùng có thể đăng các bài đăng hoặc bình luận trong các bài đăng liên quan đến các kiến thức về tiếng Anh

 Ưu điểm: Cộng đồng lớn với số lượng người dùng nhiều

 Nhược điểm: Giao diện sơ sài, không thân thiện với người dùng

Các trang web của nước ngoài có rất nhiều diễn đàn lớn về học tiếng Anh tuy nhiên các website này đa số tập trung vào chức năng nên giao diện còn đơn giản, sơ sài không thân thiện với người dùng đặc biệt là người chưa có nhiều kiến thức về tiếng Anh

 Website cho phép người dùng tự kiểm tra trình độ hiện tại của mình thông qua các bài kiểm tra trình độ

 Website cho phép người dùng nhắn tin trao đổi với các “partner” của mình

 Website cho phép người dùng thực hiện hỏi đáp để giải quyết các vấn đề khó khăn của người dùng gặp phải khi tự học tiếng Anh.Việc hỏi đáp sẽ dễ thực hiện với đầy đủ các chức năng cần thiết để người dùng mô tả câu hỏi của mình

 Website cho phép người dùng thực hiện việc lấy ý kiến của người khác bằng việc đăng bài viết hoặc bài nói của mình lên website

2.2 Phân tích chức năng

2.2.1 Phát biểu bài toán

Khi sử dụng hệ thống, người dùng sẽ thực hiện việc đăng kí (nếu chưa có tài khoản) với các thông tin về tài khoản và email và sau đó thực hiện đăng nhập vào hệ thống Sau khi đăng nhập thành công, người dùng có thể chọn làm một bài kiểu tra để xác định trình

độ của mình hoặc có thể chọn việc cập nhật thông tin cá nhân của mình Người dùng có thể bỏ qua hai bước này để chuyển thẳng tới trang chính của website Người dùng có thể

tự động cập nhật trình độ cho mình mà không cần thực hiện bài kiểm tra

Ở trang chính của website, người dùng có thể xem danh sách các người dùng khác đang tìm kiếm “partner”, danh sách các câu hỏi và các bài đăng lấy góp ý Tại đây người dùng có thể lựa chọn thực hiện các chức năng như xem thông tin của các người dùng đang tìm kiếm “partner”, thực hiện gửi yêu cầu để trở thành partner của người khác, lọc các người dùng có các tiêu chí phù hợp với mình

Đối với danh sách các câu hỏi và các bài lấy ý kiến, tại trang chính người dùng có thể chọn để xem chi tiết của các bài đăng và tìm kiếm các bài khác

Người dùng có thể chọn việc đặt câu hỏi hoặc tạo một bài để lấy ý kiến của người khác về bài nói bài viết của mình với các thông tin yêu cầu nhập vào từ trang web Khi truy cập vào các bài đăng của người khác, người dùng có thể “up-vote” nếu cảm thấy bài viết hữu ích và “up-vote” nếu thấy bài viết không phù hợp hoặc vi phạm các tiêu chuẩn của cộng đồng Người dùng có thể thực hiện việc bình luận bên dưới bài viết để bày tỏ ý kiến của mình hoặc trả lời cho câu hỏi của người khác

Người dùng có thể xem các thông báo liên quan tới các hoạt động của người dùng và

có thể nhắn tin trao đổi đối với các “partner” của mình

Hệ thống chỉ cho phép người dùng nhắn tin với các “partner” của họ mà không được nhắn tin cho những người chưa trở thành “partner” Hệ thống còn cho phép người dùng chặn các người dùng khác nếu những người đó gây rối cho họ

Đối với người quản trị(admin) của hệ thống, hệ thống cho phép admin có thể xem danh sách tất cả các người dùng của hệ thống để thực hiện các tác vụ như chặn một user khỏi việc đăng nhập vào hệ thống, hoặc kích hoạt lại hoạt động của một user Ngoài ra admin còn có thể xem các báo cáo của người dùng về các vi phạm của hệ thống và thực hiện xóa các bài đăng vi phạm khỏi hệ thống

2.2.2 Chức năng của user

Chức năng này cho phép user sau khi đã đăng nhập vào hệ thống có thể tìm kiếm và gửi yêu cầu cho các người dùng khác để có thể trở thành partner của nhau

Chức năng xem các bài đăng của người khác:

Sau khi đã tiến hành đăng nhập, chức năng này cho phép user xem được các bài đăng hỏi đáp hay bài đăng lấy ý kiến từ user khác User có thể tìm kiếm các bài đăng khác dự trên từ khóa được nhập vào

Chức năng bình luận ở bài đăng:

Chức năng này cho phép user có thể thực hiện việc bình luận của mình trong bài đăng của người khác cũng như bài đăng của mình

Chức năng thích bài đăng hoặc bình luận:

Chức năng này cho user thực hiện việc thích lên trên bài đăng hoặc bình luận của người khác hoặc của chính mình:

Chức năng đăng một bài đăng:

Chức năng này cho phép user thực hiện việc đăng bài hỏi đáp và bài lấy ý kiến của người khác để mọi người có thể nhìn thấy được

Chức năng cập nhật thông tin cá nhân:

Chức năng này cho phép user có thể thay đổi, chỉnh sửa thông tin cá nhân của mình nhằm gây ấn tượng với người khác

Chức năng xem thông báo:

Chức năng này cho phép user xem tất cả các thông báo về hoạt động của mình và các hoạt động của người khác liên quan tới mình

Chức năng nhắn tin:

Chức năng này cho phép user thực hiện việc nhắn tin trao đổi với các partner của mình 2.2.3 Chức năng của admin

Chức năng xem danh sách toàn bộ user của hệ thống:

Chức năng này cho phép admin xem danh sách toàn bộ các user đã đăng kí trong hệ thống

Chức năng chặn một user khỏi việc đăng nhập vào hệ thống:

Chức năng cho admin chọn và chặn một user khỏi việc đăng nhập vào hệ thống User

bị chặn này không thể thực hiện bất kì hành động nào đối với trang web

Chức năng hủy chặn một user:

Chức năng này cho phép admin hủy chặn một user, khiến cho user này có thể đăng nhập và sử dụng bình thường website

Chức năng xem toàn bộ các báo cáo từ user:

Chức năng này cho phép admin xem toàn bộ các báo cáo từ user

2.3 Sơ đồ use case

 Lấy lại mật khẩu khi quên mật khẩu

 Thực hiện bài kiểm tra để xác định trình độ

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

 Xem danh sách và lọc theo các tiêu chí khác nhau các user đang tìm kiếm “partner”

 Xem danh sách và tìm kiếm các câu hỏi và các bài đăng lấy ý kiến của user khác

 Gửi yêu cầu để trở thành partner của người khác

 Tạo các bài đăng về hỏi đáp hoặc lấy ý kiến của người khác

 Xem chi tiết, thể hiện cảm xúc cho các bài đăng của người khác

 Bình luận trong các bài viết của người khác hoặc của mình

 Chỉnh sửa, xóa các bài đăng của mình

 Xóa bình luận của mình hoặc của người khác trong bài đăng của mình

 Nhắn tin trao đổi với các “partner” của mình

Admin:

 Quản lý thành viên: tìm kiếm, kích hoạt hoạt động, chặn hoạt động của thành viên

 Quản lý các báo cáo vi phạm: Xem, tìm kiếm, đánh dấu đã giải quyết cho các báo cáo

vi phạm gửi từ user

 Quản lý các bài đăng: Xem, tìm kiếm, xóa các bài đăng vi phạm

2.3.2 Sơ đồ use case tổng quát

Hình 2.1 Sơ đồ use case tổng quát 2.3.3 Sơ đồ use case phân rã

a Sơ đồ use case chức năng quản lý tài khoản

Hình 2.2 Sơ đồ use case chức năng quản lý tài khoản

Bảng 2.1 Đặc tả use case đăng nhập

Ngoại lệ Nếu dữ liệu không hợp lệ, hệ thống hiển thị thông báo lỗi cho user Điều kiện trước Truy cập vào trang web

Điều kiện sau Đăng nhập vào hệ thống

Điều kiện thoát Khi chức năng thực hiện thành công

Khi user chọn thoát

Bảng 2.2 Đặc tả use case đăng kí

Nhấn nút đăng kí

Nếu dữ liệu hợp lệ thông báo đăng nhập thành công được đưa

ra Form đăng nhập được hiện ra

để user có thể đăng nhập vào hệ thống

Ngoại lệ Nếu dữ liệu không hợp lệ, hệ thống hiển thị thông báo lỗi cho user Điều kiện trước Truy cập vào trang web

Điều kiện sau Dữ liệu được lưu vào cơ sở dữ liệu, user có thể dùng tài khoản vừa

đăng kí đăng nhập hệ thống

Điều kiện thoát Khi chức năng thực hiện thành công

Khi user chọn thoát

Bảng 2.3 Đặc tả use case đổi mật khẩu

Vào mục tài khoản

Nhấn đổi mật khẩu button Giao diện form đổi mật khẩu hiện

ra Nhập thông tin mật khẩu cũ và mới

Nhấn nút xác nhận Nếu dữ liệu hợp lệ thông báo đổi

mật khẩu thành công được đưa ra Ngoại lệ Nếu dữ liệu không hợp lệ, hệ thống hiển thị thông báo lỗi cho user Điều kiện trước Đăng nhập vào hệ thống

Điều kiện sau Mật khẩu thay đổi thành công, user chỉ có thể đăng nhập với mật khẩu

mới

Điều kiện thoát Khi chức năng thực hiện thành công

Khi user chọn thoát

Bảng 2.4 Đặc tả use case cập nhật thông tin cá nhân

Nhấn cập nhật button Giao diện form cập nhật thông

tin cá nhân hiện ra Thay đổi thông tin

Nhấn nút xác nhận Nếu dữ liệu hợp lệ thông báo cập

nhật thành công được đưa ra

Ngoại lệ Nếu dữ liệu không hợp lệ, hệ thống hiển thị thông báo lỗi cho user Điều kiện trước Đăng nhập vào hệ thống

Điều kiện sau Thông tin cá nhân của user được lưu lại với thay đổi do user tạo ra

Điều kiện thoát Khi chức năng thực hiện thành công

Khi user chọn thoát

b Sơ đồ use case chức năng quản lý thông báo:

Hình 2.3 Sơ đồ use case chức năng quản lý thông báo Bảng 2.5 Đặc tả use case xem danh sách thông báo

Nhấn vào nút thông báo Giao diện trang hiển thị tất cả

các thông báo của user xuất hiện Ngoại lệ

Điều kiện trước Đăng nhập vào hệ thống

Điều kiện sau Tất cả các thông báo của user được hiển thị

Điều kiện thoát Khi chức năng thực hiện thành công

Vào trang danh sách thông báo Giao diện trang hiển thị tất cả

các thông báo của user xuất hiện

Nhấn nút xóa trên một thông báo Xuất hiện thông báo xóa thành

công Ngoại lệ

Điều kiện trước Đăng nhập vào hệ thống

Có ít nhất một thông báo trong danh sách Điều kiện sau Thông báo được xóa hoàn toàn khỏi danh sách thông báo

Điều kiện thoát Khi chức năng thực hiện thành công

Khi user chọn thoát

Bảng 2.6 Đặc tả use case đánh dấu đã đọc