Frontend là giao diện người dùng, nơi ngườidùng tương tác trực tiếp với website để rèn luyện kỹ năng an ninh mạng của mình.Backend là phần xử lý logic và quản lý cơ sở dữ liệu, đảm bảo r
GIỚI THIỆU CHUNG
Tính cấp thiết của đề tài
Đề tài "Xây dựng website luyện tập và thi đấu CTF (Capture The Flag)" mang lại nhiều lợi ích và có tính cấp thiết trong nhiều khía cạnh:
Đào tạo nhân lực trong ngành an ninh mạng đang trở thành ưu tiên hàng đầu tại Việt Nam do sự gia tăng mối quan tâm toàn cầu Việc phát triển đội ngũ chuyên gia an ninh mạng là cực kỳ cần thiết Cuộc thi CTF (Capture The Flag) đóng vai trò quan trọng trong việc nâng cao kỹ năng thực hành bảo mật, điều tra và phân tích lỗ hổng Tham gia các cuộc thi CTF giúp người tham gia rèn luyện tư duy, cải thiện kỹ năng giải quyết vấn đề và cập nhật những kiến thức mới nhất trong lĩnh vực an ninh mạng.
Thiếu môi trường thực hành chuyên nghiệp: Tại Việt
Hiện nay, số lượng website rèn luyện kỹ năng bảo mật cho sinh viên và người đi làm còn hạn chế Phần lớn các nền tảng này chủ yếu đến từ các trường đại học và tổ chức quốc tế Tại trường Đại học Công nghệ thông tin và Truyền thông Việt-Hàn, Đại học Đà Nẵng chỉ có một website duy nhất phục vụ cho cuộc thi CTF, nhưng vẫn chưa được triển khai rộng rãi.
Phong trào CTF tại VKU đã chỉ mới phát triển trong hai năm qua, nhưng vẫn chưa được phổ biến rộng rãi trong số sinh viên ngành An toàn thông tin và Công nghệ thông tin Các cuộc thi CTF hiện tại chưa thu hút được sự tham gia đông đảo từ sinh viên trong trường.
Góp phần nâng cao nhận thức về an ninh mạng:
Website này được thiết kế dành cho sinh viên và người đi làm, nhằm cung cấp kiến thức cơ bản về an ninh mạng cho người dùng phổ thông, giúp giảm thiểu rủi ro từ các cuộc tấn công mạng.
CTF không chỉ là cuộc thi mà còn là phương pháp học tập hiệu quả thông qua thực hành, giúp sinh viên và người đi làm củng cố kiến thức lý thuyết qua các bài toán thực tế Các thử thách trong CTF mô phỏng tình huống tấn công thực tế, giúp người học nhanh chóng làm quen và giải quyết những vấn đề phức tạp.
Đề tài này không chỉ quan trọng trong việc đào tạo nguồn nhân lực an ninh mạng mà còn nâng cao nhận thức và trình độ bảo mật thông tin trong cộng đồng.
Mục tiêu của đề tài
Giao diện website được thiết kế đơn giản với màu sắc nhẹ nhàng, giúp người dùng dễ dàng truy cập mà không bị rối mắt Nội dung cung cấp thông tin chính xác, dễ hiểu và dễ sử dụng Hệ thống luyện tập và thi đấu đa dạng với nhiều thử thách, cùng với hệ thống xếp hạng khuyến khích người tham gia.
Đối tượng và phạm vi nghiên cứu
Nghiên cứu này tập trung vào các website luyện tập và thi đấu CTF toàn cầu, phân tích các kỹ thuật và phương pháp xây dựng cũng như triển khai những nền tảng này Bên cạnh đó, bài viết cũng đề cập đến các biện pháp bảo mật hệ thống nhằm bảo vệ dữ liệu người dùng khi truy cập vào các website CTF.
Phạm vi nghiên cứu của đề tài tập trung vào các thành phần cấu thành website, bao gồm frontend và backend Frontend là giao diện người dùng, nơi người dùng tương tác để rèn luyện kỹ năng an ninh mạng Trong khi đó, backend xử lý logic và quản lý cơ sở dữ liệu, đảm bảo hiệu quả trong quá trình sử dụng Việc triển khai chính xác và hiệu quả cả hai phần này là yếu tố quan trọng để cung cấp trải nghiệm người dùng tốt nhất trên website.
Phương pháp nghiên cứu
Phương pháp nghiên cứu cho đề tài này sẽ bao gồm hai phần chính: phân tích và khảo sát cũng như triển khai thực nghiệm.
Phân tích và Khảo sát:
Phương pháp này bao gồm việc nghiên cứu và phân tích các trang web luyện tập và thi đấu CTF hiện có, nhằm hiểu rõ cấu trúc, tính năng và nội dung thông tin mà chúng cung cấp.
Để xây dựng website hiệu quả, cần tham khảo ý kiến, phản hồi và nhu cầu của người dùng trên các nền tảng trực tuyến nhằm xác định các yêu cầu cụ thể.
- Xây dựng và triển khai website dựa trên các yêu cầu và phân tích từ phần trước.
- Thực nghiệm và kiểm thử tính năng của website với một nhóm người dùng thử nghiệm để thu thập phản hồi và đánh giá hiệu suất của website.
- Đánh giá sự đáp ứng của website đối với nhu cầu và mong muốn của người dùng, cũng như tính chính xác và đáng tin cậy của hệ thống.
Phương pháp này đảm bảo rằng website không chỉ đáp ứng nhu cầu của người dùng mà còn cung cấp giá trị thực tế trong việc phát triển kỹ năng an ninh mạng.
Ý nghĩa lý luận và ý nghĩa thực tiễn của đề tài
1.5.1 Ý nghĩa lý luận của đề tài Đề tài giúp bổ sung kiến thức về cách xây dựng và triển khai các hệ thống web phục vụ cho các cuộc thi CTF Qua đó, hiểu rõ hơn về các nguyên tắc phát triển website, đặc biệt là các yêu cầu về bảo mật Đồng thời, giúp nghiên cứu sâu hơn về mô hình tổ chức các cuộc thi CTF và cách áp dụng vào thực tế, góp phần hoàn thiện lý thuyết về giáo dục và thi đấu trực tuyến trong lĩnh vực này.
1.5.2 Ý nghĩa thực tiễn của đề tài:
Website này không chỉ tạo sân chơi cho những người đam mê an ninh mạng mà còn giúp nâng cao kỹ năng qua các thử thách thực tế Nội dung có thể được áp dụng trong trường học hoặc cộng đồng để tổ chức các cuộc thi CTF, từ đó phát hiện và bồi dưỡng nhân tài trong lĩnh vực an ninh mạng Ngoài ra, website còn tạo cơ hội cho người dùng thực hành, thi đấu và học hỏi lẫn nhau, góp phần xây dựng cộng đồng an ninh mạng vững mạnh hơn.
Khảo sát, xác định yêu cầu
Giai đoạn thu thập thông tin và tài liệu liên quan đến giao diện trang web là rất quan trọng để xác định các vấn đề cần giải quyết trước khi thiết kế và xây dựng Nội dung khảo sát phải phù hợp với yêu cầu của người sử dụng và quy mô của trang web trong lĩnh vực giáo dục và an ninh mạng Phân tích và xác định rõ yêu cầu của người dùng giúp hiểu mục đích và mong muốn của họ, từ đó tìm hiểu đầy đủ về các tính năng, chức năng, giao diện và nội dung cần thiết Mục tiêu cuối cùng là tạo ra đặc tả yêu cầu, tài liệu ràng buộc giữa người dùng và người phát triển, nhằm xây dựng một trang web chuyên nghiệp, thân thiện và đáp ứng đầy đủ nhu cầu của người sử dụng.
Nội dung: Trang web cần cung cấp hệ thống bài tập, hệ thống thi đấu chất lượng, đầy đủ.
Giao diện và trải nghiệm người dùng là yếu tố quan trọng trong thiết kế trang web, đòi hỏi giao diện thân thiện và dễ sử dụng Trang web cần được tối ưu hóa để đáp ứng nhu cầu người dùng, đồng thời đảm bảo hoạt động chính xác để mang lại trải nghiệm thoải mái và hiệu quả cho người sử dụng.
Bố cục của đề tài
Nội dung của đồ án gồm có 3 chương:
- Chương 2: Cơ sở lý thuyết
- Chương 3: Phân tích và thiết kế hệ thống
- Chương 4: Xây dựng website và kiểm thử
- Chương 5: Kết luận và hướng phát triển
CƠ SỞ LÝ THUYẾT
Cơ sở lý luận và thực tiễn
Website, hay còn gọi là trang web, là tập hợp các trang web thường nằm trong một tên miền hoặc tên miền phụ trên Internet Một trang web được cấu thành từ các tệp tin HTML hoặc XHTML và có thể truy cập thông qua giao thức HTTP Các trang mạng có thể là tĩnh, được xây dựng từ các tệp tin HTML, hoặc động, được vận hành bằng các hệ thống quản lý nội dung (CMS) chạy trên máy chủ.
- Trang mạng có thể được xây dựng bằng nhiều ngôn ngữ lập trình khác nhau (PHP, Java, ).
- Để một website hoạt động cần 3 yếu tố:
Cần có tên miền (domain)
Nơi lưu trữ website (server)
Nội dung các trang web hoặc cơ sở dữ liệu thông tin
CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để tìm kiếm và định dạng các phần tử được tạo ra bởi các ngôn ngữ đánh dấu như HTML.
HTML định dạng các phần tử trên website như văn bản, tiêu đề và bảng, trong khi CSS giúp thêm phong cách và hình thức cho các phần tử đó.
“phong cách” vào các phần tử HTML đó như đổi màu sắc trang,đổi màu chữ, thay đổi cấu trúc,…rất nhiều.
Hình CƠ SỞ LÝ THUYẾT 1 Logo CSS
- Tăng khả năng tiếp cận khách hàng.
- Tăng phạm vi khách hàng.
- Xúc tiến kinh doanh hiệu quả.
- Dịch vụ khách hàng hiệu quả.
- Nền tảng cho sản phẩm bán hàng.
- Xác định khách hàng tiềm năng.
- Tăng năng lực cạnh tranh.
- Cập nhật thông tin một cách nhanh chóng.
- Dễ dàng lấy ý kiến phản hồi từ khách hàng.
- HTML (viết tắt của từ Hypertext Markup Language, hay là
Ngôn ngữ Đánh dấu Siêu văn bản (HTML) là một ngôn ngữ thiết kế quan trọng dùng để tạo ra các trang web trên World Wide Web Kết hợp với CSS và JavaScript, HTML đóng vai trò then chốt trong lĩnh vực thiết kế website.
- Hiện nay, phiên bản mới nhất của ngôn ngữ này là HTML5.
Hình CƠ SỞ LÝ THUYẾT 2 Logo HTML
2.1.5 Tổng quan về ngôn ngữ lập trình Javascript [4]
JavaScript là ngôn ngữ lập trình dựa trên nguyên mẫu, có cú pháp tương tự như C Nó sử dụng các khái niệm từ khoá, dẫn đến việc JavaScript gần như không thể mở rộng Bên cạnh đó, JavaScript cũng không có bộ xử lý xuất/nhập riêng như C.
- Thư viện JavaScript nổi tiếng:
Bộ khung Prototype kết hợp với thư viện Scriptaculous.
Thư viện jQuery, tiết kiệm thời gian viết mã lệnh cũng như cung cấp các hàm tương tác với DOM trên các trình duyệt khác nhau.
Nodejs, hệ thống chương trình giúp chạy JavaScript ngoài trình duyệt.
Hình CƠ SỞ LÝ THUYẾT 3 Logo JavaScript
- phpMyAdmin là một công cụ quản trị cơ sở dữ liệu MySQL được phát triển dành riêng cho môi trường web Dưới đây là một tổng quan về phpMyAdmin:
Quản lý Cơ Sở Dữ Liệu MySQL:
phpMyAdmin cung cấp giao diện web đồ họa cho việc quản lý cơ sở dữ liệu MySQL một cách dễ dàng và thuận tiện.
Nó cho phép quản trị viên cơ sở dữ liệu thực hiện các thao tác như tạo mới cơ sở dữ liệu và bảng, chỉnh sửa cấu trúc bảng, cũng như thêm và xóa dữ liệu.
Hỗ Trợ Nhiều Chức Năng:
phpMyAdmin là một công cụ mạnh mẽ cho phép quản lý cơ sở dữ liệu hiệu quả, cung cấp các chức năng như quản lý người dùng và quyền truy cập, sao lưu và khôi phục dữ liệu, cũng như thực thi các truy vấn SQL và nhiều tính năng hữu ích khác.
Nó cũng cung cấp một trình soạn thảo SQL tích hợp cho phép người dùng tạo và chỉnh sửa các truy vấn một cách thuận tiện.
Giao Diện Dễ Sử Dụng:
Giao diện phpMyAdmin thân thiện và dễ sử dụng, cho phép người dùng thực hiện quản trị cơ sở dữ liệu một cách hiệu quả mà không cần có kiến thức chuyên sâu về SQL hay quản trị hệ thống.
Đa Nền Tảng và Mã Nguồn Mở:
phpMyAdmin là một ứng dụng web mã nguồn mở và hoạt động trên nhiều nền tảng hệ điều hành như Windows, macOS và Linux.
Người dùng có thể tải phpMyAdmin miễn phí từ trang web chính thức hoặc sử dụng các gói cài đặt có sẵn trên các hệ điều hành.
phpMyAdmin sở hữu một cộng đồng đông đảo và năng động, cung cấp nhiều tài liệu, hướng dẫn và diễn đàn trực tuyến, giúp người dùng dễ dàng tìm kiếm giải pháp cho các vấn đề và học hỏi lẫn nhau.
phpMyAdmin là một công cụ quản trị cơ sở dữ liệu MySQL hiệu quả và đa năng, cho phép người dùng quản lý và tương tác với cơ sở dữ liệu MySQL một cách dễ dàng thông qua giao diện web thân thiện.
Hình CƠ SỞ LÝ THUYẾT 4 Logo phpMyAdmin
PHP (Hypertext Preprocessor) là ngôn ngữ lập trình mã nguồn mở chủ yếu được sử dụng để phát triển ứng dụng web Nó cung cấp nhiều tính năng mạnh mẽ và linh hoạt, giúp lập trình viên xây dựng các trang web động và tương tác Với sự phổ biến của PHP trong cộng đồng lập trình, nó trở thành một công cụ quan trọng cho việc phát triển các ứng dụng trực tuyến hiệu quả.
Mục Đích và Ứng Dụng:
PHP được sử dụng chủ yếu để phát triển các trang web động và ứng dụng web.
Nó có thể được sử dụng để xây dựng các trang web tĩnh, hệ thống quản lý nội dung (CMS) như WordPress, Joomla và Drupal, cũng như phát triển các ứng dụng web phức tạp như cửa hàng trực tuyến, diễn đàn và hệ thống quản lý dữ liệu.
Cú Pháp và Cấu Trúc:
PHP được nhúng trực tiếp vào mã HTML, cho phép tạo ra các trang web động một cách dễ dàng.
Cú pháp của PHP tương tự như các ngôn ngữ lập trình khác như C, Java, và JavaScript, giúp lập trình viên dễ dàng học và sử dụng.
Tính Linh Hoạt và Mở Rộng:
PHP hỗ trợ nhiều cơ sở dữ liệu phổ biến như MySQL, PostgreSQL, và SQLite, cho phép tương tác dễ dàng với dữ liệu.
Nó có thể chạy trên nhiều hệ điều hành như Windows, macOS, và Linux.
Cộng đồng PHP rất lớn và phong phú, cung cấp hàng nghìn thư viện và framework để giúp phát triển ứng dụng một cách nhanh chóng và hiệu quả.
PHP được cập nhật và duy trì đều đặn để bảo vệ khỏi các lỗ hổng bảo mật mới.
Có các phương pháp bảo mật như mã hóa và kiểm tra đầu vào để đảm bảo an toàn cho ứng dụng web.
Hỗ Trợ Tốt từ Cộng Đồng:
Cộng đồng PHP rất phong phú và năng động, cung cấp nhiều tài liệu, hướng dẫn và diễn đàn trực tuyến, giúp lập trình viên giải quyết vấn đề và học hỏi lẫn nhau.
PHP là một ngôn ngữ lập trình mạnh mẽ và linh hoạt, phổ biến trong phát triển ứng dụng web động Sự linh hoạt, dễ sử dụng và khả năng mở rộng của PHP, cùng với sự hỗ trợ nhiệt tình từ cộng đồng lập trình viên, đã làm cho nó trở thành lựa chọn hàng đầu cho nhiều dự án.
Hình CƠ SỞ LÝ THUYẾT 5 Logo PHP
Giới thiệu sơ lược về các thư viện hỗ trợ
Laravel là một framework PHP mã nguồn mở, phát triển ứng dụng web theo mô hình MVC (Model-View-Controller) Được tạo ra bởi Taylor Otwell vào năm 2011, Laravel đã nhanh chóng trở thành một trong những framework PHP phổ biến nhất Sự phổ biến của Laravel đến từ nhiều ưu điểm nổi bật.
Cú pháp đơn giản, dễ hiểu
Laravel cung cấp cú pháp rõ ràng, dễ đọc, giúp người sử dụng viết mã nhanh hơn và dễ bảo trì hơn.
Mô hình MVC (Model-View-Controller):
Giúp tổ chức mã nguồn một cách rõ ràng, tách biệt logic xử lý và giao diện, giúp quản lý ứng dụng dễ dàng.
Laravel cung cấp nhiều tính năng bảo mật như mã hóa, bảo vệ CSRF, validation đầu vào, và bảo vệ chống SQL Injection.
Ứng dụng rộng rãi trong các doanh nghiệp:
Laravel được sử dụng rộng rãi trong các dự án lớn của các doanh nghiệp nhờ khả năng mở rộng và bảo mật cao.
Mã Nguồn Mở và Cộng Đồng:
Laravel là một dự án mã nguồn mở, có một cộng đồng lập trình viên lớn và năng động đóng góp vào việc phát triển và duy trì.
Có rất nhiều tài liệu, hướng dẫn có sẵn để hỗ trợ người dùng Laravel trong việc phát triển các ứng dụng web.
Laravel là một framework PHP mạnh mẽ, hỗ trợ các nhà phát triển trong việc xây dựng ứng dụng web chuyên nghiệp, hiệu quả và bảo mật.
Hình CƠ SỞ LÝ THUYẾT 8 Logo Laravel
Hướng tiếp cận của đề tài
Để phát triển một hệ thống thi đấu CTF hiệu quả, trước tiên cần nghiên cứu các mô hình thi đấu hiện có và xác định các yêu cầu chức năng như luyện tập, thi đấu, chấm điểm tự động, bảng xếp hạng và quản lý người dùng Quá trình thiết kế sẽ áp dụng kiến trúc MVC nhằm tạo ra giao diện thân thiện và cơ sở dữ liệu được tổ chức hợp lý Trong giai đoạn phát triển, các công nghệ như Laravel (PHP), MySQL và JavaScript sẽ được triển khai để đảm bảo nền tảng ổn định và bảo mật Cuối cùng, hệ thống sẽ trải qua các bài kiểm thử về chức năng, hiệu năng và bảo mật trước khi đưa vào vận hành thực tế.
- Tên đề tài: “ Xây dựng website luyện tập và thi đấu CTF (Capture
- Công nghệ được sử dụng
Thiết kế giao diện của Website dựa trên các nền tảng: HTML, CSS, và ngôn ngữ lập trình JavaScript.
Sử dụng framework Laravel để tương tác và phpMyAdmin để lưu trữ dữ liệu của người dùng và hệ thống đề luyện tập, đề thi.
Trình biên dịch: Visual Studio Code.
Trình duyệt: Google Chrome, Microsoft Edge, ….
- Website được thiết kế giao diện gồm 11 trang chính:
Trang chủ: Giới thiệu các thông tin cơ bản.
Trang đăng nhập / đăng ký: nơi người dùng tạo/đăng nhập tài khoản
Trang sau khi đăng nhập: Là nơi hiển thị các chức năng có trong website.
Trang danh sách người dùng: Là nơi hiển thị danh sách tất cả người dùng đã tham gia.
Trang danh sách đội: Là nơi hiển thị danh sách tất cả đội thi đã đăng ký.
Trang luyện tập: Là nơi để người dùng rèn luyện kỹ năng.
Trang thi đấu: Nơi các đội thi tham gia thi đấu.
Trang bảng xếp hạng: Hiển thị điểm và thứ hạng của tất cả các đội thi.
Trang Profile: Hiển thị thông tin của người dùng.
Trang Thông tin đội thi: Hiển thị thông tin của đội thi và các hành động trong đội.
Trang admin ( dành cho quản trị viên ): Nơi quản trị viên quản lý website.
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Đặc tả yêu cầu phần mềm (Software Requirements)
3.1.1 Người dùng chưa đăng ký
- Người dùng chưa đăng ký có thể sửa dụng các chức năng sau:
Truy cập trang chủ của website.
Đăng ký tài khoản thành viên.
3.1.2 Người dùng đã đăng ký
- Người dùng đã đăng ký có thể sửa dụng các chức năng sau:
Cài đặt lại mật khẩu (nếu quên mật khẩu).
Xem danh sách người dùng khác đã đăng ký.
Xem danh sách các đội thi đã đăng kí.
Đọc luật của cuộc thi.
Tạo/tham gia/thoát đội thi.
Chỉnh sửa thông tin cá nhân.
Chỉnh sửa thông tin đội (nếu là đội trưởng).
- Người dùng quản trị viên có thể sửa dụng các chức năng sau:
Quản lý tất cả người dùng.
Quản lý tất cả đội thi.
Quản lý chức năng luyện tập.
Quản lý chức năng thi đấu.
Sơ đồ Use-case
3.2.1 Sơ đồ Use-case tổng quát
Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 9 Sơ đồ Use-case tổng quát
3.2.2 Sơ đồ phân rã Use-case cho người dùng
Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 10 Sơ đồ phân rã Use-case cho người dùng
3.2.3 Sơ đồ phân rã Use-case cho quản trị viên
Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 11 Sơ đồ phân rã Use-case cho quản trị viên
Sơ đồ lớp (Class Diagram)
Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 12 Sơ đồ lớp (Class Diagram)
Sơ đồ hoạt động (Activity Diagram)
3.4.1 Sơ đồ hoạt động tổng quát
Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 13 Sơ đồ hoạt động tổng quát
3.4.2 Sơ đồ hoạt động trang đăng nhập/đăng ký
Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 14 Sơ đồ hoạt động trang đăng nhập/đăng ký
3.4.3 Sơ đồ hoạt động trang luyện tập
Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 15 Sơ đồ hoạt động trang luyện tập
3.4.4 Sơ đồ hoạt động trang đội thi
Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 16 Sơ đồ hoạt động trang luyện tập
3.4.5 Sơ đồ hoạt động trang thi đấu
Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 17 Sơ đồ hoạt động trang thi đấu
Sơ đồ tuần tự (Sequence Diagram)
3.5.1 Sơ đồ tuần tự trang đăng nhập/đăng ký
Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 18 Sơ đồ tuần tự trang đăng nhập/đăng ký
3.5.2 Sơ đồ tuần tự trang đội thi
Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 19 Sơ đồ tuần tự trang đội thi
3.5.3 Sơ đồ tuần tự trang luyện tập
Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 20 Sơ đồ tuần tự trang luyện tập
3.5.4 Sơ đồ tuần tự trang thi đấu
XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ
Thiết kế giao diện
Để tạo ra một website, bạn cần dựa trên các ý tưởng đã có sẵn và sử dụng các công cụ, thư viện hỗ trợ cùng các ngôn ngữ lập trình tương tác Điều này giúp bạn xây dựng một trang web đáp ứng đầy đủ các yêu cầu cần thiết, từ giao diện người dùng đến chức năng hoạt động.
Giao diện thân thiện, dễ sử dụng.
Bố cục website rõ ràng, phù hợp.
Xử lý backend một cách chính xác.
Thiết kế một website có thể hiển thị được trên nhiều thiết bị như: PC, Laptop, Tablet, và Smartphone
Giao diện website
Giao diện trang chủ đóng vai trò quan trọng trong việc thu hút người dùng khi họ truy cập vào website Một trang chủ có thiết kế đẹp mắt sẽ dễ dàng lôi cuốn người dùng và tạo ấn tượng tích cực ngay từ lần đầu tiên.
Tạo ấn tượng đầu tiên là Backgroud trang chủ
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 22 Giao diện trang chủ
4.2.2 Giao diện đăng nhập/đăng ký
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 23 Giao diện đăng nhập
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 24 Giao diện đăng ký
Giao diện sau khi đăng nhập thành công
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 25 Giao diện sau khi đăng nhập thành công
4.2.3 Giao diện luật thi đấu
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 26 Giao diện trang luật thi đấu
4.2.4 Giao diện trang danh sách người dùng
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 27 Giao diện danh sách người dùng
4.2.5 Giao diện trang danh sách đội thi
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 28 Giao diện danh sách đội thi
4.2.6 Giao diện trang luyện tập
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 29 Giao diện trang luyện tập
4.2.7 Giao diện trang tạo/tham gia đội thi
Giao diện trang tạo đội thi:
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 30 Giao diện trang tạo đội thi
Giao diện trang tham gia đội thi:
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 31 Giao diện trang tham gia đội thi
4.2.8 Giao diện trang thi đấu
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 32 Giao diện trang thi đấu
4.2.9 Giao diện trang nộp cờ
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 33 Giao diện trang nộp cờ
4.2.10 Giao diện trang bảng xếp hạng
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 34 Giao diện trang bảng xếp hạng
4.2.11 Giao diện trang người dùng
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 35 Giao diện trang người dùng
4.2.12 Giao diện trang thông tin đội thi
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 36 Giao diện trang thông tin đội thi
4.2.13 Giao diện trang quản trị viên
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 37 Giao diện trang quản trị viên
4.2.14 Giao diện trang cài đặt
Hình XÂY DỰNG CHƯƠNG TRÌNH VÀ KIỂM THỬ 38 Giao diện trang cài đặt
Kiểm thử và đánh giá
Việc thiết kế website đã hoàn tất với các giao diện quan trọng như trang chủ, trang đăng nhập/đăng ký, trang luật thi, trang danh sách người dùng, trang danh sách đội thi và trang luyện tập.
- Có kết nối với cở sở dữ liệu để quản lí thông tin các sản phẩm.
Website đã được hoàn thiện cơ bản trong lần kiểm thử này Các bước kiểm thử tiếp theo sẽ tập trung vào việc bổ sung các chức năng quan trọng, nhằm nâng cao trải nghiệm người dùng và giúp quản trị viên quản lý mối liên kết với người dùng hiệu quả hơn.
Website cung cấp đầy đủ các tính năng cần thiết cho việc luyện tập và thi đấu CTF, bao gồm đăng nhập/đăng ký, tạo và tham gia đội thi, cũng như các hoạt động luyện tập và thi đấu.