Khóa luận tốt nghiệp xây dựng trang web thương mại điện tử xem tin tức

TỔNG QUAN

Lý do chọn đề tài

Hiện nay với một cuộc sống hiện đại, tất cả các ngành đều phát triển nhanh chóng. Đặc biệt là ngành công nghệ thông tin, mỗi ngày, mỗi tuần có biết bao nhiêu công nghệ mới, ứng dụng mới được nghiên cứu và phát triển để phục vụ con người Một trong những ứng dụng mà ai trong chúng ta cũng đã sử dụng qua đó là trang web Cụ thể, trong đề tài này là trang web bán hàng Với nhu cầu cập nhật tin tức ngày càng cao, ngày nay các doanh nghiệp lớn và nhỏ luôn có kế hoạch phát triển ra những website hỗ trợ những công cụ đăng tin tức giúp người dùng người đọc hiểu hơn về thị trường trong và ngoài nước hiện nay Để xây dựng một trang web thì có rất nhiều ngôn ngữ có thể làm được như: java, php, C# Và trong thời gian học tập tại trường, nhóm chúng em đã được các thầy, cô giới thiệu về các ngôn ngữ khác nhau và được thực hành về chúng. Ở đề tài này nhóm em sẽ sử dụng NestJs và NextJs, là những công nghệ đang được các công ty sử dụng nhiều và đang dần bùng nổ trong giới lập trình web. Ứng dụng NestJs và NextJS vào để tài wedsite xem tin tức trực tuyến sẽ giúp cho việc xem tin tức trực tuyến một cách tiện lợi và nhanh chóng, người dùng sẽ cập nhật tin tức trong và ngoài nước mọi lúc mọi nơi chỉ với vài thao tác đơn giản trên website.

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: Show tin tức, xem tin tức chi tiết từng bài viết, đăng nhập, đăng xuất và cho phép người dùng tạo bài viết mới.

Trong quá trình thực hiện, nhóm em đã nghiên cứu nhiều tài liệu tiếng anh cũng như tiếng việt ở trên mạng về công nghệ nhóm đã chọn, tìm hiểu về cách thức hoạt động Sau khi tìm hiểu và nghiên cứu về công nghệ trên, nhóm em tiến hành viết mã cho đề tài theo các bước, vận dụng vào thực tế để làm ra một sản phẩm website xem tin tức trực tuyến 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

Front end: Sử dụng Framwork của ReactJS là NextJS Các giao diện tương tác với người dùng như 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 đăng ký, 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 tạo ra bởi Jordan Walke, một kỹ sư phần mềm làm việc cho Facebook React lần đầu tiên được triển khai trên newsfeed Facebook vào năm 2011 và 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 cho phép các nhà phát triển tạo ra các ứng dụng web lớn có thể thay đổi dữ liệu mà không cần tải lại trang Mục đích chính của React là nhanh, có thể mở rộng và đơn giản Nó chỉ hoạt động trên giao diện người dùng trong ứng dụng Điều này tương ứng để xem trong mẫu MVC Nó có thể được sử dụng với sự kết hợp của các thư viện hoặc khung công tác JavaScript khác, chẳng hạn như Angular JS trong MVC.

2.1.2 Các tính năng của ReactJS

- JSX: Trong React, thay vì sử dụng JavaScript thông thường để tạo khuôn mẫu, nó sử dụng JSX JSX là JavaScript đơn giản cho phép trích dẫn HTML và sử dụng các cú pháp thẻ HTML này để hiển thị các thành phần con Cú pháp HTML được xử lý thành các lệnh gọi JavaScript của React Framework Cũng có thể viết bằng JavaScript cũ thuần túy.

- React Native: React có các thư viện riêng được Facebook công bố vào năm

2015, cung cấp kiến trúc phản ứng cho các ứng dụng gốc như IOS, Android và UPD.

- Virtual Document Object Model: React tạo bộ đệm cấu trúc dữ liệu trong bộ nhớ để tính toán các thay đổi được thực hiện và sau đó cập nhật trình duyệt Điều này cho phép một tính năng đặc biệt cho phép lập trình viên mã hóa như thể toàn bộ trang được hiển thị trên mỗi thay đổi trong đó thư viện phản ứng chỉ hiển thị các thành phần thự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.

