(Tiểu luận) tiểu luận môn học thiết kế website thiết kế website shop bán phụ kiện điện thoại, máy tính cho công ty vietphone

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 BÁN PHỤ KIỆN ĐIỆN THOẠI, MÁY TÍNH CHO CÔNG TY VIETPHONE GVHD: THS NGUYỄN HỮU VĨNH SVTH: MAI THÀNH NAM & NGUYỄN LÊ DANH MSSV: 2024801030167 & 2024801030075 LỚP: D20KTPM01 B;NH DƯƠNG – 4/2021 0 Tieu luan Tiểu luận thực hành thiết kế website LỜI NÓI ĐẦU Với sức mạnh công nghệ đại ngày nay, thật dễ dàng mua sắm online Tất bạn cần thiết bị điện tử máy tính để bàn, laptop, smartphone, có kết nối internet bạn tiến hành mua sắm mà không cần nhấc chân khỏi nhà Với thuận tiện mặt công nghệ vậy, trang web bán hàng online mọc lên nấm với đầy đủ mặt hàng từ phân khúc xa xỉ bình dân, gần tất thứ bạn mua theo cách truyền thống có sẵn trang web thương mại điện tử Công ty Vietphone công ty chuyên bán sản phẩm phụ kiện điện thoại, máy tính Cơng ty Vietphone mang khát vọng trở thành cơng ty có thị phần nhiều Việt Nam công ty hàng đầu giới phẩm phụ kiện điện thoại với mặt hàng từ bình dân đến cao cấp Đề tài tiểu luận gồm phần phân chương sau: Chương 1: Tổng quan đề tài tiểu luận 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: Thành Nam & Lê Danh – D20KTPM01 i 0 Tieu luan 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 v 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 CHƯƠNG GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML gì? .2 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 Đặc Tả Giao Diện 1.1 Giao diện trang chủ .6 1.2 Giao diện trang giới thiệu 1.3 Giao diện trang liên hệ 1.4 Giao diện trang đăng ký .10 1.5 Giao diện trang đăng nhập 11 1.6 Giao diện trang danh mục sản phẩm 12 1.6.1 Giao diện danh mục tai nghe điện thoại .13 1.6.2 Giao diện danh mục củ sạc điện thoại 14 1.6.3 Giao diện danh mục cáp sạc .15 1.6.4 Giao diện danh mục đồng hồ thông minh 16 1.6.5 Giao diện danh mục ốp lưng .17 1.6.6 Giao diện danh mục tai nghe máy tính 18 1.6.7 Giao diện danh mục bàn phím 19 SVTH: Thành Nam & Lê Danh – D20KTPM01 ii 0 Tieu luan Tiểu luận thực hành thiết kế website 1.6.8 Giao diện danh mục chuột 20 1.7 Chi tiết sản phẩm 21 1.7.1 Chi tiết APPLE WATCH SE .21 1.7.2 Chi tiết Apple watch series 44mm LTE nhôm 22 1.7.3 Chi tiết Apple watch series 44mm LTE thép 23 1.7.4 Chi tiết bàn phím Dareu ek1280 RGB 24 1.7.5 Chi tiết Lamila 2.1A C11S 25 1.7.6 Chi tiết Loa blutooth kèm mic hát YS-K21 26 1.7.7 Chi tiết Xiaomi Mi Band 27 1.7.8 Chi tiết Xiaomi Mi Band 28 1.7.9 Chi tiết Realme watch Red 29 1.7.10 Chi tiết Loa blutooth Oppo cao cấp kiêm đồng hồ led 30 1.7.11 Chi tiết Cục sạc nhanh Apple 20W PD Type-c .31 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .32 Việc chưa làm được: 32 Hướng phát triển đề tài 32 TÀI LIỆU KHAM KHẢO .33 SVTH: Thành Nam & Lê Danh – D20KTPM01 iii 0 Tieu luan 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 liên hệ Hình 1.4 Giao diện trang đăng ký .10 Hình 1.5 Giao diện trang đăng nhập 11 Hình 1.6 Giao diện trang danh mục sản phẩm 12 Hình 1.6.1 Giao diện danh mục tai nghe điện thoại 13 Hình 1.6.3 Giao diện danh mục cáp sạc 15 Hình 1.6.4 Giao diện danh mục đồng hồ thông minh 16 Hình 1.6.5 Giao diện danh mục ốp lung 17 Hình 1.6.6 Giao diện danh mục tai nghe máy tính 18 Hình 1.6.7 Giao diện danh mục bàn phím .19 Hình 1.7.1 Giao diện trang chi tiết APPLE WATCH SE .21 Hình 1.7.2 Giao diện trang chi tiết Apple watch series 44mm LTE nhôm 22 Hình 1.7.3 Giao diện trang chi tiết Apple watch series 44mm LTE thép 23 Hình 1.7.4 Giao diện trang chi tiết Dareu ek1280 RGB 24 Hình 1.7.5 Giao diện trang chi tiết Lamila 2.1A C11S 25 Hình 1.7.6 Giao diện trang chi tiết Loa blutooth kèm mic hát YS-K21 26 Hình 1.7.7 Giao diện trang chi tiết Xiaomi Mi Band 27 Hình 1.7.8 Giao diện trang chi tiết Xiaomi Mi Band 28 Hình 1.7.9 Giao diện trang chi tiết Realme watch Red 29 Hình 1.7.10 Giao diện trang chi tiết Loa blutooth Oppo cao cấp kiêm đồng hồ led .30 Hình 1.7.11 Giao diện trang chi tiết Cục sạc nhanh Apple 20W PD Type-c 31 SVTH: Thành Nam & Lê Danh – D20KTPM01 iv 0 Tieu luan 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: Thành Nam & Lê Danh – D20KTPM01 v 0 Tieu luan Bài 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 PHỤ KIỆN ĐIỆN THOẠI VÀ MÁY TÍNH CHO CƠNG TY VIETPHONE Mục Tiêu Đề Tài + Thiết kế Website shop bán phụ kiện điện thoại máy tính cho cơng ty VIETPHONE Ý 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 phụ kiện cho điện thoại máy tính 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 đă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 + Trang giỏ hàng: Đây trang để khách hang quản lý danh sách hàng hóa mà người dùng muốn mua SVTH: Thành Nam & Lê Danh – D20KTPM01 0 Tieu luan Bài tiểu luận môn thiết kế web CHƯƠNG GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML gì? HTML (Hypertext Markup Language-Ngơn ngữ đánh dấu siêu văn bản) ngôn ngữ đánh dấu chuẩn dùng soạn thảo tài liệu World Wide Web, rõ trang Web hiển thị trình duyệt Ngơn ngữ HTML dùng tag đoạn mã lệnh trình duyệt (Web browsers) cách hiển thị thành phần trang text graphics HTML ngôn ngữ xác định cấu trúc thông tin HTML sử dụng loạt thẻ thuộc tính dùng để thị văn thông tin khác, cung cấp siêu liên kết tới tài liệu khác 1.2 Công dụng HTML Thiết kế nội dung hình thức trang web Xuất tài liệu trực tuyến hay truy xuất thông tin trực tuyến cách dùng liên kết chèn vào trang web Tạo biểu mẫu trực tuyến nhằm thu thập thông tin người dùng, quản lý giao dịch… Thêm vào đối tượng hình ảnh video, âm thanh… 1.3 Định dạng HTML Là tập tin có phần mở rộng htm html Là tập tin văn túy, có chứa mã đặc biệt gọi Tag(thẻ), thường đặt xung quanh khối văn Có thể viết nhiều trình soạn thảo: Microsoft Fontpage, notepad…và sử dụng nhiều adobe dreamweaver Giới thiệu Adobe Dreamweaver Macromedia Dreamweaver trình biên soạn HTML chuyên nghiệp dùng để thiết kế, viết mã phát triển website trang web ứng dụng web Cho dù bạn có thích thú với cơng việc viết mã HTML thủ cơng bạn thích làm việc mơi trường biên soạn trực quan, Dreamweaver cung cấp cho bạn cơng cụ hữu ích để nâng cao kinh nghiệm thiết kế web bạn SVTH: Thành Nam & Lê Danh – D20KTPM01 0 Tieu luan Bài tiểu luận mơn thiết kế web Các tính biên soạn trực quan Dreamweaver cho phép bạn tạo nhanh trang web mà khơng cần dịng mã Bạn xem tất thành phần website bạn kéo chúng trực tiếp từ panel dễ sử dụng vào văn Bạn nâng cao sản phẩm bạn cách tạo sửa ảnh Macromedia Fireworks ứng dụng ảnh khác, sau chèn trực tiếp vào Dreamweaver Dreamweaver cung cấp cơng cụ giúp đơn giản hóa việc chèn Flash vào trang web Dreamweaver cho phép bạn Thiết kế ứng dụng web động dựa theo liệu sử dụng công nghệ máy chủ CFML, ASP.NET, ASP, JSP, PHP Nếu sở thích bạn làm việc với liệu XML, Dreamweaver cung cấp công cụ cho phép bạn dễ dàng tạo trang XSLT, chèn file XML hiển thị liệu XML trang web bạn Dreamweaver tùy biến hồn tồn Bạn tạo cho riêng đối tượng yêu cầu, chỉnh sửa shortcut bàn phím chí viết mã JavaScript để mở rộng khả Dreamweaver với hành vi mới, chuyên gia giám định Property báo cáo site Ngôn ngữ CSS CSS (Cascading Style Sheets) ngơn ngữ quy định cách trình bày cho tài liệu viết HTML, XHTML, XML, SVG, hay UML, … CSS cung cấp nhiều thuộc tính trình bày dành cho đối tượng với sáng tạo việc kết hợp thuộc tính giúp mang lại hiệu cao CSS hỗ trợ tất trình duyệt hiển thị “như nhau” hệ điều hành CSS đưa phương thức áp dụng từ file CSS ngồi Có hiệu đồng tạo website có hàng trăm trang hay muốn thay đổi thuộc tính trình bày CSS cập nhật liên tục mang lại trình bày phức tạp tinh vi Ngôn ngữ Javascript Với HTML biểu diễn thông tin chưa phải trang Web động có khả đáp ứng kiện từ phía người dùng SVTH: Thành Nam & Lê Danh – D20KTPM01 0 Tieu luan Bài tiểu luận môn thiết kế web Hãng Netscape đưa ngơn ngữ script có tên LiveScript để thực chức Sau đổi tên thành JavaScript để tận dụng tính đại chúng ngơn ngữ lập trình Java JavaScript ngơn ngữ dạng script gắn với file HTML Được trình duyệt diễn dịch, trình duyệt đọc JavaScript dạng mã nguồn JavaScript ngôn ngữ dựa đối tượng, nghĩa bao gồm nhiều kiểu đối tượng, ví dụ đối tượng Math với tất chức tốn học Nhưng JavaScript khơng ngơn ngữ hướng đối tượng C++/Java SVTH: Thành Nam & Lê Danh – D20KTPM01 0 Tieu luan Bài tiểu luận môn thiết kế web 1.6.7 Giao diện danh mục bàn phím Hình 1.6.7 Giao diện danh mục bàn phím SVTH: Thành Nam & Lê Danh – D20KTPM01 19 0 Tieu luan Bài tiểu luận môn thiết kế web 1.6.8 Giao diện danh mục chuột Hình 1.6.8 Giao diện danh mục chuột SVTH: Thành Nam & Lê Danh – D20KTPM01 20 0 Tieu luan Bài tiểu luận môn thiết kế web 1.7 Chi tiết sản phẩm 1.7.1 Chi tiết APPLE WATCH SE Hình 1.7.1 Giao diện trang chi tiết APPLE WATCH SE SVTH: Thành Nam & Lê Danh – D20KTPM01 21 0 Tieu luan Bài tiểu luận môn thiết kế web 1.7.2 Chi tiết Apple watch series 44mm LTE nhơm Hình 1.7.2 Giao diện trang chi tiết Apple watch series 44mm LTE nhôm SVTH: Thành Nam & Lê Danh – D20KTPM01 22 0 Tieu luan Bài tiểu luận môn thiết kế web 1.7.3 Chi tiết Apple watch series 44mm LTE thép Hình 1.7.3 Giao diện trang chi tiết Apple watch series 44mm LTE thép SVTH: Thành Nam & Lê Danh – D20KTPM01 23 0 Tieu luan Bài tiểu luận môn thiết kế web 1.7.4 Chi tiết bàn phím Dareu ek1280 RGB Hình 1.7.4 Giao diện trang chi tiết Dareu ek1280 RGB SVTH: Thành Nam & Lê Danh – D20KTPM01 24 0 Tieu luan Bài tiểu luận môn thiết kế web 1.7.5 Chi tiết Lamila 2.1A C11S Hình 1.7.5 Giao diện trang chi tiết Lamila 2.1A C11S SVTH: Thành Nam & Lê Danh – D20KTPM01 25 0 Tieu luan Bài tiểu luận môn thiết kế web 1.7.6 Chi tiết Loa blutooth kèm mic hát YS-K21 Hình 1.7.6 Giao diện trang chi tiết Loa blutooth kèm mic hát YS-K21 SVTH: Thành Nam & Lê Danh – D20KTPM01 26 0 Tieu luan Bài tiểu luận môn thiết kế web 1.7.7 Chi tiết Xiaomi Mi Band Hình 1.7.7 Giao diện trang chi tiết Xiaomi Mi Band SVTH: Thành Nam & Lê Danh – D20KTPM01 27 0 Tieu luan Bài tiểu luận môn thiết kế web 1.7.8 Chi tiết Xiaomi Mi Band Hình 1.7.8 Giao diện trang chi tiết Xiaomi Mi Band SVTH: Thành Nam & Lê Danh – D20KTPM01 28 0 Tieu luan Bài tiểu luận môn thiết kế web 1.7.9 Chi tiết Realme watch Red Hình 1.7.9 Giao diện trang chi tiết Realme watch Red SVTH: Thành Nam & Lê Danh – D20KTPM01 29 0 Tieu luan Bài tiểu luận môn thiết kế web 1.7.10 Chi tiết Loa blutooth Oppo cao cấp kiêm đồng hồ led Hình 1.7.10 Giao diện trang chi tiết Loa blutooth Oppo cao cấp kiêm đồng hồ led SVTH: Thành Nam & Lê Danh – D20KTPM01 30 0 Tieu luan Bài tiểu luận môn thiết kế web 1.7.11 Chi tiết Cục sạc nhanh Apple 20W PD Type-c Hình 1.7.11 Giao diện trang chi tiết Cục sạc nhanh Apple 20W PD Type-c SVTH: Thành Nam & Lê Danh – D20KTPM01 31 0 Tieu luan Bài 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 bn 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 khơng phải thời gian đến tận nơi để mua Website “Bán phụ kiện điện thoại, máy tính cho cơng ty Vietphone” website chuyên bán phụ kiện cho điện thoại, máy tính với tiêu chí “chất lượng phải đầu” dần trở thành lựa chọn mặc định công ty lớn lĩnh vực hợp tác phát triển điện thoại, máy tính ngày đại, tiện lợi Kết đạt được: - Thiết kế thành công website bán phụ kiện điện thoại cho công ty Vietphone đáp ứng yêu cầu khách hàng - Tìm hiểu sử dụng công cụ để Thiết kế website như: Adobe Dreamweaver CS6, ngôn ngữ 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 - Nhiều chức thiếu chưa sử dụng - Website chưa tối ưu hóa cách hồn thiện Hướng phát triển đề tài  Trau chuốt giao diện đẹp hơn, thân thiện với người dùng có nhiều chức năng, 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 q trình sử dụng  Tối ưu hóa trang web cho việc thương mại dễ dàng nhanh chóng SVTH: Thành Nam & Lê Danh – D20KTPM01 32 0 Tieu luan Bài 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 http://www.hiepsiit.com [3] Website https://gearvn.com [4] Website https://didongthongminh.vn SVTH: Thành Nam & Lê Danh – D20KTPM01 33 0 Tieu luan ... mua Website ? ?Bán phụ kiện điện thoại, máy tính cho cơng ty Vietphone? ?? website chuyên bán phụ kiện cho điện thoại, máy tính với tiêu chí “chất lượng phải ln đầu” dần trở thành lựa chọn mặc định công. .. ĐIỆN THOẠI VÀ MÁY TÍNH CHO CƠNG TY VIETPHONE Mục Tiêu Đề Tài + Thiết kế Website shop bán phụ kiện điện thoại máy tính cho cơng ty VIETPHONE Ý Nghĩa Của Đề Tài + Đưa sản phẩm công ty đến đến gần... chọn mặc định công ty lớn lĩnh vực hợp tác phát triển điện thoại, máy tính ngày đại, tiện lợi Kết đạt được: - Thiết kế thành công website bán phụ kiện điện thoại cho công ty Vietphone đáp ứng