1. Trang chủ
  2. » Luận Văn - Báo Cáo

Đồ án xây dựng website bán điện thoại di động

51 10 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Đồ án Xây Dựng Website Bán Điện Thoại Di Động
Tác giả Lê Trịnh Việt Tiến
Người hướng dẫn ThS. Trần Thị Hồng Yến
Trường học Trường Đại Học Công Nghệ Thông Tin - Đại Học Quốc Gia TP. Hồ Chí Minh
Chuyên ngành Công Nghệ Thông Tin
Thể loại Đồ án
Năm xuất bản 2023
Thành phố Hồ Chí Minh
Định dạng
Số trang 51
Dung lượng 1,71 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Cấu trúc

  • Chương 1. TỔNG QUAN VỀ ĐỀ TÀI (0)
    • 1.1. Giới thiệu về đề tài (9)
    • 1.2. Phạm vi nghiên cứu (9)
    • 1.3. Phương pháp nghiên cứu (10)
    • 1.4. Mục tiêu của đề tài (10)
  • Chương 2. CƠ SỞ LÝ THUYẾT (0)
    • 2.1. Tổng quan về Javascript (11)
      • 2.1.1. Giới thiệu (11)
      • 2.1.2. Ưu điểm (12)
      • 2.1.3. Nhược điểm (13)
    • 2.2. Tổng quan về ReactJS (13)
      • 2.2.1. Giới thiệu (13)
      • 2.2.2. Ưu điểm (14)
      • 2.2.3. Nhược điểm (15)
    • 2.3. Tổng quan về NodeJS (15)
      • 2.3.1. Giới thiệu (15)
      • 2.3.2. Ưu điểm (15)
      • 2.3.3. Nhược điểm (16)
    • 2.4. Tổng quan về MongoDB (16)
      • 2.4.1. Giới thiệu (16)
      • 2.4.2. Ưu điểm (17)
      • 2.4.3. Nhược điểm (17)
  • Chương 3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG (0)
    • 3.1. Phân tích yêu cầu đề bài (18)
      • 3.1.1. Phát biểu bài toán (18)
      • 3.1.2. Yêu cầu bài toán (19)
    • 3.2. Nghiên cứu hiện trạng (20)
    • 3.3. Đặc tả hệ thống (21)
  • Chương 4. HIỆN THỰC HỆ THỐNG (0)
    • 4.1. Sơ đồ Use Case (22)
      • 4.1.1. Sơ đồ Use Case của khách hàng (22)
      • 4.1.2. Sơ đồ Use Case của khách hàng – thành viên (23)
      • 4.1.3. Sơ đồ Use Case của quản lý (24)
    • 4.2. Biều đồ phân rã chức năng (24)
    • 4.3. Biểu đồ tuần tự (25)
      • 4.3.1. Biểu đồ tuần tự đăng nhập (25)
      • 4.3.2. Biểu đồ tuần tự đăng ký thành viên (26)
      • 4.3.3. Biểu đồ tuần tự tìm kiếm điện thoại (27)
      • 4.3.4. Biểu đồ tuần tự đặt hàng (28)
      • 4.3.5. Biểu đồ tuần tự xem thông tin điện thoại (29)
      • 4.3.6. Biểu đồ tuần tự bình luận (30)
      • 4.3.7. Biểu đồ tuần tự hiển thị danh sách điện thoại (31)
      • 4.3.8. Biểu đồ tuần tự thêm điện thoại (32)
      • 4.3.9. Biểu đồ tuần tự xóa điện thoại (33)
      • 4.3.10. Biểu đồ tuần tự xem đơn hàng (34)
      • 4.3.11. Biểu đồ tuần tự xóa thành viên (35)
      • 4.3.12. Biểu đồ tuần tự xóa đơn hàng (36)
    • 4.4. Thiết kế cơ sở dữ liệu (36)
      • 4.4.1. Bảng dữ liệu Phone (37)
      • 4.4.2. Bảng dữ liệu User (38)
      • 4.4.3. Bảng dữ liệu Order (38)
    • 4.5. Thiết kế giao diện người dùng (39)
      • 4.5.1. Giao diện trang chủ (39)
      • 4.5.2. Giao diện chi tiết điện thoại (41)
      • 4.5.3. Giao diện đăng ký, đăng nhập (43)
      • 4.5.4. Giao diện tìm kiếm điện thoại (45)
      • 4.5.5. Giao diện đặt hàng (45)
      • 4.5.6. Giao diện quản lý điện thoại (47)
      • 4.5.7. Giao diện quản lý thành viên (48)
      • 4.5.8. Giao diện quản lý đơn hàng (49)
  • KẾT LUẬN (50)
  • TÀI LIỆU THAM KHẢO (51)