- Tính đơn giản: ReactJS chỉ đơn giản là nắm bắt ngay lập tức Cách tiếp cận dựa trên thành phần, vòng đời được xác định rõ và sử dụng JavaScript đơn giản giúpReact rất đơn giản để tìm hiểu, xây dựng một web chuyên nghiệp (và các ứng dụng di động) và hỗ trợ nó React sử dụng một cú pháp đặc biệt gọi là JSX cho phép trộnHTML với JavaScript Đây không phải là một yêu cầu; Nhà phát triển vẫn có thể viết bằng JavaScript đơn giản nhưng JSX dễ sử dụng hơn nhiều.

- Dễ học: Bất cứ ai có kiến thức cơ bản trước đây về lập trình đều có thể dễ dàng hiểu React trong khi Angular và Ember được gọi là ’Ngôn ngữ cụ thể của miền, ngụ ý rằng rất khó để học chúng Để học Reactjs chỉ cần kiến thức cơ bản về CSS và HTML.

- Ràng buộc dữ liệu (Data Binding): React kết hợp với Redux để kiểm soát luồng dữ liệu đến các thành phần thông qua một điểm kiểm soát - bộ điều phối Việc gỡ lỗi các thành phần độc lập của các ứng dụng ReactJS lớn dễ dàng hơn.

- Khả năng kiểm tra (Test ability): Các ứng dụng ReactJS là siêu dễ dàng để kiểm tra Các khung nhìn React có thể được coi là các hàm của trạng thái, vì vậy có thể thao tác với trạng thái chúng ta chuyển sang dạng xem ReactJS và xem đầu ra (output) và các hành động ( triggered actions), sự kiện (events), functions.

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 ,

- 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 là một JavaScript runtime được build dựa trên Chrome’s V8 JavaScript engine Node.js sử dụng mô hình event-driven, non-blocking I/O khiến nó trở nên nhẹ và hiệu quả.

- 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.

- Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup 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.

- Any Real-time Data Application: bất kỳ một ứng dụng nào có yêu cầu về tốc độ thời gian thực Micro Services: Ý tưởng của micro services là chia nhỏ một ứng dụng lớn thành các dịch vụ nhỏ và kết nối chúng lại với nhau Nodejs có thể làm tốt điều này.

- Các ứng dụng Nodejs được viết bằng javascript, ngôn ngữ này là một ngôn ngữ khá thông dụng Theo tác giả của ngôn ngữ Javascript, Ryan Dahl: “Javascript có những đặc tính mà làm cho nó rất khác biệt so với các ngôn ngữ lập trình động còn lại, cụ thể là nó không có khái niệm về đa luồng, tất cả là đơ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ả.

- Có thể chạy ứng dụng Nodejs ở bất kỳ đâu trên máy Mac – Window – Linux, hơn nữa cộng đồng Nodejs rất lớn và hoàn toàn miễn phí Các bạn có thể thấy cộng đồng Nodejs lớn như thế nào tại đây, các package đều hoàn toàn free: 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:

- Modules: được sử dụng để tổ chức code và chia các tính năng thành các đơn vị có thể tái sử dụng hợp lý Các tệp TypeScript được nhóm bằng Decorator “@Module”.Decorator “@Module” cung cấp siêu dữ liệu cho NestJS giúp nó xác định các thành phần, bộ điều khiển hay những tài nguyên khác để sắp xếp cấu trúc ứng dụng khoa học,hiệu quả.

- Providers: Một thành phần không thể thiếu ở NestJS đó là Providers Nó tương tự như một dịch vụ giúp xử lý những tác vụ mang tính phức tạp, logic mà các trình xử lý Controller không thể làm được Providers có thể được tạo và đưa vào Controllers hoặc Providers khác.

- Controllers: Chức năng chính của Controllers là xử lý các yêu cầu gửi đến và đáp trả lại cho client-side Sau khi nhận được yêu cầu HTTP nó sẽ soạn thảo câu trả lời chính xác, phù hợp nhất để gửi đi Mỗi Controllers sẽ có bộ lộ trình riêng để giúp nó thực hiện tốt 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.

 Handle: là hành động sẽ thực thi khi danh path được gọi handle ở đây là callback function với req là biến chứa tất cả các thông số request mà người dùng gửi lên và res là biến chứa tất cả các thông số mà server trả về cho client.

