Tiểu luận môn học thiết kế web thiết kế website shop điện thoại boapple

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KỸ THUẬT – CÔNG NGHỆ TIỂU LUẬN MÔN HỌC THIẾT KẾ WEB THIẾT KẾ WEBSITE SHOP ĐIỆN THOẠI BOAPPLE GVHD: NGUYỄN HỮU VĨNH SV: PHẠM TUẤN ANH MSSV: 1824801030268 LỚP: D18PM04 B3NH DƯƠNG – 07/2020 0 KHOA KỸ THUẬT – CÔNG NGHỆ NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN Họ tên giảng viên: Nguyễn Hữu Vĩnh Tên đề tài: XÂY DỰNG WEBSITE SHOP ĐIỆN THOẠI BOAPPLE Nội dung nhận xét: Điểm: Bằng số: Bằng chữ: GIẢNG VIÊN CHẤM (Ký, ghi rõ họ tên) NGUYỄN HỮU VĨNH 0 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 xây dựng 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ề: “Xây dựng website shop điện thoại BOAPPLE” Đây hệ thống đơn giản đủ mạnh phép nhanh chóng xây dựng ứ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 0 Đồ án môn thiết kế web MỤC LỤC L Ờ I NÓI ĐẦẦU BẢNG THÔNG TIN TRANG DANH SÁCH CÁC KÝ TỰ, CHỮ VIẾT TẮT CH ƯƠ NG T NG Ổ QUAN VỀẦ ĐỀẦ TÀI 1.Tên Đêề Tài .1 2.Mục Tiêu c Đêề Tài 3.Ý Nghĩa Của Đêề Tài 4.Đốối T ượng Của Đêề Tài .1 5.M tộSốố Trang Chính C Website CHƯƠNG GIỚI THIỆU CÔNG NGHỆ .3 1.Gi ới Thiệu Vêề HTML 1.1.HTML gì? 1.2.Công dụng HTML 1.3.Định dạng HTML .3 2.Gi ới thi ệu vêề Adobe Dreamweaver 3.Ngốn ngữ CSS 4.Ngốn ng ữ Javascript CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH 1.Đặc T ả Giao Diện .6 1.1.Giao diện trang chủ .6 1.2.Giao diện trang giới thiệu .8 1.3.Giao diện trang đăng ký 10 1.4.Giao diện trang đăng nhập 10 1.5.Giao diện trang điện thoại 12 1.6.Giao diện Apple 14 1.7.Giao diện phụ kiện 15 1.8.Giao diện máy tnh bảng .16 1.9.Giao di ện trang khuyếến 16 2.Giao di ện trang trả góp 17 2.1.Giao diện trang liến hệ 18 Ngoài khác hành có th ểnhấấn vào cơng cụ góc bên trái: 19 Đ có ể th kêất ể nôấi tới trang facebook shop: .19 2.2.Trang chi têốt s ản phẩm 20 2.2.1.Giao di ện trang chi tếết điện thoại 20 2.2.2.Giao di ện trang chi tếết máy tnh .21 Hình 2.2.2 Giao di ện trang chi têất máy tính 22 CHƯƠNG 4: KỀẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .23 1.Kêốt đạt được: 23 2.Việc ch ưa làm đượ c: .23 SV: PHẠM TUẤN ANH – LỚP: D18PM04 Đồ án môn thiết kế web 3.H ướng phát triển đêề tài: 23 TÀI LIỆU KHAM KHẢO .25 DANH MỤC HÌNH Hình 1: Giao diện Trang Chủ .8 Hình 2: Giao diện Trang Giới Thiệu 10 Hình 3: Giao diện Trang Đăng Kí .10 Hình 4: Giao diện Trang Đăng Nhập 11 Hình 5: Giao diện trang Đổi Mật Khẩu 11 Hình 6: Giao diện trang Điện Thoại 14 Hình 7: Giao diện trang Apple 15 Hình 8:Giao diện trang phụ kiện .15 Hình 9: Giao diện trang Máy Tính Bảng 16 Hình 10: Giao di n ệ trang Khuyếến Mãi .17 Hình 11:Giao diện trang Trả Góp 18 Hình 12: Giao diện trang Liến Hệ 19 Hình 13:Giao di ện trang Chi Tiếết Điện Tho ại 21 Hình 14: Giao di ện trang Chi Tiếết Máy Tính 22 SV: PHẠM TUẤN ANH – LỚP: D18PM04 Đồ án mơn thiết kế web BẢNG THƠNG TIN TRANG STT Tên Trang Trang Chủ Trang Giới Thiệu Trang Đăng Ký Trang Đăng Nhập Trang Đổi Mật Khẩu Trang Điện thoại Chức trang Đây trang shop, giới thiệu sơ lược shop, loại điện thoại bán nhiều bật cửa hàng Đây trang giúp cho người xem biết thêm thông tin Shop điện thoại BOAPPLE Người dùng đăng ký tài khoản để trở thành khách hàng Shop điện thoại BOAPPLE Người dùng đăng nhập tài khoản để đặt mua sản phẩm Shop điện thoại BOAPPLE Đây trang mà khách hàng có nhu cầu đổi mật muốn Đây trang khách hàng xem tham khảo loại điện thoại có sẵn shop BOAPPLE để lựa chọn SV: PHẠM TUẤN ANH – LỚP: D18PM04 Đồ án môn thiết kế web 10 11 12 13 Trang Chi Tiết Điện Đây trang khách hàng nhấn vào loại điện thoại để xem để xem chi tiết Thoại Trang Phụ Kiện Đây trang giúp cho khách hàng xem, tìm hiểu thêm nhiều loại phụ kiện điện thoại đẹp khác Trang Trả Góp Trang gồm sách trả góp shop để khách hàng tham khảo Trang Liên Hệ Trang giúp khách hàng chưa hiểu rõ trang web hỏi để lại lời nhắn Trang Khuyến Trang giúp khách hàng có nhiều lựa chọn hợp lí mặt giá Trang Máy Tính Đây trang khách hàng xem tham khảo loại máy tính bảng có sẵn shop BOAPPLE để Bảng lựa chọn Trang Apple Trang giúp khách hàng tham khảo sản phẩm Apple 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 HTML Hyper Text Markup Language CSS Cascading Style Sheet SV: PHẠM TUẤN ANH – LỚP: D18PM04 Tiểu luận môn thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1.Tên Đề Tài + XÂY DỰNG WEBSITE SHOP ĐIỆN THOẠI BOAPPLE 2.Mục Tiêu Đề Tài + Xây dựng Website Điện Thoại BOAPPLE 3.Ý Nghĩa Của Đề Tài + Đưa sản phẩm Shop Điện Thoại BOAPPLE đến gần với người +Giới thiệu điện thoại cho người +Cập nhật mẫu điện thoại chất lượng, giá thành phù hợp với người + Quảng bá thương hiệu shop điện thoại BOAPPLE 4.Đối Tượng Của Đề Tài + Đối tượng nghiên cứu chủ yếu loại điện thoại, phụ kiện máy tính bảng phổ biến, đẹp, giá thành chất lượng 5.Một Số Trang Chính Của Website + Trang Chủ: Đây trang shop, giới thiệu sơ lược shop, loại điện thoại bán nhiều bật cửa hàng + Trang Giới thiệu: Đây trang giúp cho người xem biết thêm thông tin Shop BOAPPLE + Trang Đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng Shop điện thoại BOAPPLE + Trang Đăng nhập: Người dùng đăng nhập tài khoản để đặt mua sản phẩm Shop BOAPPLE +Trang đổi mật khẩu: Đây trang mà khách hàng có nhu cầu đổi mật muốn + Trang Apple: Đây trang khách hàng xem tham khảo loại sẩn phẩm nhãn hàng Apple để lựa chọn + Trang Chi tiết Điện Thoại: Đây trang khách hàng nhấn vào loại điện để xem chi tiết + Trang Máy tính Bảng: Đây trang giúp cho khách hang xem, tìm hiểu thêm nhiều loại Ipad khác +Trang Điện thoại: Đây trang khách hàng muốn xem tất loại điện thoại có shop SV: PHẠM TUẤN ANH – LỚP: D18PM04 Tiểu luận môn thiết kế web +Trang Phụ kiện: Trang gồm phụ kiện kèm theo điện thoại mà khác muốn mua +Trang Giới thiệu Trang giúp khách hàng hiểu rõ shop bán điện thoại BOAPPLE +Trang Khuyến mãi: Trang giúp khách hàng có nhiều ưu đãi mặt giá +Trang Liên hệ: Trang giúp giải đáp thắc mắc khách hang theo nhiều cách có nhu cầu +Trang Trả góp: Giúp khách hàng hiểu rõ sách trả góp shop SV: PHẠM TUẤN ANH – LỚP: D18PM04 Tiểu luận môn thiết kế web CHƯƠNG GIỚI THIỆU CÔNG NGHỆ 1.Giới Thiệu Về HTML 1.1.HTML gì? HTML (Hyper Text 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 2.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 SV: PHẠM TUẤN ANH – LỚP: D18PM04 Tiểu luận mơn thiết kế web Hình 4: Giao di ện Trang Đăng Nhập 1.4.1.Giao diện đổi mật Hình 5: Giao di ện trang Đ ổi M ật Khẩu SV: PHẠM TUẤN ANH – LỚP: D18PM04 11 Tiểu luận môn thiết kế web 1.5.Giao diện trang điện thoại  Mục Đích: Khách hàng muốn tìm sản phẩm có nhu cầu  Chức Năng: Nhiều lựa chọn cho tất khách hàng SV: PHẠM TUẤN ANH – LỚP: D18PM04 12 Tiểu luận môn thiết kế web SV: PHẠM TUẤN ANH – LỚP: D18PM04 13 Tiểu luận mơn thiết kế web Hình 6: Giao di ện trang Điện Thoại 1.6.Giao diện Apple SV: PHẠM TUẤN ANH – LỚP: D18PM04 14 Tiểu luận mơn thiết kế web Hình 7: Giao di ện trang Apple 1.7.Giao diện phụ kiện Hình 8:Giao di ện trang ph ụ kiện SV: PHẠM TUẤN ANH – LỚP: D18PM04 15 Tiểu luận môn thiết kế web 1.8.Giao diện máy tính bảng Hình 9: Giao di ện trang Máy Tính Bảng 1.9.Giao diện trang khuyến SV: PHẠM TUẤN ANH – LỚP: D18PM04 16 Tiểu luận mơn thiết kế web Hình 10: Giao di nệ trang Khuyếến Mãi 2.Giao diện trang trả góp SV: PHẠM TUẤN ANH – LỚP: D18PM04 17 Tiểu luận mơn thiết kế web Hình 11:Giao di ện trang Trả Góp 2.1.Giao diện trang liên hệ SV: PHẠM TUẤN ANH – LỚP: D18PM04 18 Tiểu luận môn thiết kế web Hình 12: Giao di ện trang Liến Hệ Ngồi khác hành nhấn vào cơng cụ góc bên trái: Để kết nối tới trang facebook shop: SV: PHẠM TUẤN ANH – LỚP: D18PM04 19 Tiểu luận môn thiết kế web 2.2.Trang chi tiết sản phẩm  Mục Đích: Giúp khách hàng xem thông tin giá điện thoại shop 2.2.1.Giao diện trang chi tiết điện thoại SV: PHẠM TUẤN ANH – LỚP: D18PM04 20 Tiểu luận mơn thiết kế web Hình 13:Giao di nệ trang Chi Tiếết Điện Thoại 2.2.2.Giao diện trang chi tiết máy tính SV: PHẠM TUẤN ANH – LỚP: D18PM04 21 Tiểu luận mơn thiết kế web Hình 2.2.2 Giao diện trang chi tiết máy tính Hình 14: Giao di nệ trang Chi Tiếết Máy Tính SV: PHẠM TUẤN ANH – LỚP: D18PM04 22 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 loại điên thoại 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 loại điện 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 xây dựng trang web bán điện mà cụ thể “Xây dựng website shop điện thoại BOAPPLE”với chức cần thiết cho trang web bn bán cần có em thấy nhu cầu mua sắm thị trường tiềm khai thác bn bán Website “shop bán điện thoại” thứ dùng để quảng bá cho shop, thứ hai kênh thông tin cho người, thứ ba địa tin cậy để khách hàng u thích thời trang tìm mua cho loại điện chất lượng đẹp 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: - 1.Kết đạt được: Xây dựng thành công website thời trang cho shop bán hoa Flowers, đáp ứng yêu cầu người sử dụng - Tìm hiểu nắm công cụ để xây dựng 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 2.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 3.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 cịn 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 xây dựng website:  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 SV: PHẠM TUẤN ANH – LỚP: D18PM04 23 Tiểu luận môn thiết kế web  Xây dựng, bổ sung tính cịn thiếu hay chưa thật hồn chỉnh trình sử dụng TÀI LIỆU KHAM KHẢO - Tài liệu giảng môn “Thiết kế website” thầy Nguyễn Hữu Vĩnh SV: PHẠM TUẤN ANH – LỚP: D18PM04 24 Tiểu luận môn thiết kế web - Tham khảo mạng - Tham khảo thư viện trường - Website WWW: http://www.hiepsiit.com SV: PHẠM TUẤN ANH – LỚP: D18PM04 25 ... ANH – LỚP: D18PM04 Tiểu luận môn thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1.Tên Đề Tài + XÂY DỰNG WEBSITE SHOP ĐIỆN THOẠI BOAPPLE 2.Mục Tiêu Đề Tài + Xây dựng Website Điện Thoại BOAPPLE 3.Ý Nghĩa... 12 Tiểu luận môn thiết kế web SV: PHẠM TUẤN ANH – LỚP: D18PM04 13 Tiểu luận mơn thiết kế web Hình 6: Giao di ện trang Điện Thoại 1.6.Giao diện Apple SV: PHẠM TUẤN ANH – LỚP: D18PM04 14 Tiểu luận. .. trang web bán điện mà cụ thể “Xây dựng website shop điện thoại BOAPPLE? ??với chức cần thiết cho trang web bn bán cần có em thấy nhu cầu mua sắm thị trường tiềm khai thác bn bán Website ? ?shop bán điện