ĐẠ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
Trang 1TRƯỜ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
Trang 2NHẬ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
Trang 3
Đà Nẵng, ngày … tháng … năm 2019
Trang 4Tê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
Trang 5KHOA 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
Trang 6Trê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
Trang 7Em 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
Trang 8TÓ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
Trang 92.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
Trang 11Bả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
Trang 12Bả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
Trang 13Hì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
Trang 14Hì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
Trang 15Từ 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
Trang 16MỞ ĐẦ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
Trang 17mô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
Trang 184 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
Trang 19Chươ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
Trang 20 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
Trang 21Hì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
Trang 22ADO.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)
Trang 23 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
Trang 24Hì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
Trang 25Hì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
Trang 26cậ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
Trang 27componentWillRecieveProps(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
Trang 28khi 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
Trang 29Chươ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
Trang 30 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
Trang 31Đố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:
Trang 32Sau 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
Trang 33Chứ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
Trang 342.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
Trang 35Hì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
Trang 36Ngoạ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
Trang 37đă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
Trang 38Bả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:
Trang 39Hì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ị
Trang 40Đ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