- NestJS khi hoạt động, về cơ bản sẽ là một loạt các hàm Middleware được thực hiện liên tiếp nhau Sau khi đã thiết lập, các request từ phía người dùng khi gửi lên NestJS sẽ thực hiện lần lượt qua các hàm Middleware cho đến khi trả về response cho người dùng Các hàm này sẽ được quyền truy cập đến các đối tượng đại diện cho Request – req, Response – 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ạt động xong, nếu chưa phải là cuối cùng trong chuỗi các hàm cần thực hiện, sẽ cần gọi lệnh next() để chuyển sang hàm tiếp theo, bằng không xử lý sẽ bị treo tại hàm đó.

- 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.

- Nhược điểm: Giao diện khó sử dụng, không được toàn quyền kiểm soát, Hầu hết các chương trình cơ sở dữ liệu SQL đều có phần mở rộng độc quyền riêng của nhà cung cấp bên cạnh các tiêu chuẩn SQL., Chi phí vận hành của một số phiên bản SQL khiến một số lập trình viên gặp khó khăn khi tiếp cận.

- 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à một phần mềm quản trị CSDL dạng server-based quản lý dữ liệu thông qua các CSDL, mỗi CSDL có thể có nhiều bảng quan hệ chứa dữ liệu MySQL có cơ chế phân quyền người sử dụng riêng, mỗi người dùng có thể được quản lý một hoặc nhiều CSDL khác nhau, mỗi người dùng có một tên truy cập (user name) và mật khẩu tương ứng để truy xuất đến CSDL.

- MySQL ổn định và dễ sử dụng có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh.

 Nhanh chóng: Nhờ vào việc đưa ra một số những tiêu chuẩn và cho phép

MySQL làm việc hiệu quả cũng như tiết kiệm chi phí, giúp gia tăng tốc độ thực thi

 Mạnh mẽ và khả năng mở rộng: MySQL hoàn toàn có thể xử lý số lượng lớn dữ liệu và đặc biệt hơn thế nữa thì nó còn có thể mở rộng nếu như cần thiết.

 Đa tính năng: MySQL hiện đang hỗ trợ nhiều những chức năng SQL rất được mong chờ từ 1 hệ quản trị CSDL quan hệ cả gián tiếp cũng như trực tiếp.

 Độ bảo mật cao: iện tại nó đang rất thích hợp cho những ứng dụng truy cập CSDL thông qua internet khi sở hữu rất nhiều những tính năng về bảo mật và thậm chí là đang ở cấp cao

 Dễ dàng sử dụng: MySQL đang là cơ sở dữ liệu dễ sử dụng, ổn định, tốc độ cao và hoạt động trên rất nhiều những hệ điều hành đang cung cấp 1 hệ thống lớn những hàm tiện ích rất mạnh.

 Dung lượng hạn chế: Trong trường hợp nếu như số lượng bản ghi của bạn đang lớn dần lên thì khi đó quá trình truy xuất dữ liệu sẽ diễn ra vô cùng khó khăn.

 Độ tin cậy: Theo đó cách thức nhận chức năng cụ thể đang được xử lý cùng với MySQL (ví dụ như kiểm toán, những giao dịch, tài liệu tham khảo,…) khiến cho nó trở nên kém tin cậy hơn một số những hệ quản trị về cơ sở dữ liệu có quan hệ khác.

 Giới hạn: Theo thiết kế thì MySQL không có ý định thực hiện toàn bộ và nó đang đi kèm cùng với những hạn chế liên quan tới chức năng mà một số ứng dụng có thể cần tới.

-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 của chúng ta của ở dạng real-time nhiều, nghĩa là nhiều người cùng thao tác với ứng dụng trong thời gian thực Ví dụ như ứng dụng chat hay stream trực tuyến chẳng hạn.

 Với website có nhiều dữ liệu, giả sử ứng dụng web của chúng ta có đến 10 triệu bản ghi thì khá khó khăn để query được với Mysql Chọn MySQL vì MySQL có khả năng tìm kiếm thông tin liên quan cũng khá nhanh nên trường hợp này nên dùng nó.

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 với sự phát triển mạnh mẽ của công nghệ thông tin và những ứng dụng của nó trong đời sống Trong nền kinh tế hiện nay, với xu thế toàn cầu hóa nền kinh tế thế giới, mọi mặt của đời sống xã hội ngày càng được nâng cao, đặc biệt là nhu cầu trao đổi tin tức của con người ngày càng tăng cả về số lượng và chất lượng Hiện nay các công ty tin học hàng đầu thế giới không ngừng đầu tư và cải thiện các giải pháp cũng như các sản phẩm nhằm cho phép tiến hành thương mại hóa trên internet. Thông qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra tầm quan trọng và tính tất yếu của thương mại điện tử, với những thao tác đơn giản trên máy có nối mạng internet khách hàng sẽ trao đổi xem tin tức trực tuyến mà không quá mất nhiều thời gian Khách hàng chỉ cần click vào những gì họ cần, các nhà dịch vụ sẽ mang tới tận nhà Để tiếp cận và góp phần đẩy mạnh sự phổ biến của xem tin tức online của Việt Nam và thế giới, nhóm chúng em đã tìm hiểu và cài đặt “Website xem tin tức trực tuyến” với chức năng chính là xem tin tức online trực tuyến Về phía công ty đã có một bộ phân chuyên biệt bảo trì website khá lớn nhưng vẫn có một số rủi ro nhất định làm nguy hại tới website xem tin tức trực truyến như:

