lOMoARcPSD|35973522 BẢN THUYẾT TRÌNH NGUYÊN
Xin chào cô và các bạn, hôm nay em xin đại diện nhóm em báo cáo đồ án: Xây dựng website linh kiện máy tính TNL Store
Trong thời đại kỹ thuật số ngày nay, việc mua sắm trực tuyến đã trở thành một phần không thể thiếu của
cuộc sống của chúng ta. Mua sắm trực tuyến đã tiết kiệm thời gian và công sức của chúng ta, cung cấp
cho chúng ta sự tiện lợi và linh hoạt hơn để mua sắm và tìm kiếm thông tin sản phẩm. Và website thương
mại điện tử chính là nơi cung cấp cho chúng ta tất cả những tiện ích này.
Website thương mại điện tử cung cấp cho các doanh nghiệp một nền tảng để giới thiệu sản phẩm của họ
và bán hàng trực tuyến. Điều này cho phép các doanh nghiệp tiếp cận đến khách hàng trên toàn thế giới,
tăng doanh số bán hàng và tăng khả năng cạnh tranh trên thị trường.
Bên cạnh đó, website thương mại điện tử cũng cung cấp cho khách hàng nhiều lợi ích hơn so với việc
mua hàng truyền thống. Khách hàng có thể dễ dàng tìm kiếm sản phẩm mà họ đang cần thông qua các
công cụ tìm kiếm trên website, xem các thông tin chi tiết về sản phẩm, so sánh giá cả và đặt hàng một
cách nhanh chóng và thuận tiện.
Ngoài ra, website thương mại điện tử còn cho phép các doanh nghiệp tiết kiệm chi phí vận hành so với
việc mở cửa hàng truyền thống. Các doanh nghiệp không cần phải thuê mặt bằng và trang trí cửa hàng, và
có thể tiết kiệm chi phí nhân sự và vận chuyển hàng hóa.
Xin chào cô và các bạn, hôm nay nhóm em xin giới thiệu với cô và các bạn về TNL Store - một trang web
chuyên cung cấp linh kiện máy tính chất lượng cao. TNL Store là một nơi lý tưởng cho những người đam
mê công nghệ và muốn tìm kiếm những sản phẩm linh kiện máy tính tốt nhất để nâng cao hiệu suất của máy tính của mình.
Trang web TNL Store được thiết kế với giao diện thân thiện và dễ sử dụng, giúp người dùng có thể tìm
kiếm và lựa chọn sản phẩm một cách dễ dàng. Đặc biệt, website còn tích hợp các công nghệ mới nhất để
cải thiện trải nghiệm của người dùng.
Một trong những công nghệ đáng chú ý được sử dụng trên TNL Store là HTML, CSS và JavaScript.
HTML được sử dụng để tạo cấu trúc và định dạng nội dung trên trang web. CSS được sử dụng để thiết kế
giao diện và trang trí cho trang web, đồng thời tạo ra các hiệu ứng hình ảnh động. JavaScript được sử
dụng để tạo ra các tính năng tương tác trên trang web như các trò chơi, hiệu ứng hình ảnh động và các công cụ khác.
Ngoài ra, TNL Store còn tích hợp các công nghệ khác như Bootstrap, một framework CSS phổ biến để
xây dựng các trang web đáp ứng, giúp website hiển thị tốt trên mọi thiết bị từ máy tính đến điện thoại di động.
TNL Store thiết kế 3 pages chính: Login/Registration Form, Giao diện chính và Giỏ hàng
Downloaded by Di?p ??ng Ng?c (tanphatthpt@gmail.com) lOMoARcPSD|35973522 TỊNH
Giao diện Login/Registration của TNL Store được thiết kế đơn giản và dễ sử dụng. Nó bao gồm hai phần
chính: phần đăng nhập và phần đăng ký tài khoản.
Phần đăng nhập có giao diện gồm một khung đăng nhập trên nền trắng với hai ô nhập thông tin đăng nhập
và một nút Đăng nhập. Hai ô nhập thông tin đăng nhập bao gồm ô nhập Tên đăng nhập và ô nhập Mật
khẩu. Ô nhập Tên đăng nhập được thiết kế để người dùng nhập tên đăng nhập của mình và ô nhập Mật
khẩu để người dùng nhập mật khẩu của mình.
Nút Đăng nhập nằm phía dưới các ô nhập thông tin đăng nhập. Khi người dùng nhấn vào nút này, hệ
thống sẽ kiểm tra thông tin đăng nhập và đăng nhập người dùng vào tài khoản của mình.
Phần đăng ký tài khoản cũng có giao diện tương tự như phần đăng nhập, bao gồm một khung đăng ký trên
nền trắng với các ô nhập thông tin đăng ký và một nút Đăng ký. Các ô nhập thông tin đăng ký bao gồm
Họ tên, Địa chỉ email, Tên đăng nhập và Mật khẩu. Nút Đăng ký nằm phía dưới các ô nhập thông tin đăng
ký. Khi người dùng nhấn vào nút này, hệ thống sẽ kiểm tra thông tin và tạo một tài khoản mới cho người dùng.
Cả phần đăng nhập và đăng ký đều được thiết kế với các thông báo lỗi hiển thị khi người dùng nhập sai
thông tin. Các thông báo này được hiển thị ngay bên dưới các ô nhập thông tin và cung cấp cho người
dùng thông tin chi tiết về lỗi và cách khắc phục.
Tổng quan lại, giao diện Login/Registration của TNL Store được thiết kế đơn giản và dễ sử dụng, với các
tính năng cơ bản để đăng nhập và đăng ký tài khoản. Giao diện này cũng có tích hợp các thông báo lỗi
hiển thị để giúp người dùng dễ dàng khắc phục các lỗi khi nhập thông tin sai.
Downloaded by Di?p ??ng Ng?c (tanphatthpt@gmail.com) lOMoARcPSD|35973522 PHI LÍP
Đây là một trang web thương mại điện tử bán linh kiện máy tính và phụ kiện, với giao diện được thiết kế
đơn giản và dễ sử dụng. 1. Header:
Phần header của trang web bao gồm logo của TNL Store ở góc trái cùng, các liên kết đến các trang con
của trang web như Giới thiệu, Sản phẩm, Tin tức, Liên hệ, Tài khoản, giỏ hàng và thanh tìm kiếm. Thanh
tìm kiếm cho phép người dùng tìm kiếm sản phẩm theo tên hoặc mô tả. 2. Banner quảng cáo:
Ở phía trên cùng của trang web là banner quảng cáo với hình ảnh sản phẩm nổi bật và mô tả ngắn gọn về sản phẩm. 3. Sản phẩm nổi bật:
Phần này hiển thị các sản phẩm nổi bật của TNL Store, bao gồm hình ảnh, tên sản phẩm, giá bán và đánh giá sao. 4. Danh mục sản phẩm:
Phía bên trái của trang web là danh mục sản phẩm, cho phép người dùng lọc sản phẩm theo loại, thương hiệu và giá bán. 5. Sản phẩm mới nhất:
Phần này hiển thị các sản phẩm mới nhất của TNL Store, bao gồm hình ảnh, tên sản phẩm, giá bán và đánh giá sao.
6. Các bài đăng mới nhất:
Ở phía dưới cùng của trang web là các bài đăng mới nhất của TNL Store về các sản phẩm, khuyến mãi
hoặc tin tức về công nghệ. 7. Footer:
Phần footer của trang web chứa các liên kết đến các trang con khác của trang web, liên kết đến các trang
mạng xã hội của TNL Store và thông tin liên hệ.Tổng quan lại, giao diện chính của TNL Store được thiết
kế đơn giản, dễ sử dụng và thân thiện với người dùng. Các sản phẩm và bài đăng được sắp xếp rõ ràng và
dễ dàng để tìm kiếm. Ngoài ra, trang web cũng tích hợp liên kết đến các trang mạng xã hội và thông tin
liên hệ, giúp người dùng dễ dàng kết nối và tìm hiểu thêm về TNL Store.
Downloaded by Di?p ??ng Ng?c (tanphatthpt@gmail.com) lOMoARcPSD|35973522 NGUYÊN
Trang web TNL Store cung cấp cho người dùng một phần Giỏ hàng, cho phép người dùng thêm các sản
phẩm muốn mua vào giỏ hàng và thực hiện các thao tác liên quan đến giỏ hàng như xem sản phẩm, xóa
sản phẩm và cập nhật số lượng sản phẩm trong giỏ hàng. Phần Giỏ hàng được thiết kế đơn giản và dễ sử
dụng, giúp người dùng dễ dàng quản lý các sản phẩm mua của mình trên trang web.
Phía trên cùng bên phải của trang web, người dùng có thể thấy nút Giỏ hàng để truy cập vào phần quản lý
giỏ hàng. Khi nhấp vào nút này, phần Giỏ hàng sẽ được hiển thị với các sản phẩm đã được thêm vào.
Mỗi sản phẩm trong giỏ hàng được hiển thị với hình ảnh, tên sản phẩm, giá bán, số lượng và tổng giá tiền.
Người dùng có thể dễ dàng xem thông tin chi tiết của sản phẩm bằng cách nhấp vào tên sản phẩm.
Ngoài ra, người dùng có thể thay đổi số lượng sản phẩm trong giỏ hàng bằng cách nhập số lượng mới vào
ô Số lượng và nhấn nút Cập nhật. Nếu người dùng muốn xóa sản phẩm khỏi giỏ hàng, họ có thể nhấn nút
Xóa để loại bỏ sản phẩm đó khỏi giỏ hàng.
Sau khi đã thực hiện các thao tác trên giỏ hàng, người dùng có thể nhấp vào nút Tiến hành thanh toán để
hoàn tất quá trình mua hàng. Trang web sẽ chuyển hướng người dùng đến trang thanh toán để nhập thông
tin vận chuyển và thanh toán.
Giỏ hàng của trang web TNL Store được thiết kế đơn giản, dễ sử dụng và cung cấp đầy đủ các tính năng
quản lý giỏ hàng cần thiết để người dùng có thể dễ dàng quản lý các sản phẩm mua của mình trên trang web.
Downloaded by Di?p ??ng Ng?c (tanphatthpt@gmail.com) lOMoARcPSD|35973522 TỊNH
Để phân tích chi tiết phần thiết kế trang thanh toán của website TNL Store, tôi sẽ đi vào từng phần của
trang đó và giải thích chức năng của từng phần đó.
1. Tiêu đề trang: "Thanh toán"
Tiêu đề trang "Thanh toán" nằm ở trung tâm của trang web và được hiển thị rõ ràng. Nó làm cho người
dùng dễ dàng nhận ra mục đích của trang web và tập trung vào quá trình thanh toán. 2. Thông tin đơn hàng
Phần thông tin đơn hàng hiển thị tên sản phẩm, số lượng sản phẩm, giá sản phẩm, giảm giá (nếu có) và
tổng giá trị đơn hàng. Nó cung cấp cho người dùng một cái nhìn tổng quan về đơn hàng của họ, giúp họ
kiểm tra xem thông tin đơn hàng có chính xác hay không. 3. Phương thức thanh toán
Phần phương thức thanh toán cung cấp cho người dùng một danh sách các phương thức thanh toán khác
nhau để họ lựa chọn. Hiện tại, trang web hỗ trợ thanh toán qua ví điện tử và thẻ tín dụng. Người dùng có
thể chọn phương thức thanh toán phù hợp với họ. 4. Thông tin giao hàng
Phần thông tin giao hàng cung cấp cho người dùng một form để nhập thông tin giao hàng. Nó yêu cầu
người dùng nhập tên, địa chỉ, thành phố, quốc gia, số điện thoại và email. Tất cả các trường này đều là bắt
buộc để người dùng có thể đặt hàng thành công. Nếu người dùng đã đăng nhập, thông tin giao hàng của
họ sẽ được tự động điền vào form này. 5. Nút "Thanh toán"
Nút "Thanh toán" được đặt ở cuối trang và có màu xanh lá cây rõ ràng. Nó làm cho người dùng dễ dàng
nhận ra nút để hoàn tất quá trình thanh toán.
Trang thanh toán của TNL Store có thiết kế đơn giản và dễ sử dụng. Các phần được sắp xếp một cách hợp
lý và tập trung vào việc cung cấp thông tin đơn hàng và phương thức thanh toán cho người dùng.
Downloaded by Di?p ??ng Ng?c (tanphatthpt@gmail.com) lOMoARcPSD|35973522 LÍP
1. Thuật toán hiển thị sản phẩm
Trang sản phẩm của TNL Store hiển thị các sản phẩm dưới dạng danh sách các hình ảnh và thông tin về
sản phẩm. Các sản phẩm được lấy từ cơ sở dữ liệu bằng một API và hiển thị trên trang web. Để hiển thị
sản phẩm, website sử dụng một thuật toán đơn giản, đó là lặp lại một vòng lặp để lấy thông tin sản phẩm
từ API và tạo HTML để hiển thị trên trang web.
2. Thuật toán thêm sản phẩm vào giỏ hàng
Khi người dùng nhấp vào nút "Thêm vào giỏ hàng" trên trang sản phẩm, website sẽ lưu trữ thông tin sản
phẩm vào cơ sở dữ liệu trên máy khách của người dùng bằng cách sử dụng Local Storage. Mỗi sản phẩm
sẽ được lưu trữ dưới dạng một đối tượng JSON, bao gồm thông tin về sản phẩm, số lượng sản phẩm và
giá tiền. Thuật toán thêm sản phẩm vào giỏ hàng rất đơn giản, chỉ cần thêm đối tượng sản phẩm vào danh
sách sản phẩm trong Local Storage.
3. Thuật toán xóa sản phẩm khỏi giỏ hàng
Khi người dùng nhấp vào nút "Xóa" trên giỏ hàng, website sẽ xóa sản phẩm đó khỏi danh sách sản phẩm
trong Local Storage. Thuật toán xóa sản phẩm khỏi giỏ hàng rất đơn giản, chỉ cần tìm đối tượng sản phẩm trong danh sách và xóa nó.
Tổng thể, website TNL Store sử dụng các thuật toán đơn giản để hiển thị, thêm và xóa sản phẩm. Điều
này giúp cho trang web được tối ưu hóa và hoạt động một cách nhanh chóng và hiệu quả.
Tóm lại, website TNL Store nói riêng và website thương mại điện tử nói chung đã trở thành một phần
không thể thiếu của cuộc sống và kinh doanh hiện đại. Nó cung cấp cho chúng ta sự tiện lợi, linh hoạt và
tiết kiệm chi phí, giúp cho các doanh nghiệp có thể tiếp cận đến khách hàng trên toàn thế giới và tăng
doanh số bán hàng. Vì vậy, việc tạo ra một website thương mại điện tử chất lượng và hiệu quả là rất quan
trọng đối với bất kỳ doanh nghiệp nào muốn thành công trên thị trường.
Downloaded by Di?p ??ng Ng?c (tanphatthpt@gmail.com)