Nội dung

TỔNG QUAN VỀ ĐỀ TÀI

Giới thiệu về đề tài

Trong bối cảnh hiện đại và ảnh hưởng của đại dịch, nhu cầu mua sắm online ngày càng tăng, đặc biệt là trong lĩnh vực bán điện thoại di động Việc cách ly đã làm gia tăng nhu cầu sử dụng điện thoại cho các hoạt động giải trí, học tập và làm việc Nhận thấy tiềm năng lớn trong kinh doanh online, nhóm chúng tôi quyết định phát triển một website bán điện thoại di động để tăng doanh thu cho cửa hàng và mang lại sự tiện lợi cho người tiêu dùng.

Website cung cấp thông tin chính xác về sản phẩm cho người mua, đồng thời hỗ trợ cửa hàng trong việc quản lý đơn hàng và doanh thu hiệu quả.

Phạm vi nghiên cứu

• Phạm vi môi trường: o Triển khai sản phẩm trên môi trường web

• Phạm vi chức năng: o Đối với phía admin:

▪ Thống kê o Đối với phía website:

▪ Hiển thị danh sách sản phẩm

▪ Hiển thị chi tiết sản phẩm

▪ Bộ lọc chi tiết sản phẩm

Phương pháp nghiên cứu

• Tham khảo các website liên quan để hiểu rõ nghiệp vụ

• Tìm hiểu các công nghệ sử dụng cho đề tài

• Triển khai theo kế hoạch sẵn có

• Kiểm thử và sửa lỗi (nếu có).

Mục tiêu của đề tài

• Nắm bắt và áp dụng được các công nghệ mới để xây dựng sản phẩm đề tài

• Hiểu rõ nghiệp vụ, chức năng của một website bán điện thoại di động

• Xây dựng website bán điện thoại di động đáp ứng được các yêu cầu về giao diện và chức năng đã đề ra.

CƠ SỞ LÝ THUYẾT

Tổng quan về Javascript

JavaScript là một ngôn ngữ lập trình web phổ biến, được tích hợp vào HTML để làm cho website trở nên sống động hơn Nó hoạt động như một phần của website, cho phép thực thi Client-side Script từ người dùng, tương tự như máy chủ (Node.js), nhằm tạo ra những trang web động.

Thông thường, JavaScript sẽ được nhúng trực tiếp vào một website hoặc chúng được tham chiếu qua file js hoặc JavaScript

Mục đích của ngôn ngữ đặc biệt này sẽ giúp bạn dễ dàng sử dụng chúng hơn trong công việc Cụ thể như sau:

Thay đổi nội dung HTML có thể được thực hiện thông qua phương thức getElementById() trong JavaScript, cho phép tìm kiếm phần tử HTML có id="demo" và cập nhật nội dung bên trong của phần tử đó.

JavaScript cho phép thay đổi giá trị thuộc tính HTML, ví dụ như thay đổi thuộc tính src của thẻ .

• Thay đổi kiểu HTML: Đây chính là một hoạt động biến thể của việc thay đổi thuộc tính của HTML ở trên Ví dụ: document.getElementById(‘demo’).style.fontSize = ’35px;

