Đồ án web Đề tài xây dựng website bán thiết bị Điện tử

Việc xây dựng giao diện website bán thiết bị điện tử là một yêu cầu quantrọng trong thị trường thương mại điện tử ngày nay.. Chúng em đã áp dụng các nguyên tắc thiết kế giao diện sáng tạ

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN

KHOA KỸ THUẬT MÁY TÍNH VÀ ĐIỆN TỬ

ĐỒ ÁN WEB

ĐỀ TÀI: Xây dựng website bán thiết bị điện tử

Sinh viên thực hiện : NGUYỄN ĐÌNH KHÁNH

Giảng viên hướng dẫn : ThS.NGUYỄN NGỌC HUYỀN TRÂN

Đà nẵng, tháng 6 năm 2024

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN

KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN CƠ SỞ 1

Xây dựng website bán thiết bị điện tử

Đà Nẵng, tháng 6 năm 2024

MỞ ĐẦU

Chúng em xin trân trọng gửi đến quý thầy cô báo cáo về đồ án xây dựnggiao diện website bán thiết bị điện tử Báo cáo này tập trung trình bày quá trìnhnghiên cứu và phát triển giao diện website nhằm đáp ứng nhu cầu mua sắm trựctuyến của khách hàng

Việc xây dựng giao diện website bán thiết bị điện tử là một yêu cầu quantrọng trong thị trường thương mại điện tử ngày nay Với sự phát triển mạnh mẽcủa công nghệ thông tin và xu hướng mua sắm trực tuyến ngày càng tăng, việctạo ra một giao diện website hấp dẫn và tiện lợi là yếu tố quyết định để thu hút vàgiữ chân khách hàng Trong báo cáo này, chúng em sẽ trình bày chi tiết về quátrình nghiên cứu, phân tích yêu cầu, thiết kế và triển khai giao diện website bánthiết bị điện tử Chúng em đã áp dụng các nguyên tắc thiết kế giao diện sáng tạo,tối ưu trải nghiệm người dùng và tạo ra một trang web dễ sử dụng và hấp dẫn.Đồng thời, chúng em cũng đã nghiên cứu các công nghệ và công cụ phát triểnweb để đảm bảo tính linh hoạt và tương thích trên nhiều nền tảng Chúng em hyvọng rằng báo cáo này sẽ mang lại cái nhìn tổng quan về quy trình xây dựng giaodiện website bán thiết bị điện tử và đóng góp vào việc hiểu rõ hơn về lĩnh vựcthương mại điện tử Đồng thời, chúng em cũng mong rằng báo cáo này sẽ đạtđược sự đánh giá và phản hồi tích cực từ phía quý thầy cô Xin chân thành cảm

ơn sự quan tâm và hỗ trợ của quý thầy cô trong quá trình thực hiện đồ án này

em còn nhiều thiếu sót, rất mong nhận được sự góp ý và nhận xét từ quý thầy cônhằm hoàn thiện tốt đề tài này, từ đó giúp chúng em làm nguồn kiến thức nền ápdụng vào công việc Chúng em xin chân thành cảm ơn quý thầy cô

NHẬN XÉT (Của giảng viên hướng dẫn)

Ụ Ụ

MỞ ĐẦU 3

LỜI CẢM ƠN 4

CHƯƠNG 1GIỚI THIỆU 9

1.1 T ỔNG QUAN 9

1.1.1 Tổng quan đề tài 9

1.1.2 Lý do chọn đề tài 9

1.2 N GÔN NGỮ CÔNG CỤ HỖ TRỢ , .9

1.3 C ẤU TRÚC ĐỒ ÁN 10

CHƯƠNG 2PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 11

2.1 P HÂN TÍCH YÊU CẦU 11

2.1.1 Yêu cầu của người dùng 11

2.1.2 Yêu cầu chức năng 11

2.1.3 Yêu cầu phi chức năng 11

2.1.4 Yêu cầu hệ thống 12

2.2 T HIẾT KẾ 12

2.2.1 Thiết kế giao diện 12

CHƯƠNG 3CÀI ĐẶT VÀ KẾT QUẢ THỨC NGHIỆM 16

3.1 C ÀI Đ ẶT 16

3.2 K ẾT QUẢ THỰC NGHIỆM 16

CHƯƠNG 4KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 20

4.1 K ẾT LUẬN 20

4.2 H ƯỚNG PHÁT TRIỂN 20

DANH MỤC HÌNH

Hình 1 Bản thiết kế trang chủ 12

Hình 2 Bản thiết kế trang chủ (tt) 13

Hình 3 Bản thiết kế trang ô điền thông tin 14

Hình 4 Bản thiết kế trang cửa hàng 15

Hình 5 Trang chủ 16

Hình 6 Trang Đề Xuất 16

Hình 7 Trang gợi ý 17

Hình 8 Trang gợi ý(tt) 17

Hình 9 Trang thông tin 17

Hình 10 Trang địa chỉ 18

Hình 11 Trang giỏ hàng 19

Hình 12 Code trang chủ 20

Hình 13 Code trang đề xuất 20

Hình 14 Code trang gợi ý 21

Hình 15 Code trang giỏ hang 21

Hình 16 Code trang giới thiệu 22

DANH MỤC CỤM TỪ VIẾT TẮT

Chương 1 GIỚI THIỆU

1.1 Tổng quan

1.1.1 Tổng quan đề tài

Lĩnh vực thương mại điện tử và mua sắm trực tuyến đang ngày càng pháttriển với sự gia tăng của công nghệ và sự tiện lợi của việc mua sắm trực tuyến.Trong lĩnh vực này, xây dựng Website thiết bị điện tử là một phần quan trọngnhằm cung cấp trải nghiệm mua sắm thuận tiện, đáng tin cậy và hấp dẫn chokhách hàng Bán thiết bị điện tử là một thị trường tiềm năng có thể khai thác vàđầy cạnh tranh, đòi hỏi sự chuyên nghiệp và khả năng tạo ra giá trị để thu hút vàgiữ chân khách hàng Và việc xây dựng một website thân thiện với người kháchhàng là một nhu cầu cần thiết cho mỗi cửa hàng và doanh nghiệp Nó không chỉgiúp người dùng tiết kiệm thời gian và công sức trong việc mua sắm những món

đồ yêu thích, mà còn tạo cơ hội kinh doanh và tiếp thị hiệu quả cho các cửa hàngkinh doanh

1.1.2 Lý do chọn đề tài

Có một số lý do mà đề tài này hấp dẫn và đáng được nghiên cứu: Nhu cầu thị trường: Thị trường mua sắm trực tuyến đang trở nên rầm rộ.Nhu cầu mua sắm online đang được giới trẻ yêu thích và xem nó như là một xuhướng

Công nghệ hiện đại: Việc phát triển website bán thiết bị điện tử tích hợpnhiều công nghệ tiên tiến giúp lưu trữ và quản lí dữ liệu của người dùng tốt hơn.Điều này bao gồm tìm kiếm thuận tiện, thanh toán trực tuyến, tích hợp đánh giá

và nhận xét từ người dùng, và quản lý đơn hàng

Tiện ích và tiết kiệm thời gian: Một website có giao diện được thiết kế tối

ưu nhất cho khách hàng, mang lại một cảm giác mua sắm hoàn toàn mới lạ.Khách hang có thể dễ dàng duyệt qua danh mục sản phẩm, tìm kiếm và đặt hàng

từ nhà mà không cần đi đến cửa hàng truyền thống

Quản lý dễ dàng: Giao diện website bán thực phẩm có thể tích hợp cáctính năng quản lý đơn giản như quản lý sản phẩm, đơn hàng, khách hàng Điềunày giúp các cửa hàng dễ dàng theo dõi hoạt động kinh doanh và thúc đẩy quytrình quản lý hiệu quả

Tổng hợp lại, xây dựng giao diện website thiết bị điện tử là một đề tài hấpdẫn vì tiềm năng kinh doanh, tính phổ biến và tiện ích của nó Nó cung cấp mộtmôi trường mua sắm an toàn và tiện lợi cho khách hàng, và một mô hình kinhdoanh cho cách chủ cửa hàng

1.2 Ngôn ngữ, công cụ hỗ trợ

HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu sử dụng

để xây dựng và cấu trúc các trang web Nó được sử dụng để định dạng và hiển thịcác yếu tố trên trang web, bao gồm văn bản, hình ảnh, liên kết, đầu mục, chúthích, bảng, biểu đồ, video và nhiều thành phần khác HTML sử dụng cú phápdựa trên thẻ (tag-based syntax) để xác định cách các yếu tố trên trang web được

hiển thị và tương tác với nhau Mỗi yếu tố được bao quanh bởi các thẻ mở vàđóng

CSS (Cascading Style Sheets) là một ngôn ngữ đánh dấu được sử dụng để

mô tả và định dạng giao diện và bố cục của một trang web Nó cho phép bạn ápdụng các kiểu và quy tắc định dạng cho các phần tử HTML trên trang web, nhưmàu sắc, kích thước, khoảng cách, đường viền, phông chữ và các hiệu ứng khác.CSS hoạt động bằng cách áp dụng các quy tắc định dạng vào các phần tử HTMLthông qua các selector (bộ chọn) Bằng cách chọn các phần tử HTML hoặc nhómphần tử, bạn có thể áp dụng các kiểu và thuộc tính tương ứng CSS cung cấp một

cú pháp đơn giản và linh hoạt để xác định các quy tắc định dạng

JavaScript: là một ngôn ngữ lập trình kịch bản nó được dùng rộng rãi chocác trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đốitượng nằm sẵn trong các ứng dụng Nó vốn được phát triển bởi Brendan Eich tạiHãng truyền thong Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thànhLiveScript, và cuối cùng thành JavaScript

Font Awesome là một thư viện biểu tượng và biểu tượng vector miễn phí và

mã nguồn mở được sử dụng rộng rãi trên web Được phát triển bởi Dave Gandyvào năm 2012, Font Awesome cung cấp một bộ sưu tập các biểu tượng và biểutượng vector đa dạng và linh hoạt, từ các biểu tượng cơ bản như biểu tượng ngườidùng và biểu tượng địa điểm đến các biểu tượng xã hội và biểu tượng trình duyệtweb Trang web Font Awesome cung cấp một cách thuận tiện để tải xuống vàtích hợp biểu tượng vào các dự án web của bạn Bạn có thể tìm kiếm và chọn từhàng nghìn biểu tượng có sẵn, sau đó sao chép mã HTML hoặc CSS để sử dụngtrong mã của bạn Font Awesome cũng cung cấp các tùy chọn tùy chỉnh để điềuchỉnh kích thước, màu sắc và kiểu dáng của biểu tượng

1.3 Cấu trúc đồ án

Báo cáo bao gồm các 4 chương như sau:

Chương 1: Tổng quan về đề tài như lý do chọn đề tài, các sản phẩm liênquan Giới thiệu các công cụ, ngôn ngữ đã sử dụng trong quá trình xây dựngwebsite Đồng thời giới thiệu về cấu trúc của bản báo cáo đồ án

Chương 2: Phân tích và trình bày những yêu cầu của hệ thống bao gồm:yêu cầu người dung, yêu cầu chức năng, phi chức năng và yêu cầu hệ thống Bêncạnh đó mô tả thiết kế của hệ thống về giao diện có chứa các hình ảnh và giảithích

Chương 3: Môi trường cài đặt, công cụ và kết quả đạt được gồm hình ảnh

và giải thích

Chương 4: Đánh giá chung về đề tài: các kết quả chính đạt được, mức độđáp ứng theo yêu cầu đề ra Trên cơ sở đó đưa ra những đề xuất, định hướng pháttriển đề tài trong tương lai

Chương 2 PHÂN TÍCH VÀ THIẾT

KẾ HỆ THỐNG

2.1 Phân tích yêu cầu

2.1.1 Yêu cầu của người dùng

Với vai trò là người dùng, tôi muốn thêm một sản phẩm đã chọn vào giỏhang (Chức năng thêm sản phẩm vào giỏ hàng)

Với vai trò là người dùng, tôi muốn xem nội dung của giỏ hàng và có khảnăng chỉnh sửa số lượng hoặc xóa sản phẩm, kiểm tra tổng số tiền của giỏ hàngtrước khi thanh toán (Chức năng xem và chỉnh sửa giỏ hàng)

Với vai trò là người dùng, tôi muốn tiến hành thanh toán và cung cấpthông tin giao hàng và thanh toán, chọn phương thức thanh toán ưu thích và nhậpthông tin cần thiết (Chức năng thanh toán)

Với vai trò là người dùng, tôi muốn có thể đánh giá và nhận xét cho cácsản phẩm(Chức năng đánh giá và nhận xét sản phẩm)

Với vai trò là người dùng tôi muốn xem thêm những sản đã ẩn đi vì lí dolàm gọn trang web(Chức năng xem thêm)

2.1.2 Yêu cầu chức năng

Từ bảng phân tích yêu cầu của người dùng ở trên, hệ thống có các chứcnăng cơ bản sau:

Thêm vào giỏ hàng: Người dùng có thể thêm sản phẩm vào giỏ hàng bằngcách ấn nút thêm vào giỏ hàng

Xem giỏ hang: Người dùng có thêm xem giỏ hang bằng cách ấn vào biểutượng giỏ hàng phía trên cùng của trang web

Thanh toán: Chức năng này cho phép người dùng thanh toán đơn hàng quamaster card

Xem thêm: người dùng có thể xem thêm sản phẩm đã bị ẩn đi vì lí do tạo

sự ngăn nắp cho trang web

2.1.3 Yêu cầu phi chức năng

Ngoài ra hệ thống cần có những yêu cầu phi chức năng sau:

Đảm bảo chất lượng thiết bị: Hệ thống cần có các quy trình kiểm soát chấtlượng và đảm bảo chất lượng của thiết bị Các tiêu chuẩn về việc lưu trữ, vậnchuyển và bảo quản thiết bị cần được tuân thủ

Tiêu chuẩn và quy định: Hệ thống cần tuân thủ các tiêu chuẩn và quy địnhliên quan đến bán hàng và thiết bị, như quy định về quảng cáo, quy định về bảo

vệ người tiêu dùng,

Khả dụng: Giao diện người dùng cần được thiết kế sao cho dễ sử dụng vàthan thiện với người dùng Hệ thống cần hỗ trợ đa nền tảng, đảm bảo tương thíchtrên các thiết bị di động và trình duyệt web khác nhau

Hiệu suất: Hệ thống cần đảm bảo hiệu suất cao để xử lý đồng thời nhiềuyêu cầu từ người dùng mà không gây trễ hệ thống Thời gian tải trang web và xử

lý các yêu cầu tìm kiếm, đặt hàng và thanh toán cần được tối ưu

Độ tin cậy: Hệ thống cần đảm bảo ổn định và đáng tin cậy để người dùng

có thể truy cập và mua hàng mọi lúc Backup dữ liệu định kỳ và khả năng phụchồi sau sự cố là cần thiết để đảm bảo không mất dữ liệu quan trọng

2.1.4 Yêu cầu hệ thống

Website có thể hoạt động trên tất cả hệ điều hành và hầu hết các trình duyệt bao gồm: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera và Internet Explorer 10 trở lên Website yêu cầu một bộ nhớ tạm thời tối thiểu từ 2 gigabyte và độ phân giải màn hình khuyến khích 1024 pixels chiều rộng và 768 pixels chiều dài

2.1 Thiết kế

2.1.1 Thiết kế giao diện

Các giao diện đã thiết kế

Hình 1 Bản thiết kế trang chủ

Hình 1 Mô tả trang chủ của trang web Với thanh menu ở phía trên vớilogo bên trái , tìm kiếm và các chức năng khác như giỏ hàng,chọn địa chỉ nhậnhàng,………

Hình 2 Bản thiết kế trang chủ (tt)

Hình 2 Mô tả phần tiếp theo của trang chủ Trong đó phần đầu giởi thiệucác loại thiết bị điện tử nổi bật như điện thoại, laptop, PC,… Phần tiếp theodung để hiển thị các dịch vụ tiện ích.Và phần cuối cùng bán các sản phẩm cụ thể

Hình 3 Bản thiết kế trang ô điền thông tin

Hình 3 Mô tả phần điện thông tin địa chỉ giao hàng,gồm 4 ô điền thông tin

để biết chính xác địa chỉ cần giao hàng.Phía trên cùng bên phải là nút thoát khỏi phần điền thông tin,dưới cùng là nút xác nhận để xác nhận thông tin địa chỉ

Hình 4 Bản thiết kế trang cửa hàng

Hình 4 Mô tả phần giỏ hàng Phía trên là nút để thoát khỏi hàng và tiêu đềcủa giỏ hàng Sát dưới là các cột thông tin cơ bản một sản phẩm gồm:Sản phẩm, giá,SL,Chọn Phía dưới cột là các sản phẩm cùng với những thông tin tương ứng với các cột.Dưới cùng là nút xác nhận để mua hàng

Chương 3 XÂY DỰNG WEBSITE

Hình 7 Trang gợi ý

Hình 8 Trang gợi ý(tt)

Hình 7 và Hình 8 Trình bày trang gợi ý của website,gợi ý những sảnphẩm tốt và phổ biến trên thị trường giúp khách hang có thể lựa chọn sản phẩmmột cách dễ dàng hơn.Khách có thể bấm vào nút xem them để có nhiều gợi ýkhác

Hình 9 Trang thông tin

Hình 9 cung cấp thông tin về website và cửa hàng

Hình 10 Trang địa chỉ

Hình 10 Trình bày trang website địa chỉ,dùng để khách hàng điền địa chỉnhận hàng gồm Tỉnh/Thành phố,Quận/Huyện,Phường/Xã,số nhà tên đường

Hình 11 Trang giỏ hàng

Hình 11 Trình bày trang website giỏ hàng,cung cấp thông tin những sản phẩmkhác hàng đã thêm vào giỏ hàng bao gồm tên và hình ảnh sản phẩm, giá tiền, SL

và tổng tiền các sản phẩm

Chương 4 TRIỂN KHAI XÂY DỰNG WEBSITE

Code trên phần mềm Visual Code:

Hình 12 Code trang chủ

Hình 14 Code trang gợi ý

Hình 15 Code trang giỏ hang

Hình 16 Code trang giới thiệu

Chương 5 KẾT LUẬN VÀ

HƯỚNG PHÁT TRIỂN

5.1 Kết luận

Trong quá trình xây dựng giao diện website bán thiết bị điện tử, chúng tôi

đã đạt được nhiều thành tựu đáng kể và học được rất nhiều kiến thức và kinhnghiệm quý giá Dưới đây là tổng kết những điểm đáng chú ý:

Hiểu biết và ứng dụng thành thạo các ngôn ngữ và framework cơ bản nhưHTML, CSS và Javascript để xây dựng giao diện web chuyên nghiệp và hấp dẫn Phát triển khả năng thiết kế giao diện web đẹp mắt, tương thích trên nhiềuthiết bị và tạo trải nghiệm người dùng tốt

Tích hợp các tính năng và phương tiện truyền thông như biểu mẫu đăng ký,đặt hàng, hình ảnh và video để tăng tính tương tác và thu hút khách hàng Tìm hiểu về lĩnh vực bán thiết bị điện tử trực tuyến và áp dụng kiến thức đểtạo niềm tin, thu hút khách hàng và tăng doanh số bán hàng

Và các kỹ năng mềm như:

Kỹ năng lập trình và logic: Rèn luyện khả năng lập trình và logic thông quaviệc tìm hiểu và áp dụng các ngôn ngữ và framework trong việc xây dựng giaodiện web

Quản lý thời gian: Xây dựng kỹ năng quản lý thời gian hiệu quả để hoànthành công việc theo tiến độ

Tự học và nghiên cứu: Phát triển khả năng tự học và nghiên cứu để giảiquyết các thách thức và tìm hiểu thêm về các công nghệ và xu hướng mới tronglĩnh vực phát triển web

Kỹ năng giao tiếp và trình bày: Phát triển khả năng giao tiếp và trình bàythông tin một cách rõ ràng, logic và hấp dẫn

5.2 Hướng phát triển

Dựa trên kết quả và kinh nghiệm thu được từ đồ án này, chúng tôi đã xácđịnh một số hướng phát triển tiếp theo để nâng cao kiến thức và mở rộng chứcnăng của giao diện website bán thiết bị điện tử Dưới đây là những hướng pháttriển mà chúng tôi đề xuất:

Tăng cường tính năng và trải nghiệm người dùng: Tiếp tục nghiên cứu và

áp dụng các tính năng nâng cao như tìm kiếm nâng cao, bộ lọc thông minh và đềxuất sản phẩm dựa trên hành vi mua hàng của người dùng Điều này sẽ giúp cảithiện trải nghiệm người dùng, tăng khả năng tìm kiếm và thu hút khách hàng Tích hợp thanh toán trực tuyến và quản lý đơn hàng: Mở rộng chức năngcủa giao diện để cho phép khách hàng thực hiện thanh toán trực tuyến an toàn vàthuận tiện Đồng thời, phát triển hệ thống quản lý đơn hàng để theo dõi và xử lýcác đơn hàng một cách hiệu quả

Tối ưu hóa trang web cho SEO: Nghiên cứu và áp dụng các kỹ thuật tối

ưu hóa công cụ tìm kiếm (SEO) để cải thiện thứ hạng trang web trên các công cụ