Báo cáo kết thúc học phần thiết kế web tên đề tài thiết kế website linh kiện điện tử l store

UBND TỈNH BÌNH DƯƠNG TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KTCN BÁO CÁO KẾT THÚC HỌC PHẦN THIẾT KẾ WEB TÊN ĐỀ TÀI: THIẾT KẾ WEBSITE LINH KIỆN ĐIỆN TỬ L - STORE HỌ TÊN SINH VIÊN: NGUYỄN TRỌNG HIỆP MSSV: 1824801030162 LỚP: D18PM03 GIÁO VIÊN HƯỚNG DẪN: THS NGUYỄN HỮU VĨNH BÌNH DƯƠNG, 10/07/2020 0 MỤC LỤC MỤC LỤC DANH MỤC HÌNH DANH SÁCH CÁC KÝ TỰ , CHỮ VIẾT TẮT LỜI CẢM ƠN GIỚI THIỆU CHƯƠNG I: TỔNG QUAN ĐỀ TÀI .9 TÊN ĐỀ TÀI MỤC TIÊU ĐỀ TÀI Ý NGHĨA CỦA ĐỀ TÀI MỘT SỐ TRANG CHÍNH CỦA WEBSITE CHƯƠNG II GIỚI THIỆU CÔNG NGHỆ 10 GIỚI THIỆU VỀ HTML 10 1.1 HTML ? 10 1.2 Công dụng HTML 10 1.3 Định dạng HTML .10 GIỚI THIỆU VỀ CSS 10 2.1 CSS ? 10 2.2 Tại CSS ? 11 GIỚI THIỆU VỀ ADOBE DREAMWEAVER 13 NGÔN NGỮ JAVASCRIPT 14 CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH 15 Đặc Tả Giao Diện 15 1.1 Giao diện trang chủ 15 1.2 Giao diện sản phẩm 19 1.3.Giao diện toán 25 0 1.4.Giao diện liên hệ 27 CHƯƠNG V: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 29 KẾT QUẢ VÀ KINH NGHIỆM 29 1.1 Kết 29 1.2 Kinh nghiệm 29 HẠN CHẾ 29 HƯỚNG PHÁT TRIỂN 29 TÀI LIỆU KHAM KHẢO 31 0 DANH MỤC HÌNH Image Logo website Image Giao diện website(1) Image Giao diện website(2) Image Giao diện website(3) 10 Image Giao diện website(4) 11 Image Giao diện website(5) .11 Image Giao diện website(6) .12 Image Giao diện sản phẩm(1) 12 Image Giao diện sản phẩm(2) 13 Image 10 Giao diện sản phẩm(3) 14 Image 11 Giao diện sản phẩm(4) 14 Image 12 Giao diện sản phẩm(5) 15 Image 13 Giao diện sản phẩm(6) 15 Image 14 Giao diện sản phẩm(7) 16 Image 15 Giao diện sản phẩm(8) 17 Image 16 Giao diện sản phẩm(9) 18 Image 17 Giao diện sản phẩm(10) 18 Image 18 Giao diện toán(1) 19 Image 19 Giao diện toán(2) 19 Image 20 Giao diện toán(3) 20 Image 21 Giao diện liên hệ(1) 21 Image 22 Giao diện liên hệ(2) .21 Image 23 Giao diện liên hệ(3) .22 0 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 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: THIẾT KẾ WEBSITE LINH KIỆN ĐIỆN TỬ L-STORE 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 CẢM ƠN Em xin chân thành cảm ơn Quý Thầy Cô khoa Kỹ thuật - Công nghệ trường Đại học Thủ Dầu Một tạo điều kiện cho em thực đề tài Em xin chân thành cảm ơn Nguyễn Hữu Vĩnh tận tình hướng dẫn, giúp đỡ em suốt trình thực Chân thành cảm ơn Quý Thầy Cô khoa Kỹ thuật - Công nghệ trường Đại học Thủ Dầu Một, giảng, kiến thức giúp em làm tốt đề tài Trong phạm vi khả cho phép, em cố gắng để hoàn thành đề tài cách tốt Song, chắn khơng tránh khỏi thiếu sót Em kính mong nhận thông cảm ý kiển đống góp từ Q Thầy Cơ 0 GIỚI THIỆU Xã hội ngày phát triển, nhu cầu sử dụng thiết bị công nghê cao Đặc biệt vi tính, laptop khơng thể thiếu Để góp phần vào việc phát triển công nghệ hệ thống thông tin giúp cho kinh doanh dễ dàng tương lai em hướng tới thiết lập website kinh doanh linh kiện điện tử cho cửa hàng Ngành Công nghê thông tin Việt Nam liên tục có bước phát triển tích cực Sự phát triển công nghệ 4.0 không ngừng vươn tới kinh tế quốc gia Trong bối cảnh đó, việc xây dựng website vơ cần thiết nhằm cao hiệu kinh doanh cao chất lượng phát triển quy mơ, ảnh hưởng lĩnh vực kinh tế xã hội, đời sống ngày mở rộng Để góp phần vào việc phát triển cơng nghệ thông tin giúp cho kinh doanh dễ dàng em hướng tới thiết lập website linh kiện điện tử Đối với cửa hàng nâng cao lực cạnh tranh Thương mại điện tử 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 Hiện nay, người có xu hướng ngồi nhà mua sắm thứ có linh kiện điện tử để mua thay linh kiện hư hỏng hay nâng cấp máy đề mua website Wedsite giá thành rẻ hỗ trợ nhiều mạng giúp ta thiết kế nhanh website bán hàng gần gủi dễ sử dụng cho người dùng Chính yếu tố báo cáo em chon đề tài: “Thiết kế website linh kiện điện tử L-store” Trong trình thực đề tài, kiến thức có hạn thời gian thực ngắn nên đồ án khơng thể tránh khỏi thiếu sót, em mong giúp đỡ, góp ý q thầy để đồ án hồn thiện Em xin chân thành cảm ơn 0 CHƯƠNG I: TỔNG QUAN ĐỀ TÀI TÊN ĐỀ TÀI “THIẾT KẾ WEBSITE LINH KIỆN ĐIỆN TỬ L-STORE” MỤC TIÊU ĐỀ TÀI − Xây dựng website mua bán linh kiện, thiết bị điện tử qua mạng với đầy đủ chức − Phục vụ nhu cầu khách hàng tốt có hiệu − Tiết kiệm chi phí cho cửa hàng trình phân phối sản phẩm Ý NGHĨA CỦA ĐỀ TÀI − Đưa sản phẩm cửa hàng đến gần với người mua hàng − Giới thiệu, quảng bá cửa hàng ĐỐI TƯỢNG CỦA ĐỀ TÀI − Đối tượng chủ yếu đề tài linh kiện, thiết bị điện tử MỘT SỐ TRANG CHÍNH CỦA WEBSITE − Trang chủ: Hiển thị đầy đủ chức website sản phẩm có website − 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 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 CHƯƠNG II GIỚI THIỆU CÔNG NGHỆ 0 GIỚI THIỆU VỀ HTML 1.1 HTML ? − 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 để hiển 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 dụng 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 html htm − 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, Visual code, … sử dụng nhiều Adobe Dreamweaver GIỚI THIỆU VỀ CSS 2.1 CSS ? Trong lĩnh vực xây dựng, có trang trí nội thất; lĩnh vực thẩm mỹ làm đẹp, có kỹ thuật make-up; lĩnh vực thiết kế web có CSS Đây định nghĩa giàu hình ảnh Pearl (nhưng thực tế (smile) Còn CSS (Cascading Style Sheets mà Pearl 0 Image Giao diện website(3) #5: Image Giao diện website(4) #6: 0 Image Giao diện website(5) #7: 0 Image Giao diện website(6) - Phần #1: Logo website - Phần #2: Menu ngang gồm chức năng: Trang chủ, sản phẩm, liên hệ, giỏ hàng - Phần #3: Sản phẩm bán chạy - Phần #4: Phân loại sản phẩm - Phần #5: Danh mục sản phẩm - Phần #6: Bài viết giới thiệu - Phần #7: Footer cung cấp thông tin liên hệ 1.2 Giao diện sản phẩm  Mục Đích: Thanh menu chứa danh sách loại sản phẩm cửa hàng Khách hàng sử dụng menu để lựa chọn sản phẩm mà cần tìm  Sử dụng danh mục sản phẩm để chọn loại sản phẩm mà cần #1: Image Giao diện sản phẩm(1) #2: 0 Image Giao diện sản phẩm(2) #3: Image 10 Giao diện sản phẩm(3) 0 Image 11 Giao diện sản phẩm(4) Image 12 Giao diện sản phẩm(5) 0 Image 13 Giao diện sản phẩm(6) #4: Image 14 Giao diện sản phẩm(7) 0 #5: Image 15 Giao diện sản phẩm(8) 0 #6: Image 16 Giao diện sản phẩm(9) #7: Image 17 Giao diện sản phẩm(10) 0 - Phần #1: Chương trình sale ưu đãi - Phần #2: Thanh dọc menu chức năng: phân loại, lọc, tìm kiếm - Phần #3: Tất sản phẩm new sale - Phần #4: Mua hàng thêm vào giỏ hàng - Phần #5: Chi tiết sản phẩm - Phần #6: Mô tả sản phẩm, thông tin thêm sản phẩm đánh giá sản phẩm - Phần #7: Những sản phẩm liên quan 1.3.Giao diện toán  Mục Đích: Cho khách hàng dễ tiếp cận kiểm tra sản phẩm chọn  Chức năng: Cho phép khách hàng thực toán sản phẩm #1: Image 18 Giao diện tốn(1) 0 #2: Image 19 Giao diện toán(2) #3: Image 20 Giao diện toán(3) 0 - Phần #1: Giao diện toán sản phẩm - Phần #2: Danh sách sản phẩm giỏ hàng - Phần #3: Nhập địa xác nhận toán 1.4.Giao diện liên hệ  Mục Đích: Giúp cửa hàng tiếp cận khách hàng tốt  Chức năng: Cho phép khách hàng tìm kiếm địa liên hệ hỏi đáp đến cửa hàng #1: Image 21 Giao diện liên hệ(1) #2: Image 22 Giao diện liên hệ(2) 0 #3: Image 23 Giao diện liên hệ(3) - Phần #1: Giao diện liên hệ - Phần #2: Bản đồ - Phần #3: Chăm sóc khách hàng hỏi trả lời 0 CHƯƠNG V: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Ngày nay, việc kinh doanh cửa hàng bán nhiều mặt hàng, có nhiều khách hàng biết đến mua sản phẩm Trong năm qua, bên cạnh phát triển môi trường giao tiếp thông tin, nhu cầu sử dụng thiết bị điện tử Internet tăng cao, tạo nên thị trường mạng sôi động không thực tế Thương mại điện tử hình thức mua bán trao đổi thơng tin qua Internet Các cơng ty, cửa hàng giới thiệu tất sản phẩm hình ảnh,video thơng tin Website để khách hàng xem, tham khao lựa chọn Đây hình thức kinh doanh tiện lợi, dễ dàng đặc biệt phát triển, có hội, thuận lợi lớn cho cửa hàng đường phát triển tạo nên thành cơng tiếng nói riêng cho Website “Linh kiện điện tử L - Store” Website cung cấp cho người sử dụng chức cần thiết để tiến hành mua hàng, đặt hàng với linh kiện, thiết bị ưng ý Đối với khách hàng, hệ thống cho phép xem thông tin 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 QUẢ VÀ KINH NGHIỆM 1.1 Kết - Đã xây dựng website bán hàng tảng ngôn ngữ HTML, CSS, Adobe Dreamweaver, Javascript với đầy đủ tính cần thiết 1.2 Kinh nghiệm - Rèn luyện kỹ tự học giải vấn đề - Củng cố kiến thức thiết kế website - Sử dụng thành thạo ngôn ngữ HTML, CSS, Adobe Dreamweaver, Javascript HẠN CHẾ - Kiến thức website hạn chế - Phương thức code tổ chức code chưa tối ưu - Thời gian thực hạn chế 0 - Chưa thực đầy đủ chức HƯỚNG PHÁT TRIỂN Vì thời gian khơng cho phép kiến thức thiết kế web hạn chế nên 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:  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 q trình sử dụng 0 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 - Website WWW: http://www.hiepsiit.com - Website https://coccoc.com/search#query=Webcoban.vn 0 ... thành cảm ơn 0 CHƯƠNG I: TỔNG QUAN ĐỀ TÀI TÊN ĐỀ TÀI “THIẾT KẾ WEBSITE LINH KIỆN ĐIỆN TỬ L- STORE? ?? MỤC TIÊU ĐỀ TÀI − Xây dựng website mua bán linh kiện, thiết bị điện tử qua mạng với đầy đủ chức −... hàng gần gủi dễ sử dụng cho người dùng Chính yếu tố báo cáo em chon đề tài: ? ?Thiết kế website linh kiện điện tử L- store? ?? Trong trình thực đề tài, kiến thức có hạn thời gian thực ngắn nên đồ án... thành cơng tiếng nói riêng cho Website ? ?Linh kiện điện tử L - Store? ?? Website cung cấp cho người sử dụng chức cần thiết để tiến hành mua hàng, đặt hàng với linh kiện, thiết bị ưng ý Đối với khách