● 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

Với các rủi ro đã liệt kê ở trên, bộ phận bảo trì website đã nhìn nhận được sự nguy hiểm và đã có một số biện pháp để phòng tránh và giảm thiểu sự nguy hại cho trang web như:

 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.

Tiêu chí hoạt động của website là luôn cập nhật những bài viết mới hằng ngày, hằng tuần để đảm bảo thông tin cung cấp cho người dùng khách hàng là mới nhất Ngoài ra các công cụ đo hashtag cũng luôn được cập nhật theo quý để đảm bảo bắt kịp những xu hướng, nhu cầu mới nhất của người dùng, đảm bảo chiến thuật SEOmarketing để luôn đảm bảo kéo về lượng người dùng từ nhiều nền tảng mạng xã hội

Về các quy định của nhà nước về những website tin tức là đảm bảo tuân thủ nghiêm ngặt quy trình phát triển website, đăng kí các chứng chỉ cần thiết và bản quyền hình ảnh cũng như video được đă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 gồm có trang chủ và nhiều danh mục con Bên cạnh đó có slide về các khuyến mãi, banner quảng cáo về sự kiện, khung tìm bài viết bài viết theo danh mục,…

Website zingnews khá thân thiện và dễ sử dụng gồm có trang chủ và nhiều danh mục con Bên cạnh đó có slide về các khuyến mãi, banner quảng cáo về sự kiện, khung tìm bài viết bài viết theo danh mục,…

Website kenh14.vn cung cấp cho người dùng nhiều bài viết khá hay gồm có trang chủ và nhiều danh mục con Bên cạnh đó có slide về các khuyến mãi, banner quảng cáo về sự kiện, khung tìm bài viết bài viết theo danh mục,…

Phân tích yêu cầu người dùng: Về phía người dùng họ muốn có trang web ổn định, không giật lag, không nghẽn trong giờ cao điểm, dễ sử dụng, thân thiện với người dùng, ít quảng cáo chằng chịt, cho phép đăng kí thành viên và bảo mật quyền riêng tư và những thông tin bài viết đưa ra phải hot hit so với hiện nay để người dùng cập nhật thông tin Về phía công ty: Đảm bảo hệ thống hoạt động ổn định, cập nhật thông tin các bài viết được liên tục…. Để xây dựng một trang web xem tin tức trực tuyến cần giải quyết nhiều vấn đề:

Nguồn thông tin chính thống: Hiện nay vấn đề bản quyền hình ảnh, video là một vấn đề nhức nhói khiến các nhà làm nghệ thuật nói riêng và làm cộng đồng nói chung cảm thấy khó khăn Vậy nên kiếm được nguồn bài viết “Sạch” để đăng lên website không hề dễ một chút nào.

Bài viết phải có nội dung hay: Mục đích chính của website là xem tin tức.

Thế nên không có gì để bàn cãi là nếu tin tức không hay thì sẽ chẳng thể thu hút được khách hàng trong khoảng thời gian dài.

Chi phí vận hành: Bởi vì khối lượng bài viết là rất lớn nên ta cần một nơi lưu trữ quản lý với chi phí rẻ là điều tất yếu và gần như duy trì trong thời gian dài mà không có nguồn vốn mạnh cũng khó có thể duy trì website.

Các chức năng trong website: Ngoài chức năng chính là đọc báo xem tin tức ra hãy nên để người dùng thỏa sức sáng tạo chia sẻ với chức năng thêm bài viết mới để biến chính những người dùng trở thành những cây viết cừ khôi cho web cũng để tạo sự thích thú cho người dùng hơn.

