BÁO CÁO THIẾT KẾ WEB ĐỀTÀI XÂY DỰNG WEB SITE SHOP THỜI TRANG

lOMoARcPSD|9242611 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THƠNG VIỆT HÀN Khoa Khoa Học Máy Tính BÁO CÁO THIẾT KẾ WEB ĐỀ TÀI: XÂY DỰNG WEBSITE SHOP THỚI TRANG Sinh viên thực : NGÔ MINH PHÚ BÙI VĂN NHẬT ĐÀO LÊ QUỐC KHÁNH Giảng viên hướng dẫn : Ths LƯƠNG KHÁNH TÝ Lớp : 21IT3 Đà Nẵng, tháng năm 2022 lOMoARcPSD|9242611 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT HÀN Khoa Khoa Học Máy Tính THIẾT KẾ WEB WEBSITE SHOP THỜI TRANG Đà Nẵng, tháng năm 2022 lOMoARcPSD|9242611 MỞ ĐẦU Ngày với bùng nổ Internet, ngày mở rộng khắp nơi giới, cần máy tính kết nối Internet việc sử dụng nguồn tài nguyên vô phong phú Việc doanh nghiệp dần hoàn thiện máy tổ chức cách linh hoạt việc ứng dụng công nghệ thông tin vào hoạt động kinh doanh doanh nghiệp việc làm tất yếu, cải tiến doanh nghiệp chủ động xây dựng trang thơng tin riêng để quảng bá hình ảnh cơng ty, mặt khác để kinh doanh trực tuyến, áp dụng thương mại điện tử vào thương mại Và công cụ hữu ích cho việc phát triển xây dựng dự án công nghệ thông tin hoàn chỉnh, đáp ứng nhu cầu người dùng Đối với ngành thời trang, việc ứng dụng công nghệ thông tin giúp cho shop xử lý cơng việc xác, hiệu quả, tiết kiệm chi phí, quảng bá hình ảnh shop rộng rãi nước quốc tế Từ kiến thức học, em tìm hiểu đề tài “Xây dựng trang web shop thời trang” lOMoARcPSD|9242611 LỜI CẢM ƠN Để hoàn thành đề tài này, em xin gửi lời cảm ơn chân thành đến thầy giáo Lương Khánh Tý - giảng viên Khoa Công nghệ thông tin Truyền thông (CNTT & TT) Đại học Đà Nẵng – Người hướng dẫn - tận tình bảo hướng dẫn em để hoàn thành đồ án Em xin cảm ơn thầy cô Khoa CNTT & TT đại học Đà Nẵng truyền đạt cho em kiến thức kỹ để hồn thành đồ án Trong q trình làm đồ án cịn nhiều thiếu sót, em mong nhận bảo, đóng góp ý kiến thầy để em có điều kiện bổ sung, khắc phục hạn chế đồ án sở Em xin chân thành cảm ơn! Đà Nẵng, tháng năm 2022 lOMoARcPSD|9242611 NHẬN XÉT (Của giảng viên hướng dẫn) lOMoARcPSD|9242611 MỤC LỤC CHƯƠNG 1: GIỚI THIỆU 1.1 Tổng quan 1.1.1 Lí chọn đề tài 1.1.2 Mục tiêu đề tài 1.2 Phương pháp, kết .1 1.2.1 Phương pháp thực 1.2.2 Kết đạt CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Cơ sở lý luận thực tiễn .4 2.1.1 Khái niệm website 2.1.2 Có hai loại web: Web tĩnh Web động: 2.1.3 Lịch sử hình thành phát triển website CHƯƠNG PHƯƠNG PHÁP NGHIÊN CỨU 1.1 Giới thiệu đồ án 3.1.1 Các phương pháp công nghệ sử dụng đồ án 3.1.2 Hình thức thể đồ án: 3.1.3 Quy mô đồ án 3.2 Phương pháp nghiên cứu 3.2.1 Phương pháp 1: Nghiên cứu thực tế 3.2.2 Phương pháp 2: Đọc tham khảo sách báo 3.2.3 Phương pháp 3: Tham khảo Internet CHƯƠNG TRIỂN KHAI XÂY DỰNG .9 Code Visual studio code : CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .11 lOMoARcPSD|9242611 DANH MỤC HÌN Hình Trang chủ Hình Sản phẩm Hình Giới thiệu Hình Hướng dẫn đặt hàng Hình Bố cục rõ ràng, đơn giản bắt mắt Hình Code CSS 11 Hình Thanh menu 11 Hình Code đăng nhập 12 Y lOMoARcPSD|9242611 DANH MỤC CỤM TỪ VIẾT TẮT STT Cụm từ Công nghệ phần mềm Công nghệ thông tin Đại học Đà Nẵng Viết tắt CNPM CNTT ĐHĐN lOMoARcPSD|9242611 CHƯƠNG 1: GIỚI THIỆU 1.1 Tổng quan 1.1.1 Lí chọn đề tài - Ngày nay, bán hàng trực tuyến phổ biến rộng rãi giới, hình thức bán hàng khơng giúp cho nhà phân phối sản phẩm tiết kiệm nhiều chi phí quản lý, kho bãi mà giúp cho người tiêu dùng cập nhập thông tin sản phẩm cách nhanh chóng, đầy đủ, tiết kiệm chi phí, thời gian lại Thay phịng trưng bày trang web hiển thị tất sản phẩm khách hàng đặt mua lúc nơi đâu Cùng với giao diện thân thiện, trang web giúp khách hàng dễ dàng lựa chọn mua sản phẩm thích 1.1.2 Mục tiêu đề tài Với yếu tố thuận lợi bên bên ngoài, với tiềm phát triển thị trường kinh doanh bên website Việt Nam sở để chúng em tin website shop thời trang Degrey trở thành:  Nơi giao tiếp hiệu với khách hàng  Cung cấp cho khách hàng hội mua hàng hóa sử dụng dịch vụ với trợ giúp hệ thống toán điện tử mà không cần rời khỏi nhà  Cung cấp thông tin thông báo cho khách hàng, đối tác, nhân viên hoạt động công ty phạm vi dịch vụ cung cấp;  Tăng sở khách hàng có, tiếp cận khách hàng tăng chuyển đổi thành khách hàng tiềm 1.2 Phương pháp, kết 1.2.1 1.2.2 Phương pháp thực - Đọc xem tài liệu, tìm hiễu mã nguồn mở thiết kế giao diện phù hợp với yêu cầu đặt trang web - Tham khảo mạng qua sách báo Tìm kiếm thơng tin liên quan đến thời trang - Nghiên cứu thực tế để nắm vững vấn đề liên quan đến đối tượng - Thu thập thông tin từ nhiều nguồn khác nhau, tổng hợp phân tích, rút yếu tố cần thiết để đưa vào đồ án Kết đạt - Nhóm em bước đầu xây dựng trang web thời trang mang tên Shop thời trang Degrey lOMoARcPSD|9242611 Hình Trang chủ - Em tạo tính mà trang web bán hàng cần có giới thiệu, tìm kiếm, giỏ hàng,sản phẩm, hổ trợ… Hình Sản phẩm lOMoARcPSD|9242611 Hình Giới thiệu - Em tạo cho trang web trang hướng dẫn khách hàng cách thức đặt hàng tốn Hình Hướng dẫn đặt hàng lOMoARcPSD|9242611 CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Khái niệm website Website (tiếng Anh: website), gọi trang web (có thể nhầm lẫn với "web page") trang mạng, tập hợp trang web, thường nằm tên miền tên miền phụ World Wide Web Internet Một trang web tập tin HTML XHTML truy nhập dùng giao thức HTTP Trang mạng xây dựng từ tệp tin HTML (trang mạng tĩnh) vận hành CMS chạy máy chủ (trang mạng động) Trang mạng xây dựng nhiều ngơn ngữ lập trình khác (PHP, ASP.NET, Java, Ruby on Rails, Perl, ) Website giao tiếp hiển thị cho người dùng truy cập phần mềm gọi trình duyệt website Một sơ trình duyệt website tiếng kể đến Internet Explorer cài đặt mặc định vào máy tính cài hệ điều hành windows thay Edge Windows 10 hay Chrome phát triển Google Firefox phát triển Mozilla Để website hoạt động cần yếu tố: - Cần có tên miền - Nơi lưu trữ website - Nội dung trang web sở liệu thông tin 2.2 Có hai loại web: Web tĩnh Web động: - - Website tĩnh website mà người quản trị (những người khơng phải lập trình viên) khơng thể tùy ý thay đổi nội dung hình ảnh mà phải cần kiến thức HTML Website tĩnh viết hoàn toàn dựa tảng HTML CSS thêm hiệu ứng từ Javascript muốn Website động website viết kèm theo công cụ quản trị để tùy biến nội dung dành cho webmaster (người quản trị) dễ dàng thay đổi nội dung, hình ảnh Website động thiết kế lập trình viên để cho phép website thay đổi nội dung thường xuyên Một số công nghệ, ngôn ngữ để xây dựng website động bao gồm PHP, ASP.NET, Java, 2.3 Lịch sử hình thành phát triển website Nhiều người thường có thói quen sử dụng hai từ World wide web Internet thay cho nhau, thực lại hai khái niệm hồn tồn khác Internet có nghĩa “mạng lưới toàn cầu mạng lưới”, liên kết hàng triệu máy tính chia sẻ thông tin thông qua tập hợp giao thức chia sẻ phần mềm Ngược lại, có ứng dụng lại sử dụng mạng Internet Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 phương tiện để giao tiếp thư điện tử, trị chuyện tồn cầu mạng tồn cầu Lịch sử Web Web xuất lần vào năm 1989 nhà vật lý học Tim Berners-Lee muốn tìm cách thức giúp nhà khoa học trao đổi tài liệu nghiên cứu thông qua Internet Berners-Lee muốn khơng cách in văn trực tiếp Internet mà cách hiển thị đường dẫn để đưa người đọc đến phần khác tài liệu, chí dẫn đến tài liệu đặt nơi khác mạng Internet Điều có nghĩa tạo nên hệ thống tài liệu kết nối tồn cầu Thực Berners-Lee khơng phải người đưa ý tưởng Ngay từ năm 40, nhà nghiên cứu khác mô tả hệ thống tương tự, vào khoảng năm 80, ứng dụng Ngôn ngữ đánh dấu tổng quát chuẩn (SGML) sử dụng tập hợp phức tạp siêu liên kết để kết nối tài liệu lại với Nhưng Berners-Lee phát triển hệ thống mà khơng địi hỏi phải sử dụng phần mềm mắc tiền hay kỹ lập trình cao Ơng phát minh giao thức cho việc chuyển tải tài liệu lên mạng Internet, gọi Giao thức truyền siêu văn (HTTP) phát minh đơn giản lệnh gọi Ngôn ngữ đánh dấu siêu văn (HTML) để mô tả cấu trúc tài liệu Web bùng nổ vào năm 1993 sinh viên tốt nghiệp trường Đại học Illinois tên Marc Andreessen phát triển thành công phần mềm giúp hiển thị trang Web dạng đồ họa Phần mềm Andreessen, gọi “trình duyệt”, cho phép người sử dụng hiển thị hình ảnh văn trang web Kết Web lớn mạnh nhanh chóng, vượt khỏi phạm vi sử dụng nhỏ hẹp ban đầu nhà khoa học Sau Andreessen tiếp tục đồng sáng lập Netscape Communications, đánh dấu cho khởi đầu cách mạng Internet Lí làm cho Web thành cơng đến vậy? Web phát triển khơng dễ sử dụng mà cịn thực trang Web riêng họ Ngơn ngữ HTML dễ học Nó sử dụng tập hợp đuôi đơn giản giúp mô tả đầu đề, đoạn văn, danh sách, bảng thành tố khác trang Web Mới đây, nhiều công ty phát triển phần mềm xử lý tự động hóa, làm cho việc học HTML trở nên khơng cịn cần thiết Nhờ đó, hàng triệu người với vốn kinh nghiệm ỏi lập trang Web cho riêng Lợi ích có website Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Chi phí thấp so với ấn phẩm thông thường Thị trường mở rộng Đa dạng hóa doanh thu Phục vụ 24/7 365 ngày Thuận tiện Thêm giá trị gia tăng hài lòng Cải thiện tin cậy Cơ hội tăng trưởng, dễ dàng nhận thông tin phản hồi Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 CHƯƠNG PHƯƠNG PHÁP NGHIÊN CỨU 3.1 Giới thiệu đồ án 3.1.1 Các phương pháp công nghệ sử dụng đồ án Thiết kế giao diện trang web tảng Bootstrap photoshop Photoshop phầm mền chỉnh sửa, cắt ghép hình ảnh, thiết kế hiệu ứng ảnh, Bootstrap giúp tạo giao diện web đẹp mắt với hiệu ứng sinh động Website code phần mềm Visual studio code phần mềm phổ biến giúp người dùng linh động, dễ dàng tạo website 3.1.2 Hình thức thể đồ án: Thiết kế Website có chiều rộng max, chiều dài phụ thuộc vào nội dung trang web Các trang web trang riêng biệt, có bố cục tương đồng, liên kết với Trang web tạo ấn tượng nhờ xếp bố cục hình ảnh,đơn giản dễ dàng sử dụng Trọng tâm web trang chủ, trang phát triển dựa mơ trang chủ Các trang có tính đồng liên kết với Hình Bố cục rõ ràng, đơn giản bắt mắt 3.1.3 Quy mơ đồ án Trang web gồm trang Mỗi trang có bố cục giống nhau, xun suốt tồn trang web Trang web không giới thiệu, mua bán mà cịn cập nhật thơng tin nhanh chóng tin tức hay xu hướng thời trang ngày 3.2 Phương pháp nghiên cứu 3.2.1 Phương pháp 1: Nghiên cứu thực tế Em thực tế số địa điểm, trải nghiểm số shop thời trang.Vì kiện khơng cho phép nên phương pháp nhóm chúng em chưa thực đúc kết nhiều thông tin Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 3.2.2 Phương pháp 2: Đọc tham khảo sách báo Sách báo nói thời trang theo em biết vơ nhiều, nhóm chúng em có tham khảo qua vài trang báo thời trang, sách nói th Tuy việc đúc kết thông tin từ sách báo ưu điểm phương pháp lại tốn nhiều thời gian 3.2.3 Phương pháp 3: Tham khảo Internet Phương pháp theo em nghiên cứu phương pháp tối ưu nhất, nhanh mà thông tin nhận vô nhiều, chúng em thu thập thông tin từ phương pháp đa phần phương pháp chiếm phần lớn Table Phương pháp Nghiên cứu thực tế Ưu điểm Nhược điểm Đọc tham khảo sách báo Tham khảo internet Linh động, nhận -Tốn thời gian nhiều thông tin Có thể trải -Tốn thời gian nghiệm, tham -Phạm vi rộng quan thực tế, đưa góp ý chân thực Kết luận Chưa ưu việt Linh động, nhanh, -Đọc nhiều trang - Được dễ dàng tìm kiếm khác nhau, dễ gây thơng tin, rối thông tin tham khảo trang du lịch khác để nhìn nhận đánh giá trang web Bảng Bảng so sánh phương pháp Kết luận: Kết hợp phương pháp để nhận thơng tin xác góp phần hồn thiện trang web giúp trang web trở nên hữu ích, dễ dàng cho người dùng Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 CHƯƠNG TRIỂN KHAI XÂY DỰNG Code Visual studio code : - Sử dụng CSS, Bootstrap Javascrip để code Hình Code CSS Hình Thanh menu - Xây dựng code đăng nhập cho user: thực nhờ Javascrip CSS kết hợp với tạo giao diện sinh động Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Hình Code đăng nhập Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Kết luận Qua việc làm đồ án này, em xin đưa kết thu sau:  Bản thân tích lũy kinh nghiệm việc phân tích thiết kế hệ thống  Xây dựng website sử dụng công cụ Bootstrap JavaScrip  Cho phép tất người truy cập đến trang web để nhận xem thông tin  Cho phép user thực chức sửa, thêm hang vào giỏ, xóa thông tin cá nhân Về hạn chế:  Giao diện chưa tốt  Chương trình chưa kiểm tra hết trường hợp xảy Hướng phát triển      Xây dựng giao diện thân thiện với người dùng Kiểm tra trường hợp cịn thiếu sót Tận dụng mạnh ngơn ngữ lập trình Xây dựng thêm nhiều chức để hệ thống đầy đủ tồn vẹn Tìm hiểu xu hướng người dùng để chỉnh sửa, bổ sung hệ thống phù hợp theo yêu cầu DANH MỤC TÀI LIỆU THAM KHẢO Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 -Trang web: https://www.w3schools.com/ -Trang web: https://totoshop.vn/ -Trang web: https://nemshop.vn/ Downloaded by tran quang (quangsuphamhoak35@gmail.com) ... Mozilla Để website hoạt động cần yếu tố: - Cần có tên miền - Nơi lưu trữ website - Nội dung trang web sở liệu thơng tin 2.2 Có hai loại web: Web tĩnh Web động: - - Website tĩnh website mà người... tạo website 3.1.2 Hình thức thể đồ án: Thiết kế Website có chiều rộng max, chiều dài phụ thuộc vào nội dung trang web Các trang web trang riêng biệt, có bố cục tương đồng, liên kết với Trang web. .. cho trang web trang hướng dẫn khách hàng cách thức đặt hàng tốn Hình Hướng dẫn đặt hàng lOMoARcPSD|9242611 CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Khái niệm website Website (tiếng Anh: website), cịn gọi trang