Javascript có khả năng ẩn các phần tử HTML bằng cách thay đổi kiểu hiển thị của chúng.

JavaScript có khả năng hiển thị các phần tử HTML ẩn bằng cách thay đổi kiểu hiển thị của chúng.

• Chương trình rất dễ học

• Những lỗi Javascript rất dễ để phát hiện, từ đó giúp bạn sửa lỗi một cách nhanh chóng hơn

• Những trình duyệt web có thể dịch thông qua HTML mà không cần sử dụng đến một compiler

• JS có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khác nhau

• Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ và nhanh hơn nhiều so với các ngôn ngữ lập trình khác

• JS còn có thể được gắn trên một số các element hoặc những events của các trang web

• Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó có sự tương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng

Người dùng có thể sử dụng JavaScript để kiểm tra các input một cách hiệu quả, thay vì phải thực hiện kiểm tra thủ công thông qua việc truy xuất cơ sở dữ liệu.

Giao diện ứng dụng phong phú với nhiều thành phần như Drag and Drop và Slider, mang đến cho người dùng trải nghiệm Rich Interface đầy tính năng.

• Giúp thao tác với người dùng phía Client và tách biệt giữa các Client với nhau

• JS Code Snippet khá lớn

• JS dễ bị các hacker và scammer khai thác hơn

• JS cũng không có khả năng đa luồng hoặc đa dạng xử lý

• Có thể được dùng để thực thi những mã độc ở trên máy tính của người sử dụng

• Những thiết bị khác nhau có thể sẽ thực hiện JS khác nhau, từ đó dẫn đến sự không đồng nhất

• Vì tính bảo mật và an toàn nên các Client-Side Javascript sẽ không cho phép đọc hoặc ghi các file

• JS không được hỗ trợ khi bạn sử dụng ở trong tình trạng thiết bị được kết nối mạng.

Tổng quan về ReactJS

ReactJS là một thư viện mã nguồn mở dựa trên JavaScript, được Facebook phát triển vào năm 2013 Mục tiêu chính của ReactJS là nâng cao hiệu suất và tính hấp dẫn của các ứng dụng web, đồng thời giảm thiểu nỗ lực viết mã Với ReactJS, các nhà phát triển mong muốn tạo ra những trang web mượt mà, nhanh chóng, có khả năng mở rộng cao và dễ dàng triển khai.

Hiện nay, ReactJS nổi bật với khả năng tập trung vào các phần riêng lẻ của ứng dụng, cho phép các nhà phát triển dễ dàng tách rời và tối ưu hóa giao diện người dùng Điều này giúp đơn giản hóa quá trình phát triển, vì ReactJS có khả năng render dữ liệu cả trên Server lẫn Client, mang lại hiệu suất tốt hơn cho ứng dụng web.

Các thành phần chính của ReactJS:

Redux là một thành phần thiết yếu trong ReactJS, giúp quản lý dữ liệu hiệu quả khi không có các module chuyên dụng ReactJS chia giao diện thành các thành phần nhỏ, tạo sự liên kết chặt chẽ giữa chúng, nhưng yêu cầu người dùng chú ý đến luồng dữ liệu một chiều từ cha sang con Mặc dù có thể gây khó khăn cho người mới, nhưng việc áp dụng Redux giúp tối ưu hóa chức năng của ReactJS, đặc biệt khi giao diện trở nên phức tạp hơn.

Virtual DOM là một thành phần quan trọng trong hầu hết các framework, bao gồm cả ReactJS Thay vì tương tác trực tiếp với DOM, người dùng có thể thấy giao diện và các thay đổi thông qua Virtual DOM, đóng vai trò như một mô hình và giao diện Sự thay đổi ở một trong hai yếu tố này sẽ ảnh hưởng đến những yếu tố khác Bạn vẫn có thể thực hiện cơ chế Data Binding mà không cần tương tác trực tiếp với các phần tử DOM.

• Phù hợp với nhiều thể loại website khác nhau

