Báo cáo thiết kế website bán linh kiện gearbd

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KỸ THUẬT CÔNG NGHỆ BÁO CÁO THIẾT KẾ WEBSITE BÁN LINH KIỆN GEARBD GVHD: Th.S NGUYỄN HỮU VĨNH SVTH: CAO ĐỨC MINH - 2024801030013 NGUYỄN HOÀNG NGỌC THỤY - 2024801030083 LỚP: D20KTPM01 B6NH DƯƠNG – 4/2020 0 TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KỸ THUẬT CÔNG NGHỆ BÁO CÁO THIẾT KẾ WEBSITE BÁN LINH KIỆN GEARBD GVHD: Th.S NGUYỄN HỮU VĨNH SVTH: CAO ĐỨC MINH - 2024801030013 NGUYỄN HOÀNG NGỌC THỤY - 2024801030083 LỚP: D20KTPM01 B6NH DƯƠNG – 4/2020 Mục Lụ 0 Mục Lục ii DANH MỤC H6NH ii MỞ ĐẦU CHƯƠNG KHẢO SÁT VÀ PHÂN TÍCH BÀI TỐN .3 1.1 Khảo sát toán 1.2 Phân tích chức toán CHƯƠNG THIẾT KẾ GIAO DIỆN .4 2.1 Giao diện trang chủ 2.2 Giao diện trang giới thiệu .6 2.3 Giao diện trang VGA .7 2.4 Giao diện trang Main 2.5 Giao diện trang Nguồn 2.6 Giao diện trang đăng nhập 10 2.7 Giao diện trang đăng ký 11 2.12 Giao diện chi tiết sản phẩm 14 CHƯƠNG THIẾT KẾ CHƯƠNG TR6NH 15 3.1 Sơ đồ tổng quát .15 3.1 Sơ đồ trang giới thiệu .16 3.1 Sơ đồ đăng nhập .17 3.1 Sơ đồ đăng ký 18 3.1 Sơ đồ chi tiết sản phẩm 19 KẾT LUẬN 20 Kết đạt 20 Việc chưa làm được: 20 Hướng phát triển đề tài .20 TÀI LIỆU THAM KHẢO .21 Tiếng Việt 21 Tiếng Anh 21 Websit Hình 2.1: Hình 2.2: 0 YHình 2.3: Hình 2.4: YHình 2.5: Hình 2.6: 10 YHình 2.7: .11 Hình 2.8: 12 YHình 2.9: 12 Hình 2.10: 13 YHình 2.11: 13 Hình 2.12: 14 YHình 3.1: 15 YHình 3.2: 16 YHình 3.3: 17 YHình 3.4: 18 YHình 3.5: 19 Y 0 L ỜI CẢM ƠN Trước tiên với tình cảm sâu sắc chân thành nhất, cho phép em bày tỏ lịng biết ơn đến Thầy/Cơ Trong suốt thời gian từ bắt đầu học tập môn thiết kế web đến nay, em nhận nhiều quan tâm, giúp đỡ quý Thầy Cô bạn bè Với lòng biết ơn sâu sắc nhất, em xin gửi đến Thầy NGUYỄN HỮU VĨNH truyền đạt vốn kiến thức quý báu cho chúng em suốt thời gian học tập mơn Nhờ có lời hướng dẫn, dạy bảo thầy nên tiểu luận em hồn thiện tốt đẹp Một lần nữa, em xin chân thành cảm ơn thầy – người trực tiếp giúp đỡ, quan tâm, hướng dẫn em hoàn thành tốt báo cáo thời gian qua Bài báo cáo kết thúc học phần thực khoảng thời gian gần tuần, nên không tránh khỏi thiếu sót , em mong nhận ý kiến đóng góp quý báu Thầy để kiến thức em lĩnh vực hoàn thiện đồng thời có điều kiện bổ sung, nâng cao ý thức Em xin chân thành cảm ơn! 0 MỞ ĐẦU Ngày nay, ứng dụng công nghệ xem yếu tố đóng vai trị quan trọng Giúp tiết kiệm đáng kể chi phí nhờ chi phí vận chuyển trung gian, chi phí giao dịch đặc biệt giúp tiết kiệm thời gian để người đầu tư vào hoạt động khác Hơn nữa, thương mại điện tử cịn giúp người tìm kiếm tự động theo nhiều mục đích khác nhau, tự động cung cấp thông tin theo nhu cầu sở thích người Giờ đây, người ngồi nhà để mua sắm thứ theo ý muốn website bán hàng mạng giúp ta làm điều Chính vậy, cơng nghệ mã nguồn mở trở nên ý tính Giá thành rẻ hỗ trợ nhiều mạng giúp ta nhanh chóng Thiết kế website bán hàng thân thiện dễ sử dụng với người dùng Đối với cửa hàng, việc quảng bá giới thiệu sản phẩm đến khách hàng điều cần thiết cho cửa hàng Khi cửa hàng kinh doanh khơng có website có nhiều hạn chế, khách hàng tham khảo sản phẩm mua hàng trực tiếp cửa hàng Những cửa hàng bán trực tiếp có thời gian mở cửa hạn chế địa điểm định, không thuận tiện cho khách hàng việc lại mua sản phẩm Tạo website, doanh nghiệp tương tác với khách hàng lúc, nơi, khơng cịn giới hạn khơng gian hay thời gian Thơng qua tiện ích website, khách hàng tương tác trực tiếp với doanh nghiệp, tìm hiểu sản phẩm Chính lí đó, em thực tiểu luận “THIẾT KẾ WEBSITE BÁN LINH KIỆN PC GEARBD cho công ty pc nhằm việc mua bán linh kiện pc trở nên thuận tiện hơn, người mua xem trước sản phẩm để nâng cao kỹ thiết kế thân 0 Chương Thiết kế chương trình CHƯƠNG KHẢO SÁT VÀ PHÂN TÍCH BÀI TỐN 1.1 Khảo sát toán CHƯƠNG Website cho phép phận có chức cửa hàng đưa sản phẩm lên website quản lý website đó, khách hàng đặt mua hàng website mà không cần đến cửa hàng 1.2 Phân tích chức tốn CHƯƠNG CHƯƠNG CHỨC NĂNG STT CHƯƠNG MÔ TẢ CHƯƠNG 6.CHƯƠNG Quản lý Khách Hàng CHƯƠNG Mỗi khách hàng quản lý thông tin sau: họ tên, địa chỉ, số điện thoại, ngày sinh, email , tên đăng nhập, mật thông qua việc đăng ký thành viên CHƯƠNG 9.CHƯƠNG 10 Quản lý Sản Phẩm CHƯƠNG 11 Tên sản phẩm, đơn giá, hình ảnh, chi tiết CHƯƠNG 12 CHƯƠNG 13 Hiển thị danh sách mặt hàng CHƯƠNG 14 Hiển thị danh sách mặt hàng theo loại khác để khách hàng xem, lựa chọn mua CHƯƠNG 15 CHƯƠNG 16 Tìm kiếm sản phẩm CHƯƠNG 17 Giúp khách hàng dễ dàng tìm kiếm sản phẩm theo ý muốn từ khóa CHƯƠNG 18 CHƯƠNG 19 Cập nhật sản phẩm CHƯƠNG 20 Hệ thống dựa vào thông số cần thiết để cập nhật sản phẩm CHƯƠNG 21 CHƯƠNG 22 Đăng nhập CHƯƠNG 23 Mỗi khách hàng đăng ký thành viên có tài khoản Khách hàng đăng nhập vào để mua hàng cộng điểm ưu đãi dành riêng cho khách hàng thân thiết CHƯƠNG 24 CHƯƠNG 25 Đăng ký CHƯƠNG 26 Khách hàng muốn đăng ký thành viên trang web.Khách hàng điền đầy 0 Chương Thiết kế chương trình thơng tin vào forrm có sẵn CHƯƠNG 27 CHƯƠNG 28 THIẾT KẾ GIAO DIỆN 2.1 Giao diện trang chủ Hình 2.1 Giao diện trang chủ 0 Chương Thiết kế chương trình - Ý nghĩa hoạt động: Trang cho phép người dùng xem thông tin sản phẩm ngồi cịn sử dụng menu ngang để sang trang khác, - Người dùng click vào mục để chọn chức muốn xem Trang chủ thiết kế với số icon động làm cho trang website trở nên sinh động CHƯƠNG 29 Trang web chia làm phần: CHƯƠNG 30 - Phần 1: Phần Header CHƯƠNG 31 - Phần 2: Góc phải header mục đăng nhập, đăng ký CHƯƠNG 32 - Phần 3: Menu ngang: Bao gồm mục: trang chủ, giới thiệu, danh mục sản phẩm Mỗi danh mục liên kết đến trang với nội dung khác CHƯƠNG 33 - Phần 4:Tìm kiếm sản phẩm CHƯƠNG 34 - Phần 5: Chạy hình ngang Marquee CHƯƠNG 35 - Phần 6: Ở chứa sản phẩm bán cửa hàng hiển thị trang chi tiết sản phẩm click chuột vào sản phẩm CHƯƠNG 36 - Phần 7: Footer CHƯƠNG 37 CHƯƠNG 38 0 Chương Thiết kế chương trình 38.1 Giao diện trang giới thiệu Hình 2.2 Giao diện trang giới thiệu - Ý nghĩa hoạt động: người dùng muốn biết cách thưc hoạt động trang website 0 Chương Thiết kế chương trình 41.2 Giao diện trang ĐĂNG KÝ Hình 2.7 Giao diện trang đăng kí - Ý nghĩa hoạt động: : Người dùng lick vào đăng ký chưa có tài khoản Điền đầy đủ thơng tin vào form tạo sẵn .( xem mặt hàng mà không cần đăng ký) CHƯƠNG 42 11 0 Chương Thiết kế chương trình 42.1 Giao diện trang HEADER TRANG CHỦ Hình 2.8 Giao diện trang header trang chủ 42.2 Giao diện trang HEADER GIỚI THIỆU Hình 2.9 Giao diện trang header giới thiệu 12 0 Chương Thiết kế chương trình 42.3 Giao diện trang HEADER SẢN PHẨM    - Hình 2.10 Giao diện trang header sản phẩm Ý nghĩa hoạt đông: Trang chi tiết sản phẩm giúp cho người dùng tiềm kiếm chọn sản phẩm cách tiện lợi 13 0 Chương Thiết kế chương trình 42.4 Giao diện trang trang FOOTER Hình 2.11 Giao diện trang Footer Ý nghĩa hoạt đông: Trang chi tiết sản phẩm giúp cho người dùng tìm hiểu thêm hotline, quyền trang website CHƯƠNG 43 CHƯƠNG 44 CHƯƠNG 45 CHƯƠNG 46 CHƯƠNG 47 CHƯƠNG 48 CHƯƠNG 49 CHƯƠNG 50 CHƯƠNG 51 CHƯƠNG 52 CHƯƠNG 53 CHƯƠNG 54 CHƯƠNG 55 CHƯƠNG 56 CHƯƠNG 57 CHƯƠNG 58 CHƯƠNG 59 CHƯƠNG 60 CHƯƠNG 61 CHƯƠNG 62 CHƯƠNG 63 CHƯƠNG 64 CHƯƠNG 65 CHƯƠNG 66 CHƯƠNG 67 CHƯƠNG 68 14 0 Chương Thiết kế chương trình CHƯƠNG 69 CHƯƠNG 70 70.1 Giao diện chi tiết sản phẩm Hình 2.12 Giao diện trang chi tiết sản phẩm 15 0 Chương Thiết kế chương trình Hình 2.13 Giao diện trang chi tiết sản phẩm 16 0 Chương Thiết kế chương trình Hình 2.14 Giao diện trang chi tiết sản phẩm - Ý nghĩa hoạt đông: Trang chi tiết sản phẩm giúp cho người dùng tìm hiểu thêm thơng tin chi tiết sản phẩm định mua.Thơng tin sản phẩm gồm có:tên sản phẩm, hình ảnh, chức thành phần , giá tiền 17 0 Chương Thiết kế chương trình CHƯƠNG 71 CHƯƠNG 72 THIẾT KẾ CHƯƠNG TR6NH 3.1 Sơ đồ tổng quát Hình 3.1 Sơ đồ tổng quát 18 0 Chương Thiết kế chương trình CHƯƠNG 73 19 0 Chương Thiết kế chương trình 3.2 Sơ đồ trang giới thiệu - Sơ đồ tóm gọi lại trang chủ web gồm có thành phầm chính: giới thiệu, sản phẩm, dăng nhập, đăng ký.Trong phầm sản phẩm có dịng sản phẩm Main, VGA, Nguồn Hình 3.2.Sơ đồ đăng ký thành viên - Sơ đồ thể cụ thể nội dung phía phần giới thiệu trang web gồm có nguồn gốc hình thành nên nhãn hiệu mặt hàng linh kiện, thành phầm tất sản phẩm, CHƯƠNG 74 20 0 Chương Thiết kế chương trình 3.3.Sơ đồ đăng nhập Hình 3.3.Sơ đồ đăng nhập - Sơ đồ thẻ nội dung bên phần đăng nhập gồm có : tên đăng nhập người dùng, mật CHƯƠNG 75 21 0 Chương Thiết kế chương trình CHƯƠNG 76 3.4 Sơ đồ đăng ký CHƯƠNG 77 CHƯƠNG 78 CHƯƠNG 79 CHƯƠNG 80 CHƯƠNG 81 CHƯƠNG 82 CHƯƠNG 83 CHƯƠNG 84 Hình 3.4 Sơ đồ đăng ký CHƯƠNG 85 CHƯƠNG 86 CHƯƠNG 87 - Sơ đồ thể thông tin phía phần đăng ký gồm có phần thông tin cá nhân, thông tin đăng nhập CHƯƠNG 88 CHƯƠNG 89 22 0 Chương Thiết kế chương trình 3.5.Sơ đồ chi tiết sản phẩm Hình 3.5 Sơ đồ chi tiết sản phẩm - Sơ đồ thể thông tin sản phẩm 23 0 CHƯƠNG 90 KẾT LUẬN Kết đạt CHƯƠNG 91 - Website thiết kế với giao diện đẹp mắt, thu hút người dùng truy cập Website có tốc độ tải trang nhanh, có bố cục, trình bày thơng tin đầy đủ, hợp lý, phù hợp với nhu cầu người dùng Các thông tin sản phẩm, dịch vụ, giới thiệu cửa hàng đầy đủ rõ ràng Tính mua hàng với thao tác đơn giản dễ sử dụng Website cho phép người dùng đăng ký trở thành thành viên để cập nhật thông tin đăng nhập để theo dõi ưu đãi trực tiếp website CHƯƠNG 92 - Tìm hiểu nắm công cụ để Thiết kế website như: Adobe Dreamweaver CS6, ngôn ngữ lập trình Website như: HTML, Javascript, CSS Việc chưa làm được: - Việc biểu diễn thông tin website chưa linh hoạt - Phân tích thiết kế chưa hồn chỉnh - Nhiều chức cịn thiếu chưa sử dụng CHƯƠNG 93 Hướng phát triển đề tài CHƯƠNG 94 Phát triển tính cịn thiếu website như: - Tính tìm kiếm thơng tin/sản phẩm website - Cập nhật tính thêm sản phẩm xóa sản phẩm vào giỏ hàng để người dùng tự kiểm tra đơn hàng - Cập nhật tính đăng ký đăng nhập vào cho trang web để người dùng đăng ký vào CHƯƠNG 95 24 0 TÀI LIỆU THAM KHẢO CHƯƠNG 96 Tiếng Việt CHƯƠNG 97 [1] Trường Đại học FPT (dịch, 2015), HTML5 CSS3: Thiết kế trang Web thích ứng giàu tính năng, ĐH Bách khoa Hà Nội CHƯƠNG 98 [2] Nguyễn Khải Hoàn (2014), Hướng dẫn thực hành Adobe Dreamwever CS6, NXB Giao thông Vận tải CHƯƠNG 99 Tiếng Anh CHƯƠNG 100 [1] FPT University (translated, 2015), HTML5 and CSS3: Featurerich adaptive Web page design, Hanoi University of Technology CHƯƠNG 101 [2] Nguyen Khai Hoan (2014), Practical guide for Adobe Dreamwever CS6, Transport Publishing House CHƯƠNG 102 Website CHƯƠNG 103 [1] https://www.w3schools.com Ngày truy cập 4/2021 CHƯƠNG 104 [2 ] https://celphones.com/ Ngày truy cập 4/2021 CHƯƠNG 105 [3] https://www.geavn.com/ Ngày truy cập 4/2021 CHƯƠNG 106 CHƯƠNG 107 CHƯƠNG 108 CHƯƠNG 109 CHƯƠNG 110 CHƯƠNG 111 CHƯƠNG 112 CHƯƠNG 113 CHƯƠNG 114 CHƯƠNG 115 CHƯƠNG 116 CHƯƠNG 117 CHƯƠNG 118 25 0 ... luận “THIẾT KẾ WEBSITE BÁN LINH KIỆN PC GEARBD cho công ty pc nhằm việc mua bán linh kiện pc trở nên thuận tiện hơn, người mua xem trước sản phẩm để nâng cao kỹ thiết kế thân 0 Chương Thiết kế chương...TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KỸ THUẬT CÔNG NGHỆ BÁO CÁO THIẾT KẾ WEBSITE BÁN LINH KIỆN GEARBD GVHD: Th.S NGUYỄN HỮU VĨNH SVTH: CAO ĐỨC MINH - 2024801030013 NGUYỄN... 17 0 Chương Thiết kế chương trình CHƯƠNG 71 CHƯƠNG 72 THIẾT KẾ CHƯƠNG TR6NH 3.1 Sơ đồ tổng quát Hình 3.1 Sơ đồ tổng quát 18 0 Chương Thiết kế chương trình CHƯƠNG 73 19 0 Chương Thiết kế chương