Chiến thuật SEO MARKETING: Điều này gần như là điều cực kỳ quan trọng nếu muốn luôn đảm bảo website có một lượng người truy cập ổn định thì chiến lược SEO cần được định hình và phát triển từ đầu để website luôn có lượng người truy cập ổn định để tạo doanh thu bền vững từ quảng cáo cho chủ sở hữu.

Dịch vụ: Khách hàng đôi khi muốn đóng góp ý kiến nhưng không muốn ra mặt trực tiếp để trao đổi sẽ gặp khó khăn vì ở của hàng không có 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 website đọc báo hiện nay đều có các chức năng giống nhau, tùy vào khách hàng và nhu cầu mong muốn cũng như thị yếu thị trường hiện nay có thể đảm bảo được cung cấp một lượng thông tin chính thống và hấp dẫn là một công việc khó không phải website nào cũng có thể thực hiện được, bên cạnh đó,một giao diện dễ sử dụng và dễ thao tác sẽ thu hút được khách hàng nhiều hơn, điều đó quyết định một website đọc báo online thành công lâu dài hay không.

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.

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.

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.

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.

Post-conditions Admin sau khi tiếp nhận hồ sơ của các nhân viên mới và đã được phỏng vấn Admin tiến hành nhập thông tin nhân viên và lưu 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.

3 Admin tiến hành bấm lưu vào database.

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.

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.

3 Nhân viên tiến hành bấm lưu vào database.

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.

Bảng 3.7 Mô tả đăng kí thành viên

Name Lập thẻ thành viên

Brief description 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- 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 conditions 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

Post-conditions Nhân viên tiến hành cập nhật thông tin các người dùng của trang web đó,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 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

Post-conditions Khi đăng ký thành công tài khoản thì người dùng sẽ thực hiện thao tác đăng nhập vào hệ thống để có được những chức năng của một người dùng như 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 Khi vào trang chủ người dùng có thể xem tất cả các bài viết được bài viết 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 Khi nhấp chọn từng danh mục bài viết, người dùng sẽ được điều các bài viết theo hướng tới một trang show ra danh sách các bài viết theo từng danh danh mục mục bài viết

3 Xem chi tiết bài Cho phép người dùng có thể xem chi tiết nội dung từng bài viết viết khi thao tác click vào từng bài viết.

4 Tìm kiếm bài Người dùng nhập thông tin vào thanh tìm kiếm để tìm kiếm bài viết viết.

5 Đăng kí,đăng Cho phép người dùng đăng kí, đăng nhập tài khoản. nhập thành viên

6 Thêm bài viết Chức năng cho phép người dùng vào trang tạo bài viết và đăng lên mới để 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ê Giao diện quản lý cho phép quản lý phê duyệt bài viết người dùng duyệt bài viết người dùng

10 Quản lý nhân Giao diện quản lý cho phép quản lý nhân viên. viên

11 Quản lý danh Giao diện quản lý cho phép quản lý danh mục bài viết. mục bài viết

12 Thống kê danh Giao diện quản lý cho phép thống kê danh mục bài viết theo ngày mục bài viết 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ủ.

Xử lý: Khi người dùng chọn một bài viết bất kì trên page, thông tin mà người dùng gửi sẽ được xử lý, hệ thống sẽ lấy dữ liệu từ cơ sở dữ liệu, gửi lên cho người dùng. Đầu ra: Thông tin bài viết bao gồm: tên bài viết, mô tả, hình đại diện, nội dung, ngày đăng,…

Xem danh sách các bài viết theo danh mục: Khi người dùng bấm chọn vào bất kỳ danh mục bài viết nào thì hệ thống sẽ gọi dữ liệu và trả về danh sách chi tiết các bài viết ở danh mục đó. Đầu vào: Thông tin danh mục bài viết người dùng yêu cầu.

Xử lý: Hệ thống tiếp nhận từ khóa danh mục theo yêu cầu người dùng, trực tiếp lấy dữ liệu ở bên dưới và trả mảng dữ liệu bài viết theo danh mục mà người dùng yêu cầu. Đầu ra: Mảng dữ liệu bài viết theo danh mục đã được yêu cầu.

Xem chi tiết bài viết: Cho phép người dùng xem chi tiết bài viết theo từ khóa được yêu cầu. Đầu vào: Thông tin tên bài viết được người dùng gửi đi.