• Tận dụng các thành phần đã có

• Tích hợp được cho cả ứng dụng di động Mobile Application

• Tối ưu để tăng cường khả năng tìm kiếm SEO

• Dễ dàng sửa lỗi và gỡ rối Debug

ReactJS chỉ là một thư viện cho tầng View, không phải là một framework MVC như các framework khác Được phát triển bởi Facebook, React giúp render phần view nhưng không bao gồm Model và Controller, do đó cần kết hợp với các thư viện khác Ngoài ra, React cũng không hỗ trợ 2-way binding hay Ajax.

• Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại

React có kích thước tương đối lớn so với các framework khác, với khoảng 35kb, gần bằng 39kb của Angular Tuy nhiên, Angular lại là một framework hoàn chỉnh.

• Khó tiếp cận cho người mới học Web.

Tổng quan về NodeJS

NodeJS là một môi trường runtime mã nguồn mở, cho phép chạy ứng dụng web JavaScript trên nhiều nền tảng khác nhau, bên ngoài trình duyệt của client Được phát triển bởi Ryan Dahl, NodeJS mang đến khả năng thực thi mã JavaScript hiệu quả và linh hoạt.

2009, được xem là một giải pháp hoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện (event-driven) không đồng bộ

• IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời

• Sử dụng JavaScript – một ngôn ngữ lập trình dễ học

• Chia sẻ cùng code ở cả phía client và server

• NPM(Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ

• Cộng đồng hỗ trợ tích cực

• Cho phép stream các file có kích thước lớn

• IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời

• Sử dụng JavaScript – một ngôn ngữ lập trình dễ học

• Chia sẻ cùng code ở cả phía client và server

• NPM(Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ

• Cộng đồng hỗ trợ tích cực

• Cho phép stream các file có kích thước lớn.

Tổng quan về MongoDB

MongoDB là một cơ sở dữ liệu NoSQL dạng tài liệu, sử dụng cấu trúc lưu trữ linh hoạt với định dạng BSON, cho phép quản lý các tài liệu như JSON Điều này giúp MongoDB tránh được cấu trúc table-based của các cơ sở dữ liệu quan hệ, cho phép mỗi collection chứa các document với kích thước và kiểu khác nhau Nhờ vào việc lưu trữ dữ liệu dưới dạng document JSON, tốc độ truy vấn trong MongoDB trở nên rất nhanh chóng.

Các feature của MongoDB gồm có:

• Các ad hoc query: hỗ trợ search bằng field, các phép search thông thường, regular expression searches, và range queries

• Indexing: bất kì field nào trong BSON document cũng có thể được index

Replication, hay còn gọi là "nhân bản", là quá trình tạo ra một phiên bản giống hệt với phiên bản hiện có Trong bối cảnh cơ sở dữ liệu, nhu cầu lưu trữ lớn và đảm bảo tính toàn vẹn là rất quan trọng, nhằm tránh mất mát dữ liệu do các sự cố không lường trước Do đó, khái niệm nhân bản được phát triển để tạo ra một phiên bản cơ sở dữ liệu tương tự và lưu trữ ở một vị trí khác, nhằm bảo vệ dữ liệu khỏi các rủi ro.

Aggregation là quá trình xử lý các bản ghi dữ liệu để trả về kết quả đã được tính toán Các phép toán tập hợp nhóm giá trị từ nhiều Document lại với nhau, cho phép thực hiện nhiều phép toán đa dạng trên dữ liệu đã được nhóm, nhằm trả về một kết quả duy nhất Trong SQL, các lệnh count(*) và GROUP BY tương đương với Aggregation trong MongoDB.

• Lưu trữ file: MongoDB được dùng như một hệ thống file tận dụng những function trên và hoạt động như một cách phân phối qua sharding

• Dữ liệu lưu trữ phi cấu trúc, không có tính ràng buộc, toàn vẹn nên tính sẵn sàng cao, hiệu suất lớn và dễ dàng mở rộng lưu trữ

• Dữ liệu được caching (ghi đệm) lên RAM, hạn chế truy cập vào ổ cứng nên tốc độ đọc và ghi cao

• Không ứng dụng được cho các mô hình giao dịch nào có yêu cầu độ chính xác cao do không có ràng buộc

• Không có cơ chế transaction (giao dịch) để phục vụ các ứng dụng ngân hàng

• Dữ liệu lấy RAM làm trọng tâm hoạt động vì vậy khi hoạt động yêu cầu một bộ nhớ RAM lớn.

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Phân tích yêu cầu đề bài

Bài toán “Ứng dụng Reactjs và Nodejs vào xây dựng website quản lý bán điện thoại” đề xuất một mô hình kinh doanh trực tuyến, cho phép người dùng truy cập vào trang web để xem và so sánh các loại điện thoại từ nhiều hãng khác nhau Trang web sẽ cập nhật thông tin về các sản phẩm mới và sắp ra mắt, đảm bảo rằng thông tin được trình bày một cách hợp lý, bao gồm tên hãng, giá cả, và các thông số kỹ thuật như camera, pin, hệ điều hành, bộ nhớ và màn hình Người quản trị có quyền thêm, sửa đổi hoặc xóa thông tin về các sản phẩm không còn bán, và mọi thay đổi sẽ được lưu trữ trong cơ sở dữ liệu để người dùng có thể dễ dàng theo dõi.

Khách hàng có thể xem thông tin các loại điện thoại trên trang web nhưng không thể đặt hàng nếu chưa đăng ký thành viên Sau khi đăng ký và đăng nhập bằng email và mật khẩu, khách hàng có quyền đặt hàng và tìm kiếm điện thoại theo tên hoặc hãng Sau khi hoàn tất đặt hàng, khách hàng có thể điều chỉnh số lượng sản phẩm theo ý muốn Khi đơn hàng được đặt thành công, quản lý sẽ kiểm tra thông tin đơn hàng và cập nhật trong hệ thống để tiến hành vận chuyển và thanh toán cho khách hàng.

Ngoài ra, trang web còn dùng là nơi quảng cáo cho cửa hàng, các loại điện thoại đang bán và sắp bán tại cửa hàng

3.1.2.1 Đối với người dùng là khách hàng - không phải thành viên

• Xem thông tin các loại điện thoại, xem thông tin sản phẩm, xem giá tiền, xem sản phẩm theo giá thấp đến cao hoặc ngược lại

• Đăng ký tài khoản, đăng nhập

3.1.2.2 Đối với người dùng là khách hàng - thành viên

• Xem thông tin các loại điện thoại, xem thông tin sản phẩm, xem giá tiền, xem sản phẩm theo giá thấp đến cao hoặc ngược lại

• Đăng ký tài khoản, đăng nhập

• Quản lí tài khoản thành viên của mình

3.1.2.3 Đối với người dùng là chủ cửa hàng hoặc quản lý

• Thêm thông tin các loại điện thoại: Khi có điện thoại mới, admin sẽ thêm mới thông tin về sản phẩm đó vào các điện thoại sắp bán

Khi có sự thay đổi thông tin về sản phẩm điện thoại, người quản lý có khả năng chỉnh sửa để người dùng được cập nhật kịp thời.

Người quản lý có thể xóa các điện thoại khỏi hệ thống nếu sản phẩm bị dừng bán hoặc hết hàng vì một lý do nào đó.

Khi khách hàng vi phạm quy định của rạp chiếu phim hoặc yêu cầu xóa tài khoản vì lý do nào đó, người quản lý có quyền xóa toàn bộ thông tin liên quan đến tài khoản đó.

• Được thêm thông tin các loại điện thoại: Khi có điện thoại mới, admin sẽ thêm mới thông tin về sản phẩm đó vào các điện thoại sắp bán

Quản lý có khả năng chỉnh sửa thông tin sản phẩm điện thoại, giúp người dùng cập nhật kịp thời những thay đổi quan trọng về thông tin sản phẩm.

Trong trường hợp điện thoại bị ngừng bán hoặc hết hàng, người quản lý có quyền xóa sản phẩm khỏi hệ thống Điều này giúp duy trì sự chính xác và cập nhật cho danh sách sản phẩm.

Khi khách hàng vi phạm các quy định của rạp chiếu phim hoặc yêu cầu xóa tài khoản vì lý do cá nhân, người quản lý có quyền xóa toàn bộ thông tin liên quan đến tài khoản đó.

Khi ra mắt sản phẩm mới, việc viết bài giới thiệu chi tiết sẽ giúp thu hút khách hàng hiệu quả hơn Người quản lý có thể mô tả đặc điểm và lợi ích của sản phẩm, từ đó không chỉ nâng cao chất lượng website mà còn tăng cường trải nghiệm người dùng.

Khi ra mắt sản phẩm mới, việc viết bài giới thiệu chi tiết về sản phẩm là rất quan trọng Bài mô tả sản phẩm không chỉ giúp thu hút sự chú ý của khách hàng mà còn nâng cao chất lượng website Sự chú trọng vào nội dung sẽ góp phần tạo ấn tượng tốt và tăng khả năng chuyển đổi cho trang web.

Nghiên cứu hiện trạng

Sau khi nghiên cứu, khảo sát hiện trạng, em đã nắm bắt được các thông tin sau:

• Quản lí điện thoại: Mỗi điện thoại được quản lý các thông tin sau: Tên điện thoại, hệ điều hành, màn hình, dung lượng pin, camera,…

• Quản lí thành viên: Mỗi thành viên được quản lí các thông tin như email và mật khẩu

• Quản lí đơn hàng: Mỗi đơn hàng cần được quản lí các thông tin sau: thông tin của các sản phẩm, giá tiền, phương thức thanh toán, trạng thái

Khi đặt hàng trực tuyến, cần cung cấp đầy đủ thông tin cho mỗi đơn hàng, bao gồm thông tin sản phẩm, giá tiền, số lượng và địa chỉ giao hàng.

Đặc tả hệ thống

Bảng 3.1 – Đặc tả hệ thống

Người quản lí Là người có vai trò cao nhất trong hệ thống, người quản lí có thể thêm, sửa, xóa mọi thông tin của hệ thống

Người dùng có thể thao tác trực tiếp trên hệ thống với các chức năng như xem danh sách điện thoại, thông tin sản phẩm, giá tiền, tìm kiếm sản phẩm, đăng ký tài khoản và đăng nhập.

Vận hành các chức năng của khách hàng - không phải thành viên, ngoài ra khách hàng thành viên có thể đặt hàng, xem thông tin đơn hàng

HIỆN THỰC HỆ THỐNG

Sơ đồ Use Case

Sơ đồ Use Case là một kỹ thuật quan trọng trong phát triển phần mềm và hệ thống, giúp xác định các yêu cầu chức năng của hệ thống Nó mô tả sự tương tác giữa người dùng và hệ thống, đồng thời nêu rõ các yêu cầu cần thiết cho hệ thống hoạt động hiệu quả.

4.1.1 Sơ đồ Use Case của khách hàng

Hình 4.1 – Sơ đồ Use Case của khách hàng

4.1.2 Sơ đồ Use Case của khách hàng – thành viên

Hình 4.2 – Sơ đồ Use Case của khách hàng thành viên

4.1.3 Sơ đồ Use Case của quản lý

Hình 4.3 – Sơ đồ Use Case của quản lý

Biều đồ phân rã chức năng

Mô hình phân rã chức năng (BFD – Business Function Diagram) là công cụ hữu ích để thể hiện sự phân rã có thứ bậc của các công việc cần thực hiện Mỗi công việc chính được chia thành các công việc con, với số mức phân chia phụ thuộc vào kích thước và độ phức tạp của hệ thống.

Hình 4.4 – Biểu đồ phân rã chức năng

Biểu đồ tuần tự

4.3.1 Biểu đồ tuần tự đăng nhập

Hình 4.5 – Biểu đồ tuần tự đăng nhập

4.3.2 Biểu đồ tuần tự đăng ký thành viên

Hình 4.6 – Biểu đồ tuần tự đăng ký thành viên

4.3.3 Biểu đồ tuần tự tìm kiếm điện thoại

Hình 4.7 – Biểu đồ tuần tự tìm kiếm điện thoại

4.3.4 Biểu đồ tuần tự đặt hàng

Hình 4.8 – Biểu đồ tuần tự đặt hàng

4.3.5 Biểu đồ tuần tự xem thông tin điện thoại

Hình 4.9 – Biểu đồ tuần tự xem thông tin điện thoại

4.3.6 Biểu đồ tuần tự bình luận

Hình 4.10 – Biểu đồ tuần tự bình luận

4.3.7 Biểu đồ tuần tự hiển thị danh sách điện thoại

Hình 4.11 – Biểu đồ tuần tự hiển thị danh sách điện thoại

4.3.8 Biểu đồ tuần tự thêm điện thoại

Hình 4.12 – Biểu đồ tuần tự thêm điện thoại

4.3.9 Biểu đồ tuần tự xóa điện thoại

Hình 4.13 – Biểu đồ tuần tự xóa điện thoại

4.3.10 Biểu đồ tuần tự xem đơn hàng

Hình 4.14 – Biểu đồ tuần tự xem đơn hàng

4.3.11 Biểu đồ tuần tự xóa thành viên

Hình 4.15 – Biểu đồ tuần tự xóa thành viên

4.3.12 Biểu đồ tuần tự xóa đơn hàng

Hình 4.16 – Biểu đồ tuần tự xóa đơn hàng

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

Khi phát triển ứng dụng, việc thiết kế cơ sở dữ liệu chuẩn và khả năng truy cập là rất quan trọng Một cơ sở dữ liệu đạt tiêu chuẩn tối thiểu phải tuân thủ chuẩn 3NF Trong dự án này, chúng tôi sẽ sử dụng MongoDB làm cơ sở dữ liệu.

Sau đây là các bảng dữ liệu được thiết kế: Phone, User, Order

Bảng 4.1- Bảng dữ liệu Phone

STT Tên thuộc tính Kiểu dữ liệu Khóa chính Not Null Khóa ngoại

Bảng 4.2 – Bảng dữ liệu User

STT Tên thuộc tính Kiểu dữ liệu Khóa chính Not Null Khóa ngoại

Bảng 4.3 – Bảng dữ liệu Order

STT Tên thuộc tính Kiểu dữ liệu Khóa chính Not Null Khóa ngoại

Thiết kế giao diện người dùng

4.5.1 Giao diện trang chủ Đây là giao diện trang chủ của trang web Với trang này người quản lí, khách hàng kể cả đã là thành viên hay chưa là thành viên đều có thể truy cập Trang web cung cấp các thông tin điện thoại như giá bán, hãng, thông tin giảm giá

Hình 4.17 – Giao diện trang chủ

4.5.2 Giao diện chi tiết điện thoại Đây là trang web cung cấp tên điện thoại, hãng, pin, màn hình,… cũng như giá bán, các đánh giá của người mua khác, xem số đánh giá,… nhằm đáp ứng nhu cầu tìm điện thoại của người dùng

Hình 4.18 – Giao diện chi tiết điện thoại

4.5.3 Giao diện đăng ký, đăng nhập

Người dùng sẽ đăng nhập và đăng kí tài khoản để đảm bảo việc mua hàng và thanh toán

Hình 4.19 – Giao diện đăng nhập

Hình 4.20 – Giao diện đăng ký

4.5.4 Giao diện tìm kiếm điện thoại

Người dùng sẽ tìm kiếm điện thoại theo ý muốn

Hình 4.21 – Giao diện tìm kiếm sản phẩm

Người dùng có thể chọn điện thoại mong muốn và hệ thống sẽ chuyển đến trang đặt hàng Tại đây, người dùng sẽ thấy giá của các sản phẩm trong giỏ hàng, với tổng giá tiền tự động cập nhật theo số lượng điện thoại đã chọn, giúp người dùng dễ dàng theo dõi.

Hình 4.22 – Giao diện đặt hàng

4.5.6 Giao diện quản lý điện thoại

Trong trang này, người quản lí kiểm soát được toàn bộ thông tin của các điện thoại

Hình 4.23 – Giao diện quản lý điện thoại (1)

Người dùng có thể xem thông tin chi tiết, thêm, chỉnh sửa và xóa điện thoại Khi nhấn vào nút thoát bên phải của điện thoại, trang thông tin điện thoại sẽ được hiển thị.

Khi muốn thêm điện thoại mới, người quản lý chỉ cần nhấn vào biểu tượng “Add” ở phía trên trang quản lý điện thoại phim Hệ thống sẽ hiển thị trang sản phẩm để người quản lý nhập thông tin chi tiết về điện thoại Sau khi hoàn tất việc điền thông tin, người dùng sẽ chọn để lưu lại.

“Save” để lưu thông tin vào hệ thống

Người dùng có thể dễ dàng chỉnh sửa thông tin phim bằng cách nhấn nút chỉnh sửa trên điện thoại, sau đó hệ thống sẽ hiển thị trang thông tin cần chỉnh sửa Sau khi hoàn tất, người dùng chỉ cần nhấn nút Save để lưu lại các thay đổi Để xóa thông tin điện thoại, người dùng chỉ cần nhấn vào nút xóa bên phải để thực hiện quá trình xóa.

Hình 4.24 – Giao diện quản lý điện thoại (2)

Hình 4.25 – Giao diện quản lý điện thoại (3)

4.5.7 Giao diện quản lý thành viên

Trong trang này, người quản lí xem được toàn bộ thông tin của các tài khoản thành viên

Hình 4.26 – Giao diện quản lý thành viên

4.5.8 Giao diện quản lý đơn hàng

Trong trang này, người quản lí kiểm soát được toàn bộ thông tin của các đơn đặt hàng

Hình 4.27 – Giao diện quản lý đơn hàng

Ngày đăng: 04/09/2023, 20:49

Nguồn tham khảo

Tài liệu tham khảo Loại Chi tiết
[6] “Stack Overflow - Where Developers Learn, Share, & Build Careers” https://stackoverflow.com/ (truy cập lần cuối vào ngày 24/6/2023) Sách, tạp chí
Tiêu đề: Stack Overflow - Where Developers Learn, Share, & Build Careers
[1] “Javascript là gì? Kiến thức tổng quan về Javascript từ A – Z” https://fptcloud.com/javascript/ (truy cập lần cuối vào ngày 24/6/2023) Link
[2] “Reactjs là gì? Dùng để làm gì? Tìm hiểu về Reactjs từ A – Z” https://fptcloud.com/reactjs/ (truy cập lần cuối vào ngày 24/6/2023) Link
[3] “ReactJS - Ưu điểm và nhược điểm” https://viblo.asia/p/reactjs-uu-diem-va-nhuoc-diem-V3m5WzexlO7 (truy cập lần cuối vào ngày 24/6/2023) Link
[4] “NodeJS là gì? Tổng quan kiến thức về Node.JS” https://vietnix.vn/nodejs-la-gi/ (truy cập lần cuối vào ngày 24/6/2023) Link
[5] “MongoDB là gì? Định nghĩa đầy đủ và chi tiết nhất về MongoDB” https://topdev.vn/blog/mongodb-la-gi/ (truy cập lần cuối vào ngày 24/6/2023) Link

TỪ KHÓA LIÊN QUAN

w