TỔNG QUAN
Lý do chọn đề tài
Trong bối cảnh cuộc sống hiện đại, ngành công nghệ thông tin đang phát triển nhanh chóng với nhiều công nghệ và ứng dụng mới ra đời mỗi ngày Một trong những ứng dụng phổ biến nhất là trang web, đặc biệt là trang web bán hàng Các doanh nghiệp hiện nay, từ lớn đến nhỏ, đều chú trọng phát triển website để cung cấp thông tin và hỗ trợ người dùng nắm bắt thị trường trong và ngoài nước Để xây dựng một trang web, có nhiều ngôn ngữ lập trình như Java, PHP, và C# Nhóm chúng tôi đã được giới thiệu và thực hành với nhiều ngôn ngữ khác nhau trong quá trình học tập Trong đề tài này, chúng tôi sẽ sử dụng NestJs và NextJs, hai công nghệ đang ngày càng được ưa chuộng trong lĩnh vực lập trình web Việc áp dụng NestJs và NextJs vào phát triển website tin tức trực tuyến sẽ mang lại trải nghiệm tiện lợi, giúp người dùng cập nhật thông tin mọi lúc mọi nơi chỉ với vài thao tác đơn giản.
Mục đích, nhiệm vụ của đề tài
1.2.1 Mục đích Đề tài tập trung nghiên cứu ứng dụng NestJs, NextJs và sự ảnh hưởng đến sự phát triển của ngành lập trình web hiện nay Hơn nữa việc nghiên cứu về nó sẽ giúp nhóm em hiểu rõ hơn về ngôn ngữ lập trình mà nhóm đã chọn
Tìm hiểu NestJs và NextJS
Tuân thủ nghiệp vụ của một lập trình viên: Giải quyết vấn đề, tiếp nhận ý kiến khách hàng, làm việc nhóm, code có chú thích
Phát triển ứng dụng web với các chức năng chính bao gồm hiển thị tin tức, cho phép người dùng xem chi tiết từng bài viết, đăng nhập và đăng xuất, cũng như tạo bài viết mới.
Trong quá trình thực hiện dự án, nhóm em đã nghiên cứu nhiều tài liệu tiếng Anh và tiếng Việt về công nghệ đã chọn, tìm hiểu cách thức hoạt động của nó Sau khi thu thập thông tin, nhóm tiến hành viết mã theo các bước đã định, áp dụng kiến thức vào thực tế để phát triển một sản phẩm website cho phép người dùng xem tin tức trực tuyến một cách hoàn thiện.
Một trang web xem tin tức trực tuyến sử dụng NestJs và NextJs
Hình 1.1 Trang web xem tin tức trực tuyến
Sử dụng NextJS, một framework của ReactJS, để phát triển các giao diện tương tác với người dùng, bao gồm trang chủ, trang chi tiết bài viết, trang danh sách bài viết theo danh mục, trang đăng nhập và đăng ký, cùng với trang thêm bài viết mới.
Back end: Sử dụng Framwork của NodeJS là NestJs.
CƠ SỞ LÝ THUYẾT
Giới thiệu về ReactJS
Reactjs, được phát triển bởi Jordan Walke, một kỹ sư phần mềm của Facebook, lần đầu tiên được triển khai trên newsfeed của Facebook vào năm 2011 và sau đó được sử dụng trên Instagram.com vào năm 2012.
- Là một library Javascript để xây dựng giao diện người dùng (UI) giành riêng cho các trang Single Page Application (SPA)
React là một thư viện JavaScript mạnh mẽ cho phép các nhà phát triển xây dựng ứng dụng web lớn với khả năng thay đổi dữ liệu mà không cần tải lại trang Mục tiêu chính của React là cung cấp hiệu suất nhanh, khả năng mở rộng và sự đơn giản trong việc phát triển giao diện người dùng Nó hoạt động chủ yếu trên phần giao diện của ứng dụng, phù hợp với mô hình MVC, và có thể kết hợp với các thư viện hoặc framework JavaScript khác như Angular JS.
2.1.2 Các tính năng của ReactJS
Trong React, JSX là cú pháp được sử dụng thay cho JavaScript thông thường để tạo khuôn mẫu, cho phép trích dẫn HTML và hiển thị các thành phần con Cú pháp HTML này được chuyển đổi thành các lệnh gọi JavaScript trong React Framework, mặc dù bạn cũng có thể viết mã bằng JavaScript thuần túy.
React Native là một thư viện do Facebook phát hành vào năm 2015, cung cấp kiến trúc phản ứng cho việc phát triển ứng dụng gốc trên các nền tảng như iOS, Android và UPD.
Virtual Document Object Model (VDOM) trong React giúp tạo bộ đệm cấu trúc dữ liệu trong bộ nhớ để theo dõi các thay đổi và cập nhật trình duyệt hiệu quả Tính năng này cho phép lập trình viên phát triển ứng dụng như thể toàn bộ trang được tái tạo cho mỗi thay đổi, trong khi thư viện React chỉ hiển thị các thành phần thực sự có sự thay đổi.
Hình 2.1 Mô tả Virtual DOM trong ReactJs 2.1.3 Tại sao nên sử dụng ReactJS?
- Render phía Server giúp cải thiện việc tải trang và tối ưu trong SEO
ReactJS nổi bật với tính đơn giản, cho phép người dùng nhanh chóng nắm bắt và làm quen với nó Cách tiếp cận dựa trên thành phần và vòng đời rõ ràng, cùng với việc sử dụng JavaScript cơ bản, giúp xây dựng các trang web và ứng dụng di động chuyên nghiệp trở nên dễ dàng hơn Đặc biệt, React sử dụng cú pháp JSX, cho phép kết hợp HTML với JavaScript, mặc dù không bắt buộc, nhưng JSX mang lại trải nghiệm lập trình thuận tiện hơn cho các nhà phát triển.
React dễ học hơn so với Angular và Ember, vì bất kỳ ai có kiến thức cơ bản về lập trình đều có thể nhanh chóng hiểu được Chỉ cần nắm vững các khái niệm cơ bản về CSS và HTML, bạn đã có thể bắt đầu với Reactjs.
Ràng buộc dữ liệu trong React kết hợp với Redux giúp kiểm soát luồng dữ liệu đến các thành phần qua bộ điều phối Điều này làm cho việc gỡ lỗi các thành phần độc lập trong các ứng dụng ReactJS lớn trở nên dễ dàng hơn.
ReactJS applications are exceptionally easy to test due to their architecture React views can be treated as stateful functions, allowing developers to manipulate the state passed to these views, observe the output, and monitor triggered actions and events efficiently.
Giới thiệu về NextJS
- Là một framework nhỏ gọn giúp xây dựng ứng dụng Single Page App - Server Side Rendering với ReactJs một cách dễ dàng
2.2.2 Tại sao sử dụng NextJS?
- Server Rendering: Với Next.js, việc hiển thị máy chủ các ứng dụng React chưa bao giờ dễ dàng hơn, bất kể dữ liệu đến từ đâu
- Static Exporting: Không cần phải học một framework mới Xuất một trang web tĩnh với Next.js dễ dàng như một lệnh đơn
- CSS in JS: Next.js đi kèm với style-jsx đi kèm, nhưng nó cũng hoạt động với mọi giải pháp CSS-in-JS
- Zero setup: Tự động tách mã, định tuyến dựa trên hệ thống tập tin, tải lại mã nóng và kết xuất phổ quát
- Fully extensible: Hoàn toàn kiểm soát Babel và Webpack Máy chủ có thể tùy chỉnh, định tuyến và các plugin tiếp theo
- Ready for production: Tối ưu hóa cho kích thước xây dựng nhỏ hơn, biên dịch dev nhanh hơn và hàng tá cải tiến khác
- Hot code reloading: Sẽ tự động tải trang khi phát hiện bất cứ thay đổi nào
- Automatic Routing: Các file, URL được đưa vào hệ thống trong thư mục pages sẽ được tự động map với project mà không cần thêm bất kỳ config nào
- Ecosystem Compatibility: Hoạt động tốt với hệ sinh thái của Javascript , Nodejs,
- Dynamic Components: Có thể import các modules và React Component một cách linh hoạt.
Giới thiệu về NodeJS
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine, utilizing an event-driven, non-blocking I/O model that makes it lightweight and efficient.
- V8 engine là một JavaScript engine mã nguồn mở chạy trên các trình duyệt Chrome, Opera và Vivaldi
- Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ
- Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao
- Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực
Node.js là lựa chọn lý tưởng cho các sản phẩm có lượng truy cập lớn, yêu cầu khả năng mở rộng nhanh chóng và cần đổi mới công nghệ Nó cũng rất phù hợp để phát triển các dự án Startup một cách nhanh nhất có thể.
2.3.2 Những ứng dụng viết bằng NodeJS
- Websocket server: Các máy chủ web socket như là Online Chat, Game Server…
- Fast File Upload Client: là các chương trình upload file tốc độ cao
- Ad Server: Các máy chủ quảng cáo
- Cloud Services: Các dịch vụ đám mây
- RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác thông qua API
Real-time data applications require high-speed performance, making them ideal for microservices architecture The microservices concept involves breaking down a large application into smaller, interconnected services, which Node.js excels at facilitating.
Các ứng dụng Node.js được phát triển bằng JavaScript, một ngôn ngữ lập trình phổ biến Theo Ryan Dahl, người sáng lập JavaScript, ngôn ngữ này có những đặc điểm nổi bật, khác biệt so với các ngôn ngữ lập trình động khác, đặc biệt là việc không hỗ trợ đa luồng mà chỉ hoạt động theo cơ chế đơn luồng và hướng sự kiện.
- Nodejs chạy đa nền tảng phía Server, sử dụng kiến trúc hướng sự kiện Event- driven, cơ chế non-blocking I/O làm cho nó nhẹ và hiệu quả
Node.js applications can be run on any operating system, including Mac, Windows, and Linux, making it highly versatile Additionally, the Node.js community is vast and entirely free to access You can explore the extensive range of free packages available at https://www.npmjs.com/.
- Các ứng dụng NodeJS đáp ứng tốt thời gian thực và chạy đa nền tảng, đa thiết bị.
Giới thiệu về Framework NestJs
- NestJS là một framework Node.js mã nguồn mở, có thể mở rộng, linh hoạt, tiến bộ để xây dựng ứng dụng phía server
- Về performance: NestJS cung cấp thêm về các tính năng (feature) để dev lập trình tốt hơn Chứ không làm giảm tốc độ của NestJS
- NestJS sử dụng TypeScript và rất linh hoạt để xây dựng các hệ thống phụ trợ hấp dẫn và đòi hỏi nhiều yêu cầu
- Các ưu điểm khi sử dụng NestJS framework:
Thúc đẩy TypeScript phát triển
Cài đặt đơn giản, dễ sử dụng, không mất nhiều thời gian làm quen
Nguồn tài liệu đa dạng, phong phú và chi tiết và được duy trì tốt
Hỗ trợ mạnh về REST API
Hình 2.2 Cấu trúc NestJS Cấu trúc của NestJS:
Các module trong NestJS được sử dụng để tổ chức mã nguồn và chia nhỏ các tính năng thành các đơn vị có thể tái sử dụng Các tệp TypeScript được nhóm lại thông qua Decorator “@Module”, cung cấp siêu dữ liệu cần thiết cho NestJS Điều này giúp xác định các thành phần, bộ điều khiển và tài nguyên khác, từ đó sắp xếp cấu trúc ứng dụng một cách khoa học và hiệu quả.
Providers là một thành phần quan trọng trong NestJS, đóng vai trò như dịch vụ xử lý các tác vụ phức tạp và logic mà Controllers không thể thực hiện Chúng có thể được tạo ra và tích hợp vào các Controllers hoặc Providers khác, giúp tối ưu hóa quy trình xử lý trong ứng dụng.
Controllers đóng vai trò quan trọng trong việc xử lý các yêu cầu từ client-side, đảm bảo phản hồi chính xác và phù hợp sau khi nhận được yêu cầu HTTP Mỗi Controller được thiết kế với một bộ lộ trình riêng, giúp thực hiện hiệu quả các tác vụ khác nhau.
- Router trong NestJS Framwork là một bộ định tuyến giúp cho chúng ta định danh ra các url và hành động kèm theo nó
- VD: Ta định danh url có param lien-he.html thì thực hiện hành động trả về view liên hệ
- Cú pháp của router: app.method(path, handle);
app: là biến mà khi khởi tạo NestJS Framework
Method: là một trong các dạng http method sau: get,post,put,delete,head,path
path: là thành phần phía sau domain mà chúng ta muốn xác định
The handle function is executed when a specific path is called It serves as a callback function, where 'req' contains all the request parameters sent by the user, and 'res' holds all the response parameters returned by the server to the client.
NestJS hoạt động thông qua một chuỗi các hàm Middleware được thực hiện liên tiếp Khi người dùng gửi yêu cầu đến NestJS, các yêu cầu này sẽ lần lượt đi qua các hàm Middleware cho đến khi nhận được phản hồi Mỗi hàm Middleware có quyền truy cập vào các đối tượng đại diện cho yêu cầu (req), phản hồi (res), hàm Middleware tiếp theo (next) và đối tượng lỗi (err) nếu cần thiết.
Một hàm Middleware, sau khi hoàn thành công việc của mình, cần gọi lệnh next() nếu không phải là hàm cuối cùng trong chuỗi các hàm cần thực hiện Nếu không thực hiện lệnh này, hàm sẽ bị treo và không tiếp tục xử lý các hàm tiếp theo.
- Các chức năng mà middleware có thể thực hiện trong NestJS sẽ bao gồm :
Thực hiện bất cứ đoạn code nào
Thay đổi các đối tượng request và response
Kết thúc một quá trình request-response
Gọi hàm middleware tiếp theo trong stack
- Trong NestJS, có 5 kiểu middleware có thể sử dụng :
Application-level middleware (middleware cấp ứng dụng)
Router-level middleware (middlware cấp điều hướng – router)
Error-handling middleware (middleware xử lý lỗi)
Built-in middleware (middleware sẵn có)
Third-party middleware (middleware của bên thứ ba)
Giới thiệu về MySQL
2.5.1 Giới thiệu về cơ sở dữ liệu SQL
- SQL là viết tắt của Structured Query Language – ngôn ngữ truy vấn mang tính cấu trúc
- Nó được thiết kế để quản lý dữ liệu trong một hệ thống quản lý cơ sở dữ liệu quan hệ (RDBMS)
- SQL là ngôn ngữ cơ sở dữ liệu, được dùng để tạo, xóa, lấy các hàng và sửa đổi các hàng
- Ưu điểm: SQL sẽ giúp quản lý hiệu quả và truy vấn thông tin nhanh hơn, giúp bảo trì, bảo mật thông tin dễ dàng hơn
Giao diện của nhiều chương trình cơ sở dữ liệu SQL thường khó sử dụng, khiến người dùng gặp khó khăn trong việc thao tác Người dùng không có toàn quyền kiểm soát và phải đối mặt với các phần mở rộng độc quyền từ nhà cung cấp, bên cạnh các tiêu chuẩn SQL thông thường Hơn nữa, chi phí vận hành cao của một số phiên bản SQL cũng là rào cản lớn đối với nhiều lập trình viên trong việc tiếp cận và sử dụng.
- MySQL là hệ quản trị cơ sở dữ liệu mã nguồn mở được tích hợp sử dụng chung với apache, PHP nên nó phổ biến nhất thế giới
MySQL là phần mềm quản trị cơ sở dữ liệu (CSDL) dạng server-based, cho phép quản lý dữ liệu qua nhiều CSDL khác nhau Mỗi CSDL có thể chứa nhiều bảng quan hệ với dữ liệu phong phú Hệ thống này cung cấp cơ chế phân quyền người sử dụng, cho phép mỗi người dùng quản lý một hoặc nhiều CSDL, với tên truy cập (user name) và mật khẩu tương ứng để truy xuất dữ liệu.
MySQL là một hệ quản trị cơ sở dữ liệu ổn định, dễ sử dụng và có tính khả chuyển, cho phép hoạt động trên nhiều hệ điều hành Nó cung cấp một bộ hàm tiện ích phong phú và mạnh mẽ, giúp người dùng quản lý dữ liệu hiệu quả.
MySQL tối ưu hóa hiệu suất và tiết kiệm chi phí thông qua việc thiết lập các tiêu chuẩn, từ đó tăng tốc độ thực thi một cách nhanh chóng.
MySQL sở hữu sức mạnh và khả năng mở rộng ấn tượng, cho phép xử lý một lượng lớn dữ liệu một cách hiệu quả Hơn nữa, hệ thống này có thể mở rộng linh hoạt để đáp ứng nhu cầu phát triển trong tương lai.
MySQL là hệ quản trị cơ sở dữ liệu quan hệ đa tính năng, hỗ trợ nhiều chức năng SQL mong đợi, cả gián tiếp lẫn trực tiếp.
Độ bảo mật cao của hệ thống hiện nay rất phù hợp cho các ứng dụng truy cập cơ sở dữ liệu qua Internet, nhờ vào nhiều tính năng bảo mật tiên tiến và đạt tiêu chuẩn cao.
MySQL là một cơ sở dữ liệu dễ sử dụng, ổn định và nhanh chóng, hoạt động trên nhiều hệ điều hành khác nhau Nó cung cấp một hệ thống phong phú với nhiều hàm tiện ích mạnh mẽ.
Dung lượng hạn chế có thể gây khó khăn trong việc truy xuất dữ liệu khi số lượng bản ghi ngày càng tăng.
Độ tin cậy của MySQL có thể bị ảnh hưởng do cách thức xử lý các chức năng cụ thể như kiểm toán, giao dịch và tài liệu tham khảo, khiến nó kém tin cậy hơn so với một số hệ quản trị cơ sở dữ liệu quan hệ khác.
MySQL được thiết kế với những giới hạn nhất định, không nhằm mục đích thực hiện toàn bộ các chức năng mà một số ứng dụng có thể yêu cầu, dẫn đến những hạn chế trong khả năng sử dụng.
- Một số trường hợp ứng dụng MySQL:
Khi website của chúng ta có tính chất INSERT cao, bởi vì mặc định MySQL có sẵn cơ chế ghi với tốc độ cao và an toàn
Khi website hoạt động theo dạng real-time, nhiều người có thể tương tác với ứng dụng cùng một lúc, như trong các ứng dụng chat hoặc livestream.
Khi làm việc với website có lượng dữ liệu lớn, chẳng hạn như ứng dụng web chứa đến 10 triệu bản ghi, việc truy vấn với MySQL có thể gặp khó khăn Tuy nhiên, MySQL lại nổi bật với khả năng tìm kiếm thông tin liên quan một cách nhanh chóng, do đó, trong tình huống này, việc sử dụng MySQL là một lựa chọn hợp lý.
KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
Khảo sát hiện trạng
Ngày nay, sự phát triển mạnh mẽ của công nghệ thông tin và ứng dụng của nó trong đời sống đã nâng cao nhu cầu trao đổi tin tức của con người về cả số lượng lẫn chất lượng Các công ty công nghệ hàng đầu thế giới đang đầu tư vào giải pháp và sản phẩm thương mại hóa trên internet, cho thấy tầm quan trọng của thương mại điện tử Với những thao tác đơn giản trên máy tính có kết nối internet, khách hàng có thể dễ dàng truy cập tin tức trực tuyến mà không tốn nhiều thời gian Để thúc đẩy sự phổ biến của việc xem tin tức online tại Việt Nam và thế giới, nhóm chúng tôi đã phát triển "Website xem tin tức trực tuyến" Mặc dù công ty có bộ phận bảo trì website chuyên nghiệp, vẫn tồn tại một số rủi ro có thể ảnh hưởng đến hoạt động của website này.
● Rủi ro về hệ thống máy chủ server, tên miền
● Các lỗi về bảo mật web bị kẻ xấu trục lợi
● Lưu lượng người truy cập trong một thời điểm làm cho máy chủ bị tê liệt.
● Database thiếu đồng bộ dẫn đến tràn dữ liệu
● Chi phí duy trì tên miền và hệ thống
Để đối phó với các rủi ro đã nêu, bộ phận bảo trì website đã nhận thức được mức độ nguy hiểm và đã triển khai một số biện pháp nhằm phòng ngừa và giảm thiểu tác động tiêu cực đến trang web.
Tăng kinh phí cho việc bảo trì
Đăng kí các tên miền có độ bảo mật cao
Nhập server có tốc độ xử lý cao từ nước ngoài
Luôn tìm kiếm nguồn nhân lực chất lượng cao từ bên ngoài
Tiến hành hợp tác với nhiều công ty uy tín trong lĩnh vực đọc xem tin tức online trực tuyến
Website của chúng tôi cam kết cập nhật bài viết mới hàng ngày và hàng tuần, nhằm cung cấp thông tin mới nhất cho người dùng Chúng tôi cũng thường xuyên cập nhật các công cụ đo hashtag theo quý để nắm bắt xu hướng và nhu cầu mới nhất, từ đó tối ưu hóa chiến lược SEO marketing, thu hút người dùng từ nhiều nền tảng mạng xã hội.
Các quy định của nhà nước về website tin tức yêu cầu tuân thủ nghiêm ngặt quy trình phát triển, đăng ký các chứng chỉ cần thiết và đảm bảo bản quyền hình ảnh cũng như video được sử dụng trên website.
Tiếp theo, nhóm chúng em sẽ tiến hành khảo sát ba website xem tin tức phổ biến nhất Việt Nam được nhiều người sử dụng nhất hiện nay
Website VnExpress bao gồm trang chủ và nhiều danh mục con, cung cấp thông tin đa dạng Ngoài ra, trang còn có slide hiển thị các khuyến mãi, banner quảng cáo cho các sự kiện, và khung tìm kiếm bài viết theo danh mục.
Website Zingnews có giao diện thân thiện và dễ sử dụng, bao gồm trang chủ và nhiều danh mục con Ngoài ra, trang còn có slide hiển thị các khuyến mãi, banner quảng cáo sự kiện và khung tìm kiếm bài viết theo danh mục.
Website kenh14.vn mang đến cho người dùng nhiều bài viết thú vị, bao gồm trang chủ và các danh mục con đa dạng Ngoài ra, trang còn có các slide khuyến mãi, banner quảng cáo sự kiện và khung tìm kiếm bài viết theo danh mục.
Người dùng mong muốn một trang web ổn định, không giật lag, dễ sử dụng và thân thiện, với ít quảng cáo và bảo mật thông tin cá nhân Họ cũng cần tính năng đăng ký thành viên và cập nhật thông tin nóng hổi Về phía công ty, cần đảm bảo hệ thống hoạt động liên tục và cập nhật nội dung thường xuyên Để xây dựng một trang web tin tức trực tuyến hiệu quả, cần giải quyết nhiều vấn đề liên quan đến trải nghiệm người dùng và hiệu suất hệ thống.
Vấn đề bản quyền hình ảnh và video đang trở thành nỗi lo lắng lớn đối với các nghệ sĩ và cộng đồng, khiến việc tìm kiếm nguồn bài viết "sạch" để đăng lên website trở nên khó khăn hơn bao giờ hết.
Nội dung hấp dẫn là yếu tố then chốt của một website tin tức, vì mục đích chính của nó là cung cấp thông tin cho người đọc Nếu tin tức không chất lượng, website sẽ khó có thể giữ chân khách hàng lâu dài.
Chi phí vận hành là yếu tố quan trọng, vì khối lượng bài viết lớn đòi hỏi một nơi lưu trữ quản lý tiết kiệm Việc duy trì website trong thời gian dài trở nên khó khăn nếu không có nguồn vốn mạnh.
Các chức năng của website không chỉ dừng lại ở việc đọc báo và xem tin tức, mà còn nên khuyến khích người dùng sáng tạo và chia sẻ thông qua tính năng thêm bài viết mới Điều này không chỉ giúp biến người dùng thành những cây viết tài năng mà còn tạo sự hứng thú và thu hút hơn cho cộng đồng người dùng.
Chiến thuật SEO Marketing đóng vai trò quan trọng trong việc duy trì lượng truy cập ổn định cho website Để đạt được điều này, cần xây dựng và phát triển chiến lược SEO từ đầu, giúp website thu hút người dùng liên tục và tạo ra doanh thu bền vững từ quảng cáo cho chủ sở hữu.
Khách hàng thường có nhu cầu đóng góp ý kiến nhưng không muốn trực tiếp giao tiếp, dẫn đến khó khăn khi cửa hàng không cung cấp hòm thư góp ý.
Quản lý, thống kê: Hệ thống quản lý thống kê cần được đầu tư với chi phí cũng như về mặt con người lớn
Những vấn đề trên là nguyên nhân cản trở đến việc tạo dựng một trang web đọc báo trực tuyến hiện nay
Kết luận, hầu hết các trang web đọc báo hiện nay đều có chức năng tương tự, nhưng để đáp ứng nhu cầu của khách hàng và thị trường, việc cung cấp thông tin chính thống và hấp dẫn là một thách thức không phải trang web nào cũng làm được Bên cạnh đó, giao diện dễ sử dụng và thao tác sẽ thu hút khách hàng hơn, điều này quyết định sự thành công lâu dài của một website đọc báo online.
Xác định yêu cầu
Hình 3.4 Lược đồ Use Case
3.2.2 Mô tả chức năng, kịch bản
Bảng 3.1 Mô tả quản lý người dùng
Name Quản lý người dùng
Brief description Quản lý truy cập trang quản lý người dùng
Post-conditions Quản lý tiến hành xem xét thông tin người dùng Nếu không có sự sai xót trong nhập liệu, quản lý thoát ra màn hình chính
Nếu có sai xót, quản lý tiến hành sửa đổi trên form quản lý người dùng
Basic flow Use case bắt đầu khi quản lý bấm vào nút quản lý người dùng
1 Hệ thống hiển thị trang quản lý người dùng cho quản lý
2 Quản lý xem xét thông tin của người dùng
3 Quản lý sau khi xem thoát ra màn hình chính
Alternative flow Nếu quản lý xem xét thấy thông tin người dùng bị sai lệch hoặc không hợp lý, những công việc sau sẽ được thực hiện
1 Tiến hành sửa đổi trực tiếp trên form người dùng
2 Quản lý xem xét lại thông tin và tiến hành lưu
3 Thoát ra màn hình chính
Bảng 3.2 Mô tả quản lý nhân viên
Name Quản lý nhân viên
Brief description Admin truy cập trang quản lý nhân viên
Post-conditions Admin tiến hành xem xét thông tin nhân viên Nếu không có sự sai xót trong nhập liệu, thoát ra màn hình chính
Nếu có sai xót, Admin tiến hành sửa đổi trên form quản lý người dùng
Basic flow Use case bắt đầu khi Admin bấm vào nút quản lý nhân viên
1 Hệ thống hiển thị trang quản lý nhân viên cho Admin
2 Admin xem xét thông tin của nhân viên
3 Admin sau khi xem thoát ra màn hình chính
Alternative flow Nếu admin xem xét thấy thông tin nhân viên bị sai lệch hoặc không hợp lý, những công việc sau được thực hiện
1 Admin tiến hành sửa đổi trực tiếp trên form quản lý nhân viên
2 Admin xem xét lại thông tin và tiến hành lưu
3 Thoát ra màn hình chính
Bảng 3.3 Mô tả quản lý bài viết
Name Quản lý bài viết
Brief description Nhân viên truy cập trang quản lý bài viết
Post-conditions Nhân viên tiến hành xem xét thông tin sản phẩm Nếu không có sự sai xót trong nhập liệu, nhân viên thoát ra màn hình chính
Nếu có sai xót, nhân viên tiến hành sửa đổi trên form bài viết
Basic flow Use case bắt đầu khi nhân viên bấm vào nút quản lý bài viết
1 Hệ thống hiển thị trang quản lý bài viết cho nhân viên
2 Nhân viên xem xét thông tin của bài viết
3 Nhân viên sau khi xem thoát ra màn hình chính
Alternative flow Nếu nhân viên xem xét thấy thông tin bài viết bị sai lệch hoặc không hợp lý Những công việc sau thực hiện:
1 Nhân viên tiến hành sửa đổi trực tiếp trên form
2 Nhân viên xem xét lại thông tin và tiến hành lưu
3 Thoát ra màn hình chính
Bảng 3.4 Mô tả thêm người dùng
Brief description Nhân viên truy cập form Thêm người dùng
Post-conditions Nhân viên tiến hành lấy thông tin người dùng và thêm vào cơ sở dữ liệu
Basic flow Use case bắt đầu khi nhân viên bấm vào form Thêm người dùng
1 Hệ thống hiển thị trang thêm người dùng cho nhân viên tiến hành nhập thông tin
2 Hệ thống xem xét thông tin vừa nhập vào
3 Nhân viên tiến hành bấm lưu vào database
4 Thoát ra màn hình chính
Alternative flow Nếu nhân viên nhập ngày, tháng, năm sinh không hợp lệ
Những công việc sau sẽ thực hiện:
1 Hệ thống gửi form báo lỗi nhập thông tin bị sai lệch, yêu cầu nhân viên nhập lại
2 Nhân viên xem xét lại thông tin và tiến hành nhập lại
3 Nhân viên lưu lại thông tin
4 Bước 2,3,4 tại basic flow được gọi
Bảng 3.5 Mô tả thêm nhân viên
Brief description Admin truy cập form Thêm nhân viên
Sau khi tiếp nhận hồ sơ của các nhân viên mới đã được phỏng vấn, Admin sẽ tiến hành nhập thông tin nhân viên và lưu trữ vào cơ sở dữ liệu.
Basic flow Use case bắt đầu khi Admin bấm vào form Thêm nhân viên
1 Hệ thống hiển thị trang thêm nhân viên cho Admin tiến hành nhập thông tin
2 Hệ thống xem xét thông tin vừa nhập vào
3 Admin tiến hành bấm lưu vào database
4 Thoát ra màn hình chính
Alternative flow Nếu Admin nhập ngày, tháng, năm sinh không hợp lệ
Những công việc sau sẽ được thực hiện:
1 Hệ thống gửi form báo lỗi nhập thông tin bị sai lệch, yêu cầu Admin nhập lại
2 Admin xem xét lại thông tin và tiến hành nhập lại
3 Admin lưu lại thông tin
4 Bước 2,3,4 tại basic flow được gọi
Bảng 3.6 Mô tả thêm bài viết
Brief description Nhân viên truy cập form Thêm bài viết
Post-conditions Nhân viên sẽ nhập thông tin bài viết mới và lưu vào cơ sở dữ liệu
Basic flow Use case bắt đầu khi nhân viên bấm vào form Thêm bài viết
1 Hệ thống hiển thị trang thêm bài viết cho nhân viên tiến hành nhập thông tin
2 Hệ thống xem xét thông tin vừa nhập vào
3 Nhân viên tiến hành bấm lưu vào database
4 Thoát ra màn hình chính
Alternative flow Nếu nhân viên nhập thông tin bài viết bị trùng lặp Những công việc sau sẽ được thực hiện:
1 Hệ thống gửi lỗi nhập sai thông tin, yêu cầu nhân viên nhập lại
2 Nhân viên xem xét lại thông tin và tiến hành nhập lại
3 Nhân viên lưu lại thông tin
4 Bước 2,3,4 tại basic flow được gọi
Bảng 3.7 Mô tả đăng kí thành viên
Name Lập thẻ thành viên
Người dùng đăng ký thành viên
Post-conditions Nếu đăng ký thành công, người dùng sẽ được gửi email thông báo thành công
Nếu thất bại, người dùng phải đăng ký lại
Basic flow Use case bắt đầu khi người dùng click vào nút đăng ký
1 Hệ thống hiển thị trang đăng ký thành viên cho người dùng nhập thông tin
2 Hệ thống kiểm tra thông tin người dùng nhập
3 Hệ thống xác thực gửi link kích hoạt tài khoản đến email người dùng
4 Hệ thống hiển thị trang chờ phản hồi, cho phép người dùng có thể thay đổi email kích hoạt
5 Khi click vào link sẽ được đưa đến trang đăng nhập của hệ thống
Alternative flow Nếu người dùng nhập trùng username, email và sử dụng mật khẩ u quá yếu Những công việc sau được thực hiện:
1 Hệ thống mô tả lý do không tạo được tài khoản
2 Hệ thống lưu ý người dùng nhập lại
3 Nếu người dùng nhập thông tin hợp lệ, bước 3 ở Basic flow được thực hiện
Bảng 3.8 Mô tả cập nhật bài viết
Name Cập nhật bài viết
Description Quản lý cập nhật bài viết
Post- conditions Khi chọn một bài viết bất kỳ và chọn nút chỉnh sửa quản lý sẽ thực hiện chỉnh sửa trên form chỉnh sửa bài viết
Basic flow Use case bắt đầu khi quản lý click vào nút chỉnh sửa bài viết
1 Hệ thống hiển thị thông tin bài viết lên trên form chỉnh sửa bài viết
2 Quản lý tiến hành cập nhật bài viết
3 Thông tin bài viết mới được cập nhật dưới database và trả kết quả cho người quản lý
Bảng 3.9 Mô tả xóa bài viết
Brief description Quản lý tiến hành xóa bài viết
Post-conditions Những bài viết được xóa khỏi hệ thống bởi quản lý sẽ trực tiệp không hiển thị trên trang xem tin tức
Basic flow Use case quản lý tiến hành xóa bài viết:
1 Trên trang quản trị, quản trị viên tiến hành nhấp chọn vào nút xóa trên dòng bài viết ở tab bài viết
2 Tiến hành bấm nút confirm trong popup bạn có chắc chắn xóa bài viết hay không
3 Bài viết sẽ trực tiếp được xóa khỏi databasae và trả lại thông báo cho quản trị viên
Bảng 3.10 Mô tả cập nhật người dùng
Name Cập nhật thông tin người dùng
Brief description Nhân viên cập nhật thông tin người dùng
Nhân viên thực hiện việc cập nhật thông tin người dùng trên trang web Nếu thông tin không khớp với dữ liệu trong hệ thống, họ sẽ tiến hành điều chỉnh lại cho chính xác.
Basic flow Use case bắt đầu khi nhân viên nhấn vào nút cập nhật người dùng
1 Hệ thống hiển thị toàn bộ thông tin của người dùng
2 Nhân viên xem thật kĩ xem thông tin người dùng có sai hay không
Alternative flow Nếu thông tin không đúng như trên dữ liệu hệ thống:
1 Nhân viên bấm vào nút edit bên cạnh Usecase cập nhật người dùng
2 Nhân viên nhập thông tin lại
3 Nhân viên gửi thông tin về hệ thống
Bảng 3.11 Mô tả cập nhật thông tin nhân viên
Name Cập nhật thông tin nhân viên
Brief description Admin cập nhật thông tin nhân viên
Post-conditions Admin tiến hành cập nhật thông tin nhân viên, nếu thông tin không đúng như trên dữ liệu hệ thống thì cập nhật lại
Basic flow Use case bắt đầu khi admin nhấn vào nút cập nhật nhân viên
1 Hệ thống hiển thị toàn bộ thông tin của nhân viên
2 Admin xem thật kĩ xem thông tin nhân viên có sai hay không
3 Nếu sửa thành công thì thông tin nhân viên được cập nhật lại
Alternative flow 4 Nếu thông tin không đúng như trên dữ liệu hệ thống:
5 1 Nhân viên bấm vào nút edit bên cạnh Usecase cập nhật người dùng
6 2 Nhân viên nhập lại thông tin
Bảng 3.12 Mô tả quản lý danh mục bài viết
Name Quản lý danh mục bài viết
Brief description Nhân viên muốn quản lý danh mục bài viết
Post-conditions Nhân viên tiến hành quản lý danh mục bài viết bao gồm các tag name và số lượng lượt đọc theo thời gian
Basic flow Use case bắt đầu khi nhân viên bấm vào tab Danh mục bài viết
1 Hệ thống sẽ hiển thị thông tin lượt xem của từng danh mục bài viết dựa trên các thông tin thời gian mà người nhân viên nhập vào hoặc chọn hiển thị theo default hoặc từ trước tới nay
Bảng 3.13 Mô tả tăng danh mục bài viết
Name Tăng danh mục bài viết
Brief description Tăng danh mục bài viết
Post-conditions Khi bấm vào xem từng bài viết hệ thống sẽ tự động tăng lượt xem bài viết đó lên theo danh mục của bài viết đó
Basic flow Use case bắt đầu khi người dùng click vào một bài viết bất kỳ
1 Hệ thống tiến hành kiểm tra tagName của bài viết đó
2 Hệ thống tiến hành ngầm việc gọi api tăng lượt xem của bài viết đó lên và tăng lượt xem tổng của danh mục của bài viết lên
Bảng 3.14 Mô tả người dùng đăng nhập
Name Người dùng đăng nhập
Brief description Người dùng tiến hành đăng nhập
Khi người dùng đăng ký thành công tài khoản, họ sẽ tiến hành đăng nhập vào hệ thống để truy cập vào các chức năng của người dùng, bao gồm khả năng tạo bài viết.
Basic flow Use case bắt đầu khi người dùng click vào nút đăng nhập
1.Hệ thống hiển thị trang dăng nhập
2 Người dùng nhập các thông tin tên đăng nhập và mật khẩu
3 Hệ thống xác thực thông tin mà người dùng phản hồi về hệ thống
4 Hệ thống xác nhận người dùng đã đăng nhập thành công và trả accessToken
Alternative flow Nếu người dùng nhập sai thông tin cá nhân hoặc tài khoản paypal, bước 2 ở basic flow sẽ được gọi lại
Bảng 3.15 Mô tả người dùng lấy thông tin chi tiết
Name Người dùng lấy thông tin chi tiết
Brief description Người dùng lấy thông tin chi tiết
Post-conditions Sau khi đăng nhập thành công bằng tên đăng nhập và mật khẩu, hệ thống sẽ tự động lấy thông tin chi tiết người dùng
Basic flow Use case bắt đầu khi người dùng đăng nhập thành công và chuyển về trang chủ:
1.Hệ thống sẽ lấy token của người dùng về và hiển thị dưới localStorage và lấy thông tin chi tiết người dùng
2.Hiển thị thông tin chi tiết người dùng lên trang chủ của website ở phần Header
Bảng 3.16 Mô tả người dùng cập nhật thông tin
Name Người dùng cập nhật thông tin
Brief description Người dùng cập nhật lại thông tin cá nhân
Post-conditions Người dùng cập nhật thông tin cá nhân như địa chỉ, email, giới tính
Basic flow Use case bắt đầu khi người dùng nhấn vào cập nhật thông tin
1 Hệ thống hiển thị toàn bộ thông tin của sản phẩm
2 Người dùng cần nhập thông tin cần sửa đổi
3 Nếu sửa thành công thì thông tin được cập nhật lại
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Phân tích hệ thống
Bảng 4.1 Chức năng phía FrontEnd
STT Chức năng Mô tả
1 Xem danh sách bài viết
Khi vào trang chủ người dùng có thể xem tất cả các bài viết được chỉnh sửa giàn dựng theo một danh sách các bài viết
2 Xem danh sách các bài viết theo danh mục
Khi người dùng nhấp vào từng danh mục bài viết, họ sẽ được chuyển đến một trang hiển thị danh sách các bài viết liên quan đến danh mục đó.
3 Xem chi tiết bài viết
Cho phép người dùng có thể xem chi tiết nội dung từng bài viết khi thao tác click vào từng bài viết
Người dùng nhập thông tin vào thanh tìm kiếm để tìm kiếm bài viết
5 Đăng kí,đăng nhập thành viên
Cho phép người dùng đăng kí, đăng nhập tài khoản
Chức năng cho phép người dùng vào trang tạo bài viết và đăng lên để chờ quản lý xem xét duyệt
8 Quán lý bài viết Giao diện quản lý cho phép quản lý bài viết
9 Quản lý phê duyệt bài viết người dùng
Giao diện quản lý cho phép quản lý phê duyệt bài viết người dùng
Giao diện quản lý cho phép quản lý nhân viên
11 Quản lý danh mục bài viết
Giao diện quản lý cho phép quản lý danh mục bài viết
12 Thống kê danh mục bài viết
Giao diện quản lý cho phép thống kê danh mục bài viết theo ngày nhập vào
Chi tiết chức năng phía FrontEnd
Xem danh sách bài viết : Khi người dùng truy cập vào trang chủ hệ thống sẽ tự động lấy danh sách bài viết và hiển thị ở trang chủ
Khi người dùng chọn một bài viết trên trang, hệ thống sẽ xử lý thông tin mà người dùng gửi, lấy dữ liệu từ cơ sở dữ liệu và cung cấp cho người dùng Đầu ra sẽ bao gồm các thông tin như tên bài viết, mô tả, hình đại diện, nội dung và ngày đăng.
Khi người dùng chọn một danh mục bài viết, hệ thống sẽ truy xuất dữ liệu và cung cấp danh sách chi tiết các bài viết thuộc danh mục đó Đầu vào cho quá trình này là thông tin về danh mục mà người dùng yêu cầu.
Hệ thống xử lý yêu cầu từ khóa danh mục của người dùng, trực tiếp truy xuất dữ liệu và cung cấp mảng bài viết theo danh mục đã chọn Kết quả đầu ra là mảng dữ liệu bài viết tương ứng với danh mục mà người dùng yêu cầu.
Người dùng có thể xem chi tiết bài viết theo từ khóa yêu cầu, với đầu vào là thông tin tên bài viết mà họ đã gửi.
Hệ thống sẽ lấy dữ liệu chi tiết từ bài viết dưới đây và trả về cho người dùng Kết quả sẽ là một mảng chứa các thông tin chi tiết về bài viết được yêu cầu.
Để tiết kiệm thời gian khi tìm kiếm bài viết trên website, người dùng chỉ cần nhập tên bài viết vào ô tìm kiếm để nhanh chóng nhận được thông tin về sản phẩm mình muốn mua.
Khi người dùng nhập tên bài viết để tìm kiếm, hệ thống sẽ đối chiếu với dữ liệu trong cơ sở dữ liệu Nếu có kết quả trùng khớp, hệ thống sẽ trả về kết quả tìm kiếm cho người dùng; ngược lại, nếu không tìm thấy, hệ thống sẽ thông báo không có kết quả.
“Không tìm thấy kết quả” Đầu ra: Thông báo, kết quả từ hệ thống
Trên website, người dùng có thể thêm bài viết mới sau khi đăng nhập, với giao diện thiết kế riêng cho mỗi bài viết Chức năng này cho phép người dùng gửi thông tin như tên bài viết, hình đại diện và nội dung cho quản trị viên phê duyệt trước khi đăng lên trang.
Xử lý thông tin bài viết từ người dùng và xuất thông báo "Chờ được xét duyệt từ phía quản trị viên." Để đăng ký và đăng nhập thành viên, hệ thống sẽ hiển thị thông tin để người dùng nhập vào Đầu vào là thông tin người dùng cung cấp.
Hệ thống sẽ hiển thị một ô trống để người dùng nhập thông tin, sau đó trả về dữ liệu liên quan đến người dùng Kết quả đầu ra sẽ là thông tin chi tiết về người dùng.
Quản lý bài viết trên trang quản trị website cung cấp giao diện tiện lợi cho việc thêm, sửa, và xóa các bài viết, giúp người dùng dễ dàng quản lý nội dung hiệu quả.
Quản lý phê duyệt bài viết người dùng là một tính năng quan trọng trong hệ thống quản trị Sau khi người dùng thêm bài viết thành công, thông tin bài viết sẽ hiển thị trên trang quản trị viên và chờ được xét duyệt Quản trị viên có khả năng xem toàn bộ thông tin của bài viết, gán nhãn danh mục và thực hiện phê duyệt hoặc hủy phê duyệt bài viết một cách dễ dàng.
Quản lý nhân viên là một tính năng quan trọng, cho phép quản trị viên truy cập bảng danh sách tất cả tài khoản hiện có trên website Tại đây, quản trị viên có thể dễ dàng thêm, sửa, hoặc xóa người dùng thông qua giao diện quản lý nhân viên.
Quản lý danh mục bài viết trên trang người quản trị cho phép quản trị viên dễ dàng thêm, sửa, xóa và xem danh sách bài viết.
Thiết kế hệ thống
Hình 4.2 Admin bảo trì website
Hình 4.3 Admin thêm người dùng
Hình 4.4 Admin cập nhật người dùng
Hình 4.5 Admin xóa người dùng
Hình 4.6 Admin thêm nhân viên
Hình 4.7 Admin cập nhật nhân viên
Hình 4.8 Admin xóa nhân viên
Hình 4.9 Admin tìm bài viết
Hình 4.10 Admin thêm bài viết
Hình 4.11 Admin cập nhật bài viết
Hình 4.12 Admin xóa bài viết
Hình 4.13 Nhân viên thêm người dùng
Hình 4.14 Nhân viên cập nhật người dùng
Hình 4.15 Nhân viên xóa người dùng
Hình 4.16 Nhân viên tìm bài viết
Hình 4.17 Nhân viên thêm bài viết
Hình 4.18 Nhân viên cập nhật bài viết
Hình 4.19 Nhân viên xóa bài viết
Hình 4.20 Người dùng đăng ký thành viên
Hình 4.21 Người dùng tìm bài viết
Hình 4.22 Người dùng đăng nhập
Hình 4.23 Người dùng đăng xuất
Hình 4.24 Người dùng thêm bài viết
Thiết kế cơ sở dữ liệu
4.3.2 Lược đồ cơ sở dữ liệu
Bảng 4.3 Bảng dữ liệu Posts
Column Name Data Type Allow Nulls Unique
This article outlines a database schema consisting of various fields: an ID (primary key), name, image, description, title, content, tag ID, user ID, status, creation date, update date, and deletion date Each field plays a crucial role in organizing and managing data effectively.
Bảng 4.4 Bảng dữ liệu User
Column Name Data Type Allow Nulls Unique
_id (pk) String x email String x name String password String role String create_at Date x update_at Date x delete_at Date x facebook_account String x google_account String x
Bảng 4.5 Bảng dữ liệu Tags
Column Name Data Type Allow Nulls Unique
_id (pk) String x name String create_at Date update_at Date delete_at Date
Bảng 4.6 Bảng dữ liệu Statistical
Column Name Data Type Allow Nulls Unique
_id (pk) String x name String count String create_at Date update_at Date delete_at Date
Thiết kế giao diện
Hình 4.27 Giao diện trang đăng nhập Bảng 4.7 Mô tả giao diện trang đăng nhập
Stt Tên Kiểu Mô tả chi tiết
1 Email Input Nhập thông tin email
2 Password Input Nhập thông tin mật khẩu
3 Lưu thông tin đăng nhập
Checkbox Lưu thông tin email password vào localStorage để fill dữ liệu lên lần sau
4 Đăng Nhập Button Nhấn để đăng nhập
Hình 4.28 Giao diện trang quản lý Bảng 4.8 Mô tả giao diện trang quản lý
Stt Tên Kiểu Mô tả chi tiết
1 Người dùng Nhấn để hiển thị trang các thông tin người dùng
Nhấn để hiển thị trang các thông tin bài viết người dùng
3 Nhãn dán Nhấn để hiển thị trang các thông tin nhãn dán
4 Bài viết Nhấn để hiển thị trang các thông tin bài viết
5 Đăng xuất Nhấn để đăng xuất
Hình 4.29 Giao diện quản lý người dùng Bảng 4.9 Mô tả giao diện quản lý người dùng
Stt Tên Kiểu Mô tả chi tiết
1 Tên Cột hiển thị tên người dùng
2 Email Cột hiển thị email người dùng
3 Quyền Cột hiển thị quyền người dùng
4 Ô nhập tên Input Tên người dùng thêm mới
5 Ô nhập email Input Email người dùng thêm mới
Input Mật khẩu người dùng thêm mới
7 Thêm Button Thêm người dùng mới
8 Xóa Button Xóa người dùng
Hình 4.30 Giao diện quản lý bài viết người dùng Bảng 4.10 Mô tả giao diện quản lý bài viết người dùng
Stt Tên Kiểu Mô tả chi tiết
1 Tên bài viết Tên hiển thị của bài viết người dùng
2 Mô tả Mô tả bài viết người dùng
3 Nhãn dán Các danh mục bài viết của bài viết người dùng
4 Trạng thái Trạng thái của bài viết người dùng
5 Hình bài viết Hình đại diện của bài viết người dùng
Hình 4.31 Giao diện xem chi tiết bài viết người dùng Bảng 4.11 Mô tả giao diện xem chi tiết bài viết người dùng
Stt Tên Kiểu Mô tả chi tiết
1 Khung review bài viết người dùng
Màn hình review nội dung bài viết người dùng
2 Xem chi tiết Input Nút xem chi tiết nội dung bài viết người dùng
3 Xóa Input Xóa bài viết người dùng
4 Nút phê duyệt Input Phê duyệt hoặc hủy phê duyệt bài viết người dùng
5 Gắn nhãn Input Gắn nhãn danh mục cho bài viết người dùng
Hình 4.32 Giao diện quản lý thống kê danh mục bài viết Bảng 4.12 Mô tả giao diện quản lý quản lý thống kê danh mục bài viết
Stt Tên Kiểu Mô tả chi tiết
1 Biểu đồ Chart Biểu đồ thể hiện lượt xem theo từng danh mục bài viết
2 Chú thích Chú thích phân loại từng danh mục bài viết
Hình 4.33 Giao diện trang chủ
Bảng 4.13 Mô tả giao diện trang chủ
Stt Tên Kiểu Mô tả chi tiết
1 Logo Image Logo trang chủ, khi nhấp vào logo sẽ đi đến trang chủ
2 Đăng nhập Button Khi nhấp vào logo sẽ đi đến trang đăng nhập
3 Mới nhất Button Khi nhấp vào mới nhất sẽ đi đến trang có các bài viết mới nhất
4 Tìm kiếm Input Nhấn vào tên sản phẩm cần tìm kiếm
5 Trang chủ Khi nhấn vào tab này sẽ đi đến trang những bài viết ở trang chủ
6 Làm đẹp Khi nhấn vào tab này sẽ đi đến trang những bài viết theo danh mục làm đẹp
7 Đời sống Khi nhấn vào tab này sẽ đi đến trang những bài viết theo danh mục đời sống
8 Ẩm thực Khi nhấn vào tab này sẽ đi đến trang những bài viết theo danh mục ẩm thực
9 Du lịch Khi nhấn vào tab này sẽ đi đến trang những bài viết theo danh mục du lịch
10 Tử vi Khi nhấn vào tab này sẽ đi đến trang những bài viết theo danh mục tử vi
11 Thời trang Khi nhấn vào tab này sẽ đi đến trang những bài viết theo danh mục thời trang
12 Sức khỏe Khi nhấn vào tab này sẽ đi đến trang những bài viết theo danh mục sức khỏe
13 Khám phá Khi nhấn vào tab này sẽ đi đến trang những bài viết theo danh mục khám phá
14 Công nghệ Khi nhấn vào tab này sẽ đi đến trang những bài viết theo danh mục công nghệ
15 Bài viết Các bài viết mở đầu được hiển thị trên trang chủ
Hình 4.34 Giao diện trang chủ sau khi đăng nhập Bảng 4.14 Mô tả giao diện trang chủ sau khi đăng nhập
Stt Tên Kiểu Mô tả chi tiết
1 Tên người dùng Hiển thị tên người dùng
2 Thêm bài viết Button Nhấn vào để đi đến trang thêm bài viết người dùng
3 Đăng xuất Button Nhấn vào để đăng xuất
4 Back to top Button Nhấn vào để quay lên đầu trang
Hình 4.35 Giao diện trang đăng nhập
Bảng 4.15 Mô tả giao diện trang đăng nhập
Stt Tên Kiểu Mô tả chi tiết
1 Tên đăng nhập Input Ô nhập tên đăng nhập người dùng
2 Mật khẩu Input Ô nhập mật khẩu người dùng
3 Đăng nhập Button Nút đăng nhập
Button Nút đăng nhập bằng account facebook
5 Đăng nhập google Button Nút đăng nhập bằng account google
Hình 4.36 Giao diện trang thêm bài viết người dùng Bảng 4.16 Mô tả giao diện trang thêm bài viết người dùng
Stt Tên Kiểu Mô tả chi tiết
1 Tiêu đề bài viết Input Ô nhập tên tiêu đề bài viết
2 Hình đại diện bài viết
Input Ô nhập link hình đại diện
3 Mô tả bài viết Input Ô nhập mô tả bài viết
4 Khung nội dung bài viết
TextEditor Khung chỉnh sửa edit nội dung bài viết
5 Đăng bài viết Button Nút đăng bài viết
Hình 4.37 Trang bài viết theo danh mục
Bảng 4.17 Mô tả trang bài viết theo danh mục
Stt Tên Kiểu Mô tả chi tiết
1 Hình đại diện bài viết Image Hình đại diện của bài viết
2 Tên bài viết Tên mở đầu của bài viết
3 Ngày giờ đăng bài viết Thời gian tạo bài viết
4 Mô tả bài viết Mô tả bài viết
Hình 4.38 Trang chi tiết bài viết
Bảng 4.18 Mô tả chi tiết bài viết
Stt Tên Kiểu Mô tả chi tiết
1 Tên bài viết Thông tin tên mở đầu của bài viết
Thông tin thời gian tạo của bài viết
3 Tiêu đề bài viết Thông tin lời tiêu đề của bài viết
Thông tin nội dung của bài viết
5 Danh mục Thông tin danh mục của bài viết
Những bài viết cùng danh mục bài viết
7 Icon facebook Button Khi người dùng đọc một bài viết cảm thấy hay và muốn chia sẻ lên facebook thì nút này sẽ giúp người đọc làm điều đó
8 Quay lại trang danh sách bài
Button Quay lại trang danh sách bài viết theo danh mục bài viết viết theo danh mục
Button Khi nhấn vào nút này người dùng sẽ quay lại trang chủ của website
Hình 4.39 Trang hiển thị thông tin chi tiết bài viết (chân trang)
Bảng 4.19 Mô tả trang hiển thị thông tin chi tiết bài viết (chân trang)
Stt Tên Kiểu Mô tả chi tiết
1 Hashtag