− Dòng sự kiện chính: ● Sau khi hoàn thành đăng nhập, hệ thống cho phép người quản lý truy cập vào giao diện chính ● Phân quyền cho nhân viên hoặc quản lý sau khi đăng nhập ● Giới hạn cá
TỔNG QUAN VỀ ĐỀ TÀI
Giới thiệu đề tài
Việc bán hàng trực tuyến đã trở nên phổ biến và mang lại nhiều lợi ích cho người tiêu dùng Mặc dù C và C++ có thể hỗ trợ trong việc phát triển ứng dụng bán hàng online, nhưng trình biên dịch lại phụ thuộc vào từng loại CPU Điều này dẫn đến việc xây dựng trình biên dịch tốn thời gian và chi phí, khiến cho việc phát triển một trình biên dịch riêng cho mỗi loại CPU trở nên rất đắt đỏ.
Người mua có thể dễ dàng lựa chọn sản phẩm cần thiết trên trang web bán hàng mà không cần đến cửa hàng, giúp tiết kiệm thời gian Quá trình thanh toán diễn ra trực tuyến và nhanh chóng, đồng thời khách hàng sẽ nhận được hàng giao tận nơi chỉ trong thời gian ngắn sau khi đặt hàng.
Web bán truyện tranh được thiết kế để phục vụ những người đam mê truyện tranh và những người mới bắt đầu, tạo ra một không gian tương tác giúp họ khám phá và cập nhật thông tin mới nhất về các sản phẩm truyện tranh.
⮚ Giao diện: Đơn giản, đẹp mắt, dễ thao tác trên màn hình, phù hợp cho mọi đối tượng khách hàng
⮚ Sản phẩm: Đa dạng mẫu mã sản phẩm, hình ảnh sản phẩm chân thực, dễ phân loại để người dùng dễ tìm kiếm và lựa chọn.
Mục đích của website cần thiết kế
Khi xây dựng website, cần xác định rõ mục tiêu và thiết kế để tránh sai lầm và đi lệch hướng Thiết kế cẩn thận và định hướng rõ ràng là chìa khóa thành công trong việc xây dựng website Áp dụng kiến thức đã học để thiết kế website bán hàng online giúp giải quyết khó khăn của cửa hàng Nghiên cứu thực trạng thương mại điện tử tại Việt Nam để triển khai hệ thống phù hợp Khai thác lợi ích của Internet nhằm phát triển môi trường kinh doanh toàn cầu.
Dựa trên kiến thức được giảng dạy và tài liệu tham khảo, em đã tổng hợp và xây dựng một trang web "Website bán truyện tranh" Trang web này sẽ được lập trình với giao diện tích hợp nhiều chức năng hữu ích cho người dùng.
⮚ Giao diện chính của website
Mục tiêu quảng bá website
Trong thế giới kỹ thuật số hiện nay, việc quảng bá website là rất quan trọng để nâng cao nhận thức và tầm ảnh hưởng Dự án xây dựng website bán truyện tranh của chúng tôi không chỉ nhằm thu hút người đọc mục tiêu mà còn tạo ra một cộng đồng đam mê và trải nghiệm thú vị Chúng tôi đã đặt ra một số mục tiêu cụ thể trong quá trình quảng bá website để đạt được điều này.
Để tăng cường nhận thức thương hiệu, việc xây dựng hình ảnh thương hiệu mạnh mẽ là rất quan trọng Điều này bao gồm việc sử dụng logo, màu sắc và nội dung phù hợp để tạo ấn tượng tích cực và dễ nhớ trong tâm trí người đọc về trang web.
Để thu hút và giữ chân độc giả, việc tạo ra nội dung chất lượng là rất quan trọng Điều này bao gồm việc phát triển và chia sẻ các loại nội dung phong phú như truyện tranh mới, bài đánh giá hấp dẫn và thông tin hữu ích liên quan.
Xây dựng một cộng đồng trực tuyến tích cực là rất quan trọng, khuyến khích sự tương tác và tham gia của người đọc thông qua các bình luận, diễn đàn và mạng xã hội Việc này không chỉ giúp tăng cường mối liên kết giữa các thành viên mà còn tạo ra một không gian giao lưu, chia sẻ ý tưởng và thông tin hữu ích.
Tối ưu hóa SEO là quá trình cải thiện trang web nhằm nâng cao thứ hạng trên các công cụ tìm kiếm, giúp người dùng dễ dàng tiếp cận nội dung của chúng tôi khi tìm kiếm trên internet.
Hợp tác với các đối tác trong ngành truyện tranh là một chiến lược hiệu quả để mở rộng đối tượng và nâng cao nhận thức về trang web Bằng cách sử dụng quảng cáo đối tác, bạn có thể tận dụng các kênh quảng cáo sẵn có, từ đó gia tăng sự hiện diện và thu hút thêm người dùng mới.
Theo dõi và đánh giá hiệu suất trang web là rất quan trọng Sử dụng các công cụ phân tích giúp bạn đo lường lưu lượng truy cập, mức độ tương tác của người đọc và tỷ lệ chuyển đổi Từ những dữ liệu này, bạn có thể điều chỉnh chiến lược quảng bá một cách hiệu quả theo thời gian.
Một số trang chính của sản phẩm
- Trang đăng nhập và đăng ký: Để khách hàng có thể dễ dàng đặt hàng và được hưởng những ưu đãi từ cửa hàng
- Trang chủ: Đây là trang giới thiệu về các sản phẩm nổi
Ngoài ra biết thêm thông tin của xã hội
- Trang sản phẩm: Đây là trang khách hàng xem hoặc tham khảo các mặt hàng có sẵn để lựa chọn
- Trang chi tiết sản phẩm: Đây là trang khách hàng xem chi tiết về một sản phẩm
- Trang giỏ hàng: Đây là trang khách hàng thêm sản phẩm vào giỏ hàng
- Trang liên hệ chúng tôi: Đây là trang mà khách hàng có thể liên hệ với cửa hàng.
KHẢO SÁT VÀ PHÂN TÍCH HỆ THỐNG
Khảo sát hiện trạng
Trào lưu mua bán trực tuyến ngày càng phổ biến nhờ sự phát triển của Internet, trở thành phương tiện truyền thông hàng đầu thế giới Người dùng không chỉ sử dụng Internet để trao đổi thông tin, giải trí và tìm kiếm tin tức, mà còn để kinh doanh các mặt hàng từ bình thường đến đặc biệt Tại Việt Nam, nhiều trang web thương mại điện tử cung cấp đa dạng sản phẩm như thời trang, mỹ phẩm và đồ ăn, cho phép khách hàng dễ dàng chọn lựa và đặt hàng chỉ với vài cú click chuột, sau đó chờ nhận hàng tận nhà.
Kinh doanh qua mạng mang lại cho các công ty nhiều cơ hội và thách thức trong việc mở rộng thị trường cả trong và ngoài nước Mặc dù có nhiều lợi ích, nhưng hình thức kinh doanh này cũng gặp phải một số vấn đề, đặc biệt là cần có kiến thức về công nghệ thông tin để xây dựng trang web phục vụ cho việc bán hàng và quảng bá sản phẩm Tại Việt Nam, mặc dù Internet và mua sắm trực tuyến phát triển nhanh, nhiều người vẫn lo ngại về hình thức kinh doanh này Khách hàng thường e ngại khi mua sắm trực tuyến vì không thể kiểm tra chất lượng sản phẩm như quảng cáo, cũng như lo lắng về việc chuyển tiền mà không nhận được hàng hóa đúng hạn Đồng thời, các cửa hàng cũng phải chịu tổn thất lớn khi đầu tư vào sản phẩm mà không biết được phản ứng của khách hàng, hoặc gặp khó khăn trong việc giao hàng do địa chỉ không chính xác.
Mỗi hình thức kinh doanh đều có những ưu điểm và nhược điểm riêng, nhưng thành công của nó phụ thuộc vào ý tưởng và phương thức quản lý Ngành kinh doanh thời trang trực tuyến đang ngày càng phát triển, mang lại sự đa dạng cho thị trường thời trang và quần áo, đồng thời phù hợp với xu hướng công nghệ thông tin hiện đại.
Mô tả bài toán
Chúng tôi đang phát triển một trang web bán truyện tranh nhằm mang đến trải nghiệm mua sắm trực tuyến dễ dàng và thú vị cho những độc giả yêu thích thể loại này.
● Xây dựng hệ thống danh mục rõ ràng và phong phú để người đọc dễ dàng tìm kiếm và lựa chọn truyện theo sở thích cá nhân
− Chức năng tìm kiếm lọc:
● Cung cấp công cụ tìm kiếm mạnh mẽ, hỗ trợ người đọc nhanh chóng định vị truyện mong muốn
● Tích hợp các bộ lọc để người dùng có thể tinh chỉnh kết quả tìm kiếm theo nhiều tiêu chí khác nhau
● Hiển thị thông tin chi tiết, mô tả, và hình ảnh minh họa về từng truyện tranh
● Cung cấp đánh giá và bình luận từ người đọc để tạo sự tương tác và tin cậy
− Giỏ hàng và thanh toán:
● Cho phép người đọc thêm truyện vào giỏ hàng và quản lý mua sắm của mình
● Cung cấp quy trình thanh toán an toàn và thuận tiện
− Quản lý tài khoản người dùng:
● Đăng ký và đăng nhập tài khoản để theo dõi đơn hàng, lưu trữ thông tin cá nhân và theo dõi trạng thái đơn hàng
− Quảng bá và tiếp thị:
● Tích hợp chức năng chia sẻ truyện và đánh giá qua các mạng xã hội để tăng cường sự lan truyền thông tin
● Kích thích sự tương tác bằng cách tổ chức các sự kiện, khuyến mãi và ưu đãi đặc biệt
− Tối ưu hóa cho thiết bị di động:
● Đảm bảo trang web được thiết kế phản ánh và tương thích tốt trên các thiết bị di động để tạo trải nghiệm người dùng linh hoạt
Yêu cầu về chức năng
Người dùng là những cá nhân có nhu cầu mua sắm trực tuyến, truy cập vào trang web để tìm kiếm và xem danh sách sản phẩm Họ có thể dễ dàng đặt hàng từ cửa hàng thông qua nền tảng trực tuyến.
Chức Năng cho Người Dùng:
− Xem Sản Phẩm: Hiển thị danh sách sản phẩm rõ ràng với hình ảnh và thông tin chi tiết để người dùng có thể dễ dàng lựa chọn
− Tìm Kiếm Nhanh: Cung cấp ô tìm kiếm mạnh mẽ để người dùng có thể nhanh chóng định vị sản phẩm mong muốn
− Đặt Hàng Dễ Dàng: Tích hợp chức năng đặt hàng và thanh toán thuận tiện
Người quản trị có quyền kiểm soát toàn bộ hoạt động của trang web, đảm nhận trách nhiệm quản lý sản phẩm và đảm bảo hệ thống hoạt động một cách trơn tru.
− Quản Lý Sản Phẩm: Thêm, sửa, xóa sản phẩm để cập nhật danh mục cửa hàng và đáp ứng nhanh chóng với nhu cầu thị trường
− Giao Diện Thân Thiện: Thiết kế giao diện dễ hiểu, linh hoạt và thân thiện với người dùng
− Quảng Cáo Hấp Dẫn: Hiển thị thông tin quảng cáo hấp dẫn và chân thực để tạo sự hứng thú từ khách hàng
− Bảo Mật Thông Tin: Đảm bảo an toàn tuyệt đối cho thông tin cá nhân của người dùng trong quá trình giao dịch
Hệ thống được thiết kế để dễ dàng nâng cấp và bảo trì, giúp thích ứng linh hoạt với sự phát triển của thị trường và nhu cầu ngày càng cao của người dùng.
Sơ đồ chức năng
2.4.1 Tổng quan các chức năng hệ thống
Hình 2.1 Hình ảnh sơ đồ chức năng hệ thống
2.4.2 Biểu đồ use case toàn hệ thống
Hình 2.2 Hình nh biả ểu đồ usecase t ng quát ch c Admin ổ ứ
Hình 2.3 Hình ảnh biểu đồ usecase tổng quát chức năng Khách Hàng
2.4.2.1 Chức năng đăng nhập cho Admin
Biểu đồ use case chức năng đăng nhập
Hình 2.4 Hình ảnh usecase đăng nhập Đặc tả use case
− Tác nhân: Quản lý hoặc nhân viên
− Mô tả: Cho phép người quản lý hoặc nhân viên có thể truy cập vào trang
− quản trị của website Từ đó có thể thực hiện các chức năng dựa theo chức vụ của người quản lý hoặc nhân viên được phân quyền
● Sau khi hoàn thành đăng nhập, hệ thống cho phép người quản lý truy cập vào giao diện chính
● Phân quyền cho nhân viên hoặc quản lý sau khi đăng nhập
● Giới hạn các chức năng mà nhân viên không thể tác động vào hệ thống
● Nhân viên hoặc quản lý tiếp tục chọn và thực hiện các chức năng có trong trang quản trị webiste
Nếu người dùng nhập sai thông tin đăng nhập, họ sẽ không được phép truy cập vào trang quản trị Ngược lại, nếu thông tin đăng nhập chính xác, hệ thống sẽ tự động chuyển họ đến trang quản trị mà không cần thực hiện bước đăng nhập lại Kết thúc trường hợp sử dụng.
− Các yêu cầu đặc biệt: Không có
− Trạng thái sử dụng trước khi sử dụng use case: Chưa đăng nhập
− Trạng thái hệ thống sau khi sử dụng use case: Hiển thị các chức năng có trong trang quản trị và hiển thị chức năng đăng xuất
Biểu đồ trình tự chức năng đăng nhập
Hình 2.5 Hình ảnh Biểu đồ trình tự đăng nhập admin
Thông tin quản lý và nhân viên được lưu trữ trong cơ sở dữ liệu Để truy cập trang quản trị, nhân viên hoặc quản lý cần đăng nhập bằng thông tin chính xác của mình Chỉ khi đăng nhập thành công, họ mới có thể thực hiện các chức năng trên trang quản trị.
"Đăng nhập vào Hệ thống"
Người dùng (User): Người sử dụng hệ thống
Hệ thống (System): Hệ thống cung cấp dịch vụ đăng nhập
- Người dùng bắt đầu quá trình bằng cách mở ứng dụng hoặc trang web và chọn
4 Yêu cầu Đăng nhập (Login Request):
- Người dùng gửi yêu cầu đăng nhập đến hệ thống
- Hệ thống kiểm tra thông tin đăng nhập của người dùng, bao gồm tên người dùng và mật khẩu
- Nếu thông tin là hợp lệ, hệ thống chuyển đến bước tiếp theo; nếu không, quá trình đăng nhập kết thúc và thông báo lỗi
- Hệ thống tạo một phiên làm việc (session) cho người dùng đã xác thực
- Phiên này có thể bao gồm một mã phiên, thông tin người dùng và các thông tin liên quan khác
7 Phản hồi Đăng nhập (Login Response):
- Hệ thống gửi phản hồi đăng nhập cho người dùng, bao gồm thông tin về việc đăng nhập thành công và thông tin phiên làm việc
8: Truy cập Hệ thống (Access System):
- Người dùng sử dụng thông tin phiên để truy cập các chức năng và dịch vụ trong hệ thống
- Quá trình đăng nhập kết thúc khi người dùng thoát hoặc đăng xuất khỏi hệ thống
2.4.2.2 Chức năng quản lý khách hàng
Biểu đồ use case chức năng quản lý nhân Khách Hàng
Hình 2.6: Hình nh usecase chả ức năng quản lý khách hàng Đặc tả use case
− Tác nhân: Quản lý hoặc nhân viên
Người quản lý cửa hàng có thể dễ dàng kiểm soát thông tin khách hàng, bao gồm việc xem chi tiết thông tin của từng khách hàng và xóa thông tin không cần thiết khi cần.
● Sau khi hoàn thành đăng nhập, hệ thống cho phép người quản lý truy cập vào giao diện chính
● Người quản lý chọn chức năng quản lý khách hàng
● Hiển thị giao diện quản lý khách hàng
● Nhân viên hoặc quản lý thực hiện các chức năng với thông tin khách hàng rồi lưu CSDL
● Kết thúc use case quản lý khách hàng
Khi người dùng đang ở giao diện quản lý khách hàng và chọn quay về trang chủ, hệ thống sẽ hiển thị thông báo hỏi "Bạn có muốn thoát?" Nếu người dùng chọn "Có", hệ thống sẽ chuyển về trang chủ, kết thúc trường hợp sử dụng.
− Các yêu cầu đặc biệt: Không có
− rạng thái sử dụng trước khi sử dụng use case: Không có yêu cầu
Sau khi thực hiện các thao tác với thông tin khách hàng, hệ thống sẽ hiển thị thông báo thành công, đồng thời trả về giao diện quản lý khách hàng ban đầu.
Biểu đồ trình tự chức năng quản lý khách hàng
Hình 2.7: Hình nh biả ểu đồ trình t ựchức năng quản lý khách hàng
2.4.2.3 Chức năng quản lý sản phẩm
Biểu đồ use case quản lý sản phẩm
Hình 2.8 Hình nh biả ểu đồ usecase chức năng quản lý s n ph m ả ẩ Đặc tả use case
− Tác nhân: Quản lý hoặc nhân viên
Người quản lý cửa hàng có thể dễ dàng kiểm soát thông tin sản phẩm, tìm kiếm và thêm mới sản phẩm vào cửa hàng Họ cũng có khả năng cập nhật thông tin sản phẩm, xóa sản phẩm không còn cần thiết và nhập thêm số lượng hàng cho từng sản phẩm.
● Sau khi hoàn thành đăng nhập, hệ thống cho phép người quản lý truy cập vào giao diện chính
● Người quản lý chọn chức năng quản lý sản phẩm
● Hiển thị giao diện quản lý sản phẩm
● Quản lý thực hiện các chức năng với thông tin sản phẩm rồi lưu CSDL
● Kết thúc use case quản lý sản phẩm
Khi người dùng đang ở giao diện quản lý sản phẩm và chọn quay về trang chủ, hệ thống sẽ hiển thị thông báo hỏi "Bạn có muốn thoát?" Nếu người dùng xác nhận chọn "Có", hệ thống sẽ chuyển về trang chủ, kết thúc kịch bản sử dụng.
− Các yêu cầu đặc biệt: Không có
− Trạng thái sử dụng trước khi sử dụng use case: Không có yêu cầu
Sau khi thực hiện các use case, hệ thống sẽ hiển thị thông báo thành công cho người quản lý khi họ thực hiện các thao tác liên quan đến thông tin sản phẩm Sau đó, giao diện quản lý sản phẩm sẽ trở về trạng thái ban đầu.
Biểu đồ trình tự chức năng quản lý sản phẩm
Hình 2.9 Hình nh biả ểu đồ trình t ựchức năng quản lý s n ph m ả ẩ
2.4.2.4 Chức năng quản lý mã giảm giá
Biểu đồ use case chức năng quản lý mã giảm
Hình 2.10 Hình ảnh usecase chức năng quản lý mã giảm giá Đặc tả use case
− Tác nhân: Quản lý hoặc nhân viên
Quản lý cửa hàng có thể dễ dàng kiểm soát thông tin về mã giảm giá, bao gồm khả năng thêm, sửa đổi và xóa mã giảm giá khỏi hệ thống.
● Sau khi hoàn thành đăng nhập, hệ thống cho phép người quản lý truy cập vào giao diện chính
● Người quản lý chọn chức năng quản lý mã giảm giá
● Hiển thị giao diện quản lý mã giảm giá
● Nhân viên hoặc quản lý thực hiện các chức năng với thông tin mã giảm giá rồi lưu CSDL
● Kết thúc use case quản lý mã giảm giá
Khi người dùng đang quản lý mã giảm giá và chọn quay về trang chủ, hệ thống sẽ hiển thị thông báo hỏi "Bạn có muốn thoát?" Nếu người dùng xác nhận, hệ thống sẽ chuyển về trang chủ, kết thúc trường hợp sử dụng.
− Các yêu cầu đặc biệt: Không có
− Trạng thái sử dụng trước khi sử dụng use case: Không có yêu cầu
Sau khi thực hiện use case, hệ thống sẽ hiển thị thông báo thành công cho người quản lý sau khi thực hiện các thao tác với thông tin mã giảm giá Sau đó, giao diện quản lý mã giảm giá sẽ trở về trạng thái ban đầu.
Biểu đồ trình tự của chức năng quản lý mã giảm giá
Hình 2.11 Hình nh usecase chả ức năng quản lý mã gi m giá ả
2.4.2.5 Chức năng quản lý danh mục sản phẩm
Biểu đồ use case chức năng quản lý danh mục sản phẩm
Hình 2.12 Hình nh chả ức năng use case quản lý danh mục sản ph m ẩ Đặc tả use case
− Tác nhân: Quản lý hoặc nhân viên
Người quản lý cửa hàng có khả năng kiểm soát thông tin danh mục sản phẩm, bao gồm việc thêm, sửa đổi và xóa danh mục khỏi hệ thống một cách dễ dàng.
● Sau khi hoàn thành đăng nhập, hệ thống cho phép người quản lý truy cập vào giao diện chính
● Người quản lý chọn chức năng quản lý danh mục sản phẩm
● Hiển thị giao diện quản lý danh mục sản phẩm
● Nhân viên hoặc quản lý thực hiện các chức năng với thông tin danh mục rồi lưu CSDL
● Kết thúc use case quản lý danh mục
Khi người dùng đang ở giao diện quản lý danh mục và chọn quay về trang chủ, hệ thống sẽ hiển thị câu hỏi "Bạn có muốn thoát?" Nếu người dùng chọn "Có", hệ thống sẽ chuyển hướng về trang chủ, kết thúc quá trình sử dụng.
− Các yêu cầu đặc biệt: Không có
− Trạng thái sử dụng trước khi sử dụng use case: Không có yêu cầu
Sau khi thực hiện các thao tác với thông tin danh mục, hệ thống sẽ hiển thị thông báo thành công và trả lại giao diện quản lý danh mục ban đầu cho người quản lý.
Biểu đồ trình tự chức năng quản lý danh mục sản phẩm
Hình 2.13 Hình nh Biả ểu đồ trình t ựchức năng quản lý danh m c s n ph m ụ ả ẩ
2.4.2.6 Chức năng quản lý nhà cung cấp
Biểu đồ chức năng use case quản lý nhà cung cấp
Hình 2.14 Hình nh use case chả ức năng quản lý nhà cung c p ấ Đặc tả use case
− Tác nhân: Quản lý hoặc nhân viên
Quản lý cửa hàng có khả năng kiểm soát thông tin nhà cung cấp sản phẩm một cách hiệu quả Hệ thống cho phép thêm nhà cung cấp mới, chỉnh sửa thông tin hiện có và xóa bỏ nhà cung cấp không còn cần thiết.
● Sau khi hoàn thành đăng nhập, hệ thống cho phép người quản lý truy cập vào giao diện chính
● Người quản lý chọn chức năng quản lý nhà cung cấp
● Hiển thị giao diện quản lý nhà cung cấp
● Nhân viên hoặc quản lý thực hiện các chức năng với thông tin nhà cung cấp rồi lưu CSDL
● Kết thúc use case quản lý nhà cung cấp
Biểu đồ class
Hình 2.32 Hình nh biả ểu đồ class
GIẢI PHÁP
Lựa Chọn Công Nghệ (Setup Environment)
Phần Mềm S Dử ụng và công c hụ ỗ trợ
Nhóm em s dử ụng Visual Studio Code để hoàn thiện dự án này
Hình 3.1 Hình nh visual Studio Code ả
Visual Studio Code, viết tắt là VS Code, là một công cụ mạnh mẽ giúp biên tập và soạn thảo mã nguồn, hỗ trợ quá trình phát triển và thiết kế website một cách nhanh chóng Trình soạn thảo này hoạt động mượt mà trên các nền tảng như Windows, macOS và Linux, đồng thời tương thích với nhiều thiết bị máy tính có cấu hình tầm trung, mang lại sự tiện lợi cho người dùng.
Visual Studio Code cung cấp nhiều chức năng Debug, tích hợp Git và hỗ trợ Syntax Highlighting Nổi bật với tính năng tự hoàn thành mã thông minh, Snippets và khả năng cải tiến mã nguồn, Visual Studio Code cho phép lập trình viên tùy chỉnh giao diện với nhiều Theme, phím tắt và các tùy chọn đa dạng khác.
M c dù trình so n thặ ạ ảo Code này tương đối nhẹ, nhưng lại bao gồm các tính năng mạnh mẽ
Mặc dù mới ra mắt, VSCode đã nhanh chóng trở thành một trong những trình soạn thảo mã nguồn phổ biến nhất dành cho lập trình viên Với sự hỗ trợ cho nhiều ngôn ngữ lập trình thông dụng, cùng với các tính năng tích hợp và khả năng mở rộng đa dạng, VSCode đã trở thành công cụ quen thuộc với bất kỳ lập trình viên nào.
Môi Trường Thực Thi Code:
Hình 3.2 Hình nh node JS ả
Node.js là một nền tảng mạnh mẽ được xây dựng trên môi trường Javascript Runtime, cho phép phát triển ứng dụng mạng một cách nhanh chóng và dễ dàng Với khả năng xử lý nhanh chóng nhờ vào trình duyệt Chrome, Node.js giúp các lập trình viên tạo ra các ứng dụng web hiệu quả và linh hoạt.
• Node.js được thi t k b i Ryan Lienhart Dahl - m t k ế ế ở ộ ỹ sư phần mềm người
M ỹ vào năm 2009 và phát triển dưới sự bảo trợ của Joyent
• Phần Core bên dướ ủa Nodejs đượi c c viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao.
• Các ng dứ ụng được t o ra b i Node.js 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 ứng dụng web có lưu lượng truy cập lớn, yêu cầu khả năng mở rộng và linh hoạt trong công nghệ Nó đặc biệt phù hợp cho việc phát triển nhanh chóng các dự án khởi nghiệp.
JavaScript là ngôn ngữ lập trình chủ yếu được sử dụng để tạo ra các trang web tương tác, từ việc cập nhật nội dung trên mạng xã hội đến việc hiển thị hình ảnh động và bản đồ tương tác Với vai trò là ngôn ngữ kịch bản phía máy khách, JavaScript đóng vai trò quan trọng trong các công nghệ cốt lõi của World Wide Web Khi bạn duyệt internet, những hiệu ứng như quảng cáo quay vòng, menu thả xuống hoặc màu sắc thay đổi động trên trang web đều là kết quả của các chức năng mà JavaScript mang lại.
H ệQuản Tr ị Cơ Sở Dữ Liệu MongoDB
• MongoDB lần đầu ra đời bởi MongoDB Inc., t i thạ ời điểm đó là thế hệ
Vào tháng Mười năm 2007, một sản phẩm PaaS (Platform as a Service) đã ra mắt, tương tự như Windows Azure và Google App Engine Đến năm 2009, sản phẩm này đã được chuyển đổi thành nguồn mở.
MongoDB là một trong những cơ sở dữ liệu NoSQL phổ biến nhất hiện nay, được sử dụng làm backend cho nhiều trang web lớn như eBay, SourceForge và The New York Times.
• 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", có nghĩa là tạo ra một phiên bản giống hệt với phiên bản cơ sở dữ liệu đang tồn tại và được sử dụng Trong bối cảnh nhu cầu lưu trữ lớn và sự cần thiết phải bảo vệ dữ liệu toàn vẹn, việc nhân bản dữ liệu trở nên cực kỳ quan trọng để tránh mất mát 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 nhằm tạo ra một phiên bản cơ sở dữ liệu giống hệt và lưu trữ ở một vị trí khác, nhằm đảm bảo an toàn cho dữ liệu.
Aggregation là các phép toán xử lý các bản ghi dữ liệu và trả về kết quả đã được tính toán Các phép toán này nhóm các giá trị từ nhiều tài liệu 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 để trả về một kết quả duy nhất Trong SQL, count(*) và GROUP BY tương đương với Aggregation trong MongoDB.
MongoDB là một hệ thống lưu trữ file hiệu quả, sử dụng các chức năng mạnh mẽ và hỗ trợ phân phối dữ liệu qua sharding Ưu điểm nổi bật của MongoDB bao gồm khả năng mở rộng linh hoạt, hiệu suất cao trong việc xử lý dữ liệu lớn và tính năng lưu trữ không cấu trúc, giúp tối ưu hóa việc quản lý và truy xuất thông tin.
• 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.
• Mọi thay đổ ề ữi v d liệu mặc định đều chưa được ghi xuống ổ cứng ngay lập t c vì v y kh ứ ậ ả năng bị ấ m t d u t nguyên nhân mữliệ ừ ất điện đột xuất là r t cao ấ
Công c h ụ ộtrợ “ ViteJS” Để hộ trợ xây dựng build Fontend nhóm em sử dụng Vitejs version 4 để tối ưu nhất
Vite là một công cụ xây dựng và máy chủ phát triển front end, mang ý nghĩa "nhanh", được thiết kế để mang đến trải nghiệm phát triển nhanh chóng, nhẹ nhàng và đơn giản Nó phục vụ mã trong quá trình phát triển, đóng gói tệp cho sản xuất và cho phép tích hợp dễ dàng với các khung và thư viện JavaScript như Vue, React, Preact và Svelte.
Vite 4 đã trải qua nhiều cải tiến trong hai năm qua, mang đến nhiều tính năng mới và cải tiến đáng chú ý Phiên bản này cung cấp nhiều phím tắt giao diện dòng lệnh hơn, cho phép người dùng dễ dàng truy cập thông tin (nhấn h trong Vite 4 để xem danh sách phím tắt) Ngoài ra, Vite 4 hỗ trợ Safari 14, mở rộng khả năng tương thích với ES2020 và cung cấp hỗ trợ gói vá khi đóng gói trước các phần phụ thuộc, cùng với các thông báo lỗi được cải thiện trong SSR.
- Để cài đặt được Vitejs chúng ta c n b t bu c ph i cài dầ ắ ộ ả ặt Node.js (16+) và NPM
- Khi đã cài đặt xong Node.js (16+) và NPM ta m windowpowershell ở trong thư mục lavarel nhập
- “Npm install” để cài đặt Vitejs
Công c h ụ ộtrợ React Developer Tool “ ”
Vậy React Developer Tool là gì
React Developer Tools là một công cụ mạnh mẽ giúp bạn kiểm tra và chỉnh sửa các thành phần React, quản lý props và state, cũng như xác định vấn đề về hiệu suất của ứng dụng Bài viết này sẽ hướng dẫn bạn cách cài đặt React Developer Tools để sử dụng hiệu quả trong quá trình phát triển ứng dụng React của bạn.
Cách cài dặt React Developer Tool:
- Để cài đặt React Developer Tool ta vào cửa hàng extension Chrome và tìm extension React Developer Tool “ ”
- Sau khi tìm được ta ấn “thêm vào Chrome” để add được extension vào google
- Khi đó React Developer Tool đã được cài đặt thành công
- Đây là một extension để phục vụ việc develope react Nó cho phép b n có ạ thể xem được các c u trúc cấ ủa các component
After installing this extension, you'll notice a new tab named "React" in Chrome DevTools This tab will display the Root Component of React that has been rendered on the page, along with the completed rendering of its child components.
- Khi select m t trong các component trên tree, b n có th xem và s a các ộ ạ ể ử props cũng như state hiện tại của nó trên thanh điều khiển bên ph i ả
Ngoài ra, bạn cũng có thể inspect các components y như các bạn inspect để xem CSS của các th HTML vẻ ậy.
Cách cài dặt “ Redux DevTool : ”
- Để cài đặt Redux DevTool ta vào c a hàng extension Chrome và tìm ử extension “Redux DevTool Tool ”
- Sau khi tìm được ta ấn “thêm vào Chrome” để add được extension vào google
- Khi đó Redux DevTool đã được cài đặt thành công
GIAO DIỆN CỦA WEBSITE
Giao Diện Đăng Nhập
Hình 4.1 Giao diện đăng nhập
Giao Diện Đăng Ký
Hình 4.1 Giao diện đăng ký
Giao Diện Trang Chủ
Hình 4.3 Giao di n trang ch ệ ủ
Giao Diện Trang Sản Phẩm
Hình 4.4 Giao di n trang s n ph m ệ ả ẩ
Giao Diện Trang Danh Mục Sản Phẩm
Hình 4.5 Giao di n danh m c s n ph m ệ ụ ả ẩ
Giao Diện Giỏ Hàng
Hình 4.6 Giao di n gi hàng ệ ỏ