Xử lý: Hệ thống lấy dữ liệu chi tiết bài viết bên dưới và trả về cho người dùng. Đầu ra: Mảng dữ liệu chi tiết bài viết được yêu cầu.

Tìm kiếm bài viết: Để không mất thời gian rà soát tìm kiếm từng bài viết trên website, người dùng có thể biết thông tin về bài viết mình muốn mua bằng cách nhập thông tin vào ô tìm kiếm. Đầu vào: Tên bài viết mà người dùng muốn tìm kiếm.

Xử lý: Khi người dùng nhập tên bài viết muốn tìm kiếm, hệ thống sẽ so sánh tên đó với dữ liệu có trong database Nếu nhận được kết quả sẽ trả kết quả tìm kiếm về cho người dùng, nếu không tìm thấy kết quả nào thì hệ thống sẽ gửi thông báo:

“Không tìm thấy kết quả”. Đầu ra: Thông báo, kết quả từ hệ thống.

Thêm bài viết mới: Trên website có mục thêm bài viết cho người dùng sau khi đã đăng nhập Chức năng này sẽ cung cấp giao diện cho người dùng có thể thiết kế cho mình một bài viết riêng và được quản trị viên phê duyệt để được đăng lên trang. Đầu vào: Thông tin tên bài viết, hình đại diện, nội dung,… được gửi về hệ thống để quản trị viên xét duyệt.

Xử lý: Xét duyệt thông tin bài viết được người dùng gửi về. Đầu ra: Xuất thông báo “Chờ được xét duyệt từ phía quản trị viên.” Đăng kí, đăng nhập thành viên: Hiển thị thông tin để người dùng có thể nhập vào để đăng kí làm thành viên. Đầu vào: Thông tin người dùng nhập vào.

Xử lý: Hệ thống sẽ hiển thị ô trống cho người dùng nhập vào và trả về sau đó là thông tin của người dùng Đầu ra: Thông tin về người dùng.

Quản lý bài viết: Ở trang quản trị website có giao diện dành riêng cho việc quản lý các bài viết bao gồm các chức năng như thêm sửa xóa,… bài viết.

Quản lý phê duyệt bài viết người dùng : Sau khi thêm bài viết thành công, ở trang quản trị viên sẽ xuất hiện thông tin bài viết người dùng vừa tạo và đang chờ được xét duyệt Quản trị viên có thể xem tất cả thông tin của bài viết và có thể gắn nhãn danh mục bài viết và phê duyệt cũng như hủy phê duyệt bài viết.

Quản lý nhân viên: Ở phần quản lý nhân viên sẽ cung cấp cho quản trị viên một bảng gồm tất cả các tài khoản hiện có của website quản trị viên website có thể thêm sửa xóa người dùng ở giao diện quản lý nhân viên này.

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

_id (pk) String x name String image String description String title String content String tag_id String x user_id String x status String create_at Date update_at Date delete_at Date

Bảng 4.4 Bảng dữ liệu User

_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

_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

_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 Checkbox Lưu thông tin email password vào đăng nhập 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ý

1 Người dùng Nhấn để hiển thị trang các thông tin người dùng

2 Bài viết người Nhấn để hiển thị trang các thông tin dùng 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

6 Đóng mở thanh Đóng mở thanh navbar navbar

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

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

6 Ô nhập mật Input Mật khẩu người dùng thêm mới khẩu

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

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

1 Khung review Màn hình review nội dung bài viết bài viết người người dùng 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

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ủ

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

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

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

4 Đăng nhập bằng Button Nút đăng nhập bằng facebook 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

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 Input Ô nhập link hình đại viết 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 TextEditor Khung chỉnh sửa edit viết 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

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

1 Tên bài viết Thông tin tên mở đầu của bài viết

2 Thời gian bài Thông tin thời gian tạo của bài viết viết

3 Tiêu đề bài viết Thông tin lời tiêu đề của bài viết

4 Nội dung bài Thông tin nội dung của bài viết viết

5 Danh mục Thông tin danh mục của bài viết

6 Bài viết liên Những bài viết cùng danh mục quan 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 Button Quay lại trang danh sách bài danh sách bài viết theo danh mục bài viết viết theo danh mục

9 Quay lại trang Button Khi nhấn vào nút này người chủ 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)

1 Hashtag

Định dạng
Số trang	108
Dung lượng	8,22 MB