THIẾT KẾ WEBSITE SHOP LAPTOP CHO CÔNG TY URT

lOMoARcPSD|9242611 TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT CÔNG NGHỆ TIỂU LUẬN MÔN HỌC THIẾT KẾ WEBSITE THIẾT KẾ WEBSITE SHOP LAPTOP CHO CÔNG TY URT GVHD: THS NGUYỄN HỮU VĨNH SVTH: ĐẶNG VIỆT QUANG MSSV: 2024801030007 LỚP: D20KTPM02 BÌNH DƯƠNG – 4/2021 Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Tiểu luận thực hành thiết kế website LỜI NÓI ĐẦU Hiện nay, giới công nghệ thông tin thương mại điện tử phát triển mạnh mẽ Kỹ thuật số 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 Chính báo cáo chọn đề tài về: “Thiết kế website shop laptop URT” Đây hệ thống đơn giản đủ mạnh phép nhanh chóng Thiết kế ứng dụng bán hàng Internet Đề tài tiểu luận gồm phần phân chương sau: Chương 1: Tổng quan đề tài Chương 2: Giới thiệu công nghệ Chương 3: Giao diện website Chương 4: Kết luận hướng phát triển SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) i lOMoARcPSD|9242611 Tiểu luận thực hành thiết kế website MỤC LỤC LỜI NÓI ĐẦU i DANH MỤC HÌNH xiv CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1 Tên Đề Tài Mục Tiêu Đề Tài Ý Nghĩa Của Đề Tài Đối Tượng Của Đề Tài Một Số Trang Chính Của Website .1 CHƯƠNG GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML gì? 1.2 Công dụng HTML 1.3 Định dạng HTML 2 Giới thiệu Adobe Dreamweaver .2 Ngôn ngữ CSS Ngôn ngữ Javascript CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH 1.1 Đặc Tả Giao Diện .5 Sơ đồ website 1.2 Giao diện trang chủ 1.3 Giao diện trang giới thiệu 1.4 Giao diện trang đăng ký 1.5 Giao diện trang đăng nhập .8 1.6 Giao diện danh mục thương hiệu .9 1.6.1 Giao diện thương hiệu Laptop DELL 1.6.2 Giao diện thương hiệu Laptop ASUS 10 1.6.3 Giao diện thương hiệu Laptop ACER 11 1.6.4 Giao diện thương hiệu Laptop LENOVO 12 SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) ii lOMoARcPSD|9242611 Tiểu luận thực hành thiết kế website 13 1.6.5 Giao diện thương hiệu Laptop HP 13 14 1.6.6 Giao diện thương hiệu Laptop MSI .14 1.6.7 Giao diện thương hiệu APPLE .15 16 1.7 Giao diện trang thông tin khuyến 16 17 1.8 Giao diện trang thông tin khuyến 17 17 18 1.9 Giao diện trang chi tiết sản phẩm 18 1.9.1 Chi tiết Laptop ASUS ROG Strix .19 1.9.2 Chi tiết Laptop DELL Gaming G7 19 1.9.3 Chi tiết Laptop ACER Nitro 19 1.9.4 Chi tiết Laptop LENOVO Legion 20 1.9.5 Chi tiết Laptop HP Pavillion 14 20 1.9.6 Chi tiết Laptop MSI Modern 15 22 1.9.7 Chi tiết ASUS ROG Flow X13 22 22 1.9.8 Chi tiết ASUS TUF Gaming 22 23 1.9.9 Chi tiết Laptop DELL G5 23 23 1.9.10 Chi tiết Laptop DELL Inspiron .23 24 1.9.11 Chi tiết MACBOOK Air MGN73SA/A 2020 24 24 1.9.12 Chi tiết MACBOOK Air MGN3SA/A 2020 24 25 1.9.13 Chi tiết MACBOOK Pro 2020 25 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 26 SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) iii lOMoARcPSD|9242611 Tiểu luận thực hành thiết kế website Kết đạt được: 26 Việc chưa làm được: 26 Hướng phát triển đề tài 26 TÀI LIỆU KHAM KHẢO .28 SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) iv lOMoARcPSD|9242611 Tiểu luận thực hành thiết kế website DANH MỤC HÌNH Hình 1.1 Giao diện trang chủ Hình 1.2 Giao diện trang giới thiệu Hình 1.3 Giao diện trang đăng ký Hình 1.4 Giao diện trang đăng nhập Hình 1.5.1 Giao diện thương hiệu Laptop DELL 10 Hình 1.5.2 Giao diện thương hiệu Laptop ASUS 11 Hình 1.5.3 Giao diện thương hiệu Laptop ACER 12 Hình 1.5.4 Giao diện thương hiệu Laptop LENOVO .13 Hình 1.5.5 Giao diện thương hiệu Laptop HP 14 Hình1.5.6 Giao diện thương hiệu Laptop MSI .15 16 Hình 1.5.7 Giao diện thương hiệu APPLE .16 Hình 1.6 Giao diện trang thơng tin khuyến .17 Hình 1.7 Giao diện trang thông tin khuyến .18 Hình 1.8.1 Giao diện trang chi tiết Laptop ASUS ROG Strix 19 Hình 1.8.2 Giao diện trang chi tiết Laptop DELL Gaming G7 19 Hình 1.8.3 Giao diện trang chi tiết Laptop ACER Nitro 20 Hình 1.8.4 Giao diện trang chi tiết Laptop LENOVO Legion .20 Hình 1.8.5 Giao diện trang chi tiết Laptop HP Pavilion 14 .21 Hình 1.8.6 Giao diện trang chi tiết Laptop MSI Modern 15 .22 Hình 1.8.7 Giao diện trang chi tiết Laptop ASUS ROG Flow X13 22 Hình 1.8.8 Giao diện trang chi tiết Laptop ASUS TUF Gaming .23 Hình 1.8.9 Giao diện trang chi tiết Laptop DELL G5 .23 Hình 1.8.10 Giao diện trang chi tiết Laptop DELL Inspiron 24 Hình 1.8.11 Giao diện trang chi tiết MACBOOK Air MGN73SA/A 2020 .24 SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) v lOMoARcPSD|9242611 Tiểu luận thực hành thiết kế website Hình 1.8.12 Giao diện trang chi tiết MACBOOK Air MGN3SA/A 2020 25 Hình 1.8.13 Giao diện trang chi tiết MACBOOK Pro 2020 25 SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) vi lOMoARcPSD|9242611 Tiểu luận thực hành thiết kế website DANH SÁCH CÁC KÝ TỰ, CHỮ VIẾT TẮT Từ viết tắt Giải thích CSDL Cơ sở liệu ĐVT Đơn vị tính CNTT Công Nghệ thông tin SP Sản phẩm SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) vii lOMoARcPSD|9242611 Tiểu luận môn thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE SHOP LAPTOP CHO CÔNG TY URT Mục Tiêu Đề Tài + Thiết kế Website bán shop laptop cho công ty URT Ý Nghĩa Của Đề Tài + Đưa sản phẩm công ty đến đến gần với người tiêu dùng + Quảng bá thương hiệu Đối Tượng Của Đề Tài + Đối tượng nghiên cứu chủ yếu sản phẩm laptop Một Số Trang Chính Của Website + Trang chủ: Đây trang giới thiệu sơ lược sản phẩm cửa hàng + Trang Giới thiệu: Đây trang giúp cho khách hàng xem biết thêm thông tin Shop + Trang liên hệ: Đây trang mà khách hàng liên hệ với shop + Trang thông tin khuyến mãi: Đây trang thông báo cho khách hàng biết sản phẩm chương trình khuyến + Trang sách bảo hành: Đây trang giúp cho khách hàng biết thêm thông tin sách bảo hành thương hiệu laptop +Trang giỏ hàng: Người dùng xem sản phẩm thêm vào giỏ hàng + Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng trang + Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua sản phẩm trang + Trang sản phẩm: Đây trang khách hàng xem tham khảo mặt hàng cửa hàng có sẵn để lựa chọn + Trang chi tiết sản phẩm: Đây trang khách hàng nhấn vào sản phẩm để xem chi tiết SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Tiểu luận môn thiết kế web SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Tiểu luận mơn thiết kế web Hình 1.5.5 Giao diện thương hiệu Laptop HP 1.6.6 Giao diện thương hiệu Laptop MSI SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 15 lOMoARcPSD|9242611 Tiểu luận môn thiết kế web Hình1.5.6 Giao diện thương hiệu Laptop MSI 1.6.7 Giao diện thương hiệu APPLE SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 16 lOMoARcPSD|9242611 Tiểu luận mơn thiết kế web Hình 1.5.7 Giao diện thương hiệu APPLE 1.7 Giao diện trang thông tin khuyến SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 17 lOMoARcPSD|9242611 Tiểu luận mơn thiết kế web Hình 1.6 Giao diện trang thông tin khuyến 1.8 Giao diện trang thông tin khuyến SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 18 lOMoARcPSD|9242611 Tiểu luận mơn thiết kế web Hình 1.7 Giao diện trang thông tin khuyến 1.9 Giao diện trang chi tiết sản phẩm  Mục đích: Chức cho phép người dùng xem Tên sản phẩm, giá, thông tin chi tiết sản phẩm  Trong giao diện cho người dùng, chọn hiển thị theo Sản Phẩm kích chọn trang chủ SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 19 lOMoARcPSD|9242611 Tiểu luận môn thiết kế web 1.9.1 Chi tiết Laptop ASUS ROG Strix Hình 1.8.1 Giao diện trang chi tiết Laptop ASUS ROG Strix 1.9.2 Chi tiết Laptop DELL Gaming G7 Hình 1.8.2 Giao diện trang chi tiết Laptop DELL Gaming G7 1.9.3 Chi tiết Laptop ACER Nitro SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 20 lOMoARcPSD|9242611 Tiểu luận mơn thiết kế web Hình 1.8.3 Giao diện trang chi tiết Laptop ACER Nitro 1.9.4 Chi tiết Laptop LENOVO Legion Hình 1.8.4 Giao diện trang chi tiết Laptop LENOVO Legion 1.9.5 Chi tiết Laptop HP Pavillion 14 SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 21 lOMoARcPSD|9242611 Tiểu luận mơn thiết kế web Hình 1.8.5 Giao diện trang chi tiết Laptop HP Pavilion 14 SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 22 lOMoARcPSD|9242611 Tiểu luận môn thiết kế web 1.9.6 Chi tiết Laptop MSI Modern 15 Hình 1.8.6 Giao diện trang chi tiết Laptop MSI Modern 15 1.9.7 Chi tiết ASUS ROG Flow X13 Hình 1.8.7 Giao diện trang chi tiết Laptop ASUS ROG Flow X13 1.9.8 Chi tiết ASUS TUF Gaming SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 23 lOMoARcPSD|9242611 Tiểu luận mơn thiết kế web Hình 1.8.8 Giao diện trang chi tiết Laptop ASUS TUF Gaming 1.9.9 Chi tiết Laptop DELL G5 Hình 1.8.9 Giao diện trang chi tiết Laptop DELL G5 1.9.10 Chi tiết Laptop DELL Inspiron SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 24 lOMoARcPSD|9242611 Tiểu luận môn thiết kế web Hình 1.8.10 Giao diện trang chi tiết Laptop DELL Inspiron 1.9.11 Chi tiết MACBOOK Air MGN73SA/A 2020 Hình 1.8.11 Giao diện trang chi tiết MACBOOK Air MGN73SA/A 2020 1.9.12 Chi tiết MACBOOK Air MGN3SA/A 2020 SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 25 lOMoARcPSD|9242611 Tiểu luận mơn thiết kế web Hình 1.8.12 Giao diện trang chi tiết MACBOOK Air MGN3SA/A 2020 1.9.13 Chi tiết MACBOOK Pro 2020 Hình 1.8.13 Giao diện trang chi tiết MACBOOK Pro 2020 SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 26 lOMoARcPSD|9242611 Tiểu luận môn thiết kế web CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Trong thời buổi cơng nghiệp hóa nay, việc buôn bán qua mạng trở nên phổ biến với hầu hết người Đây xu hướng xã hội người với cú nhấp chuột dễ dàng đặt mua sản phầm mà ưng ý cách dễ dàng thời gian đến tận nơi để mua Việc mua bán giúp tiết kiệm thời gian tiền bạc người lựa chọn sản phẩm với giá đa dạng nhu cầu cá nhân người Vì thế, sau tiến hành khảo sát em định Thiết kế trang web laptop mà cụ thể “Thiết kế website shop Laptop cho công ty URL”với chức cần thiết cho trang web buôn bán cần có em thấy nhu cầu mua sắm thị trường tiềm khai thác buôn bán Website “shop Laptop URT” thứ dùng để quảng bá cho sân, thứ hai kênh thông tin cho người, thứ ba địa tin cậy để khách hàng yêu thích thời trang tìm mua cho sản phẩm chất lượng Qua trình nghiên cứu cố gắng thực hướng dẫn tận tình Giảng viên, giúp đỡ bạn bè khóa học đồ án nghiên cứu thể điều sau: Kết đạt được: - Thiết kế thành công website laptop cho công ty URT, đáp ứng yêu cầu người sử dụng - 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 - Giao diện website thiết kế đơn giản, thân thiện dễ sử dụng 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 hoàn chỉnh - Nhiều chức thiếu chưa sử dụng Hướng phát triển đề tài Vì thời gian khơng cho phép kiến thức thiết kế web hạn chế nên chúng em chưa tìm hiểu rõ kỹ đề tài Vì đề tài cịn có nhiều thiếu sót, mong thầy giúp đỡ chúng em nhiều em tiếp tục tìm hiểu sâu cơng nghệ này, nhằm mục đích Thiết kế website: SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 27 lOMoARcPSD|9242611 Tiểu luận môn thiết kế web  Giao diện đẹp, thân thiện với người dùng, có nhiều chức tương tác tốt với người dùng  Thiết kế, bổ sung tính cịn thiếu hay chưa thật hồn chỉnh trình sử dụng SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 28 lOMoARcPSD|9242611 Tiểu luận môn thiết kế web TÀI LIỆU KHAM KHẢO [1] Tài liệu giảng môn “Thiết kế website” thầy Nguyễn Hữu Vĩnh [2] Website WWW: http://www.hiepsiit.com [3] Website https://coccoc.com/search#query=Webcoban.vn SVTH: ĐẶNG VIỆT QUANG – LỚP D20KTPM02 Downloaded by tran quang (quangsuphamhoak35@gmail.com) 29 ... TÀI Tên Đề Tài + THIẾT KẾ WEBSITE SHOP LAPTOP CHO CÔNG TY URT Mục Tiêu Đề Tài + Thiết kế Website bán shop laptop cho công ty URT Ý Nghĩa Của Đề Tài + Đưa sản phẩm công ty đến đến gần với người... web laptop mà cụ thể “Thiết kế website shop Laptop cho công ty URL”với chức cần thiết cho trang web buôn bán cần có em thấy nhu cầu mua sắm thị trường tiềm khai thác buôn bán Website ? ?shop Laptop. .. Thiết kế thành công website laptop cho công ty URT, đáp ứng yêu cầu người sử dụng - 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,