Đồ án cơ sở 1 thiết kế website bán áo quần

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT HÀN KHOA KỸ THUẬT MÁY TÍNH  ĐỒ ÁN CƠ SỞ THIẾT KẾ WEBSITE BÁN ÁO QUẦN SVTH: Lớp: Đoàn Thanh Linh 22CE GVHD: Trần Thị Trà Vinh Đà Nẵng, ngày…tháng…năm 2023 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT HÀN KHOA KỸ THUẬT MÁY TÍNH  ĐỒ ÁN CƠ SỞ THIẾT KẾ WEBSITE BÁN ÁO QUẦN SVTH: Lớp: Đoàn Thanh Linh 22CE GVHD: Trần Thị Trà Vinh Đà Nẵng, ngày…tháng…năm 2023 LỜI CẢM ƠN Được giúp đỡ tận tình ThS Trần Thị Trà Vinh việc giảng dạy giải đáp lời thắc mắc sinh viên chúng em Trong trình rèn luyện, học tập chúng em tiếp thu kiến thức quý báu thầy cô môi trường Đại Học, kinh nghiệm để chúng em hoàn thành đồ án cách thuận lợi Xin gửi lời cám ơn đến anh/chị khóa với bạn bè K22 động viên đánh giá đồ án để chúng em mài dũa tiếp thu nhiều điều tích cực làm đồ án cuối kì Trong trình làm gặp khơng khó khăn nhận lại nhiều đánh giá người nhờ đoàn kết bạn nhóm động viên bạn lớp góp phần giúp chúng em hồn thành đề tài thời hạn Xin chân thành cảm ơn! NHẬN XÉT (Của giảng viên hướng dẫn) Đà Nẵng, ngày…tháng…năm 2023 Giảng viên hướng dẫn ThS Trần Thị Trà Vinh MỤC LỤC LỜI CẢM ƠN NHẬN XÉT MỤC LỤC .5 DANH MỤC HÌNH ẢNH Ch ương 1: M ởĐầầu 1.1 Bốối c nh ả th ự c hi ện đềầ tài 1.2 Đềầ xuầốt nội dung thực 1.3 Phương pháp 1.3.1 Ph ương pháp tri n ể khai th ự c hi ện đềầ tài 1.4 Đặc điểm 1.5 Chức 1.5.1 Vềầ giao diện .9 1.5.2 Ưu điểm 10 1.5.3 Nhược điểm .10 1.6 M tộsốố website có 10 1.6.1 Nowsaigon .10 1.6.2 The shirt you need 11 1.7 Kềốt 11 1.8 Chức .11 Ch ươ ng 2: C ơS ởLý Thuyềốt 13 2.1 Khái niệm website 13 2.1.1 Đ m ểt website ộ ho t đạ ng ộcầần yềốu tốố: 13 2.1.2 Có hai loạ i web, web tnh web động: .13 2.2 Lịch sử hình thành phát triển c website 14 2.2.1 Lịch sử Web .14 2.3 Lí làm cho Web thành cống đềốn nh vậy? .15 2.4 Lợi ích có website 15 Chương 3: Phương Pháp Nghiền Cứu 16 3.1 Gi i thi uệvềầ đốầ án 16 3.1.1 Các ph ương pháp cống ngh ệs ửd ụ ng đốầ án 16 3.1.2 Hình th ứ c th ểhi nệ đốầ án 17 3.1.3 Quy mố đốầ án 17 Chương 4: Triển Khai Xầy Dựng 18 4.1 Tổng quan website 18 4.1.1 Trang chủ 18 4.1.2 Trang đăng nh ập 18 4.1.3 Trang giới thi ệu 19 4.1.4 Trang mua hang .19 4.1.5 Trang giỏ hàng 19 4.2 Code trền VSCode 20 4.2.1 Trang chủ 20 4.2.2 Trang đăng nh ập 21 Ch ươ ng 5: KẾẾT LU ẬN VÀ HƯỚNG PHÁT TRIỂN 22 5.1 Kềốt lu ận .22 5.1.1 Qua vi c ệlàm đốầ án này, em xin đ a kềốt qu ả thu đ ược nh sau: 22 5.1.2 Vềầ h nạ chềố .22 5.2 Hướng phát triển 22 5.2.1 V i nh ngữh n chềố tốần t iạnều trền, h ướ ng nghiền c ứ u d ựkiềốn nh sau: 22 DANH MỤC HÌNH ẢNH Hình 1.1 Trang chủ Nowsaigon Hình 1.2 Trang chủ The shirt you need .10 Hình 3.1 Photoshop 15 Hình 3.2 VSCode .15 Hình 4.1 Trang chủ website 17 Hình 4.2 Trang đăng nhập website 17 Hình 4.3 Trang giới thiệu website .18 Hình 4.4 Trang mua hàng website 18 Hình 4.5 Trang giỏ hàng website 19 Hình 4.6 Code HTML trang chủ website .19 Hình 4.7 Code CSS trang chủ website 19 Hình 4.8 Code HTML trang đăng nhập website 20 Hình 4.9 Code CSS trang đăng nhập website 20 Chương 1: Chương 2: Mở Đầu 2.1 Bối cảnh thực đề tài Trên thị trường có nhiều cơng ty cửa hàng bn bán loại hàng hóa điện thoại, máy tính, quần áo,… Chính nhu cầu quảng bá hình ảnh cơng ty, cửa hàng ngày đầu tư mở rộng nhiều mặt Giới thiệu sản phẩm rộng rãi công chúng mở rộng thị trường phần tất yếu chiến lược phát triển kinh doanh công ty Với bùng nổ internet, ngày có hàng trăm triệu người truy cập internet với nhu cầu tìm tin tức, mua bán cách thuận tiện, nhanh chóng Nhận tính thiết thực điều em nhận đề tài: “ Xây dựng website thời trang” sử dụng ngôn ngữ HTML CSS để đáp ứng nhu cầu Mục đích đề tài đáp ứng nhu cầu mua bán, xem thơng tin sản phẩm cách nhanh chóng tiện lợi, an toàn 2.2 Đề xuất nội dung thực  Xây dựng website thời trang thiết thực nhằm giúp người dùng dễ dàng tìm kiếm thơng tin dòng sản phẩm mà họ thắc mắc  Xây dựng website cho phép người dùng mua hàng, đăng bán website cách nhanh chóng tiện lợi mà không cần thủ tục phức tạp  Xây dựng website có tốc độ tải trang nhanh chóng hạn chế thủ tục rườm rà tốn thời gian  Website đảm bảo bảo mật thông tin cá nhân khách hàng Website công khai, minh bạch cung cấp thơng tin xác nhằm đem lại tin cậy cho người dùng 2.3 Phương pháp 2.3.1 Phương pháp triển khai thực đề tài  Trước tiên ta phải phân tích thiết kế giao diện, hệ thống website phần mềm StarUML  Dựa kiến thức học, sử dụng ngôn ngữ HTML, CSS, JavaScript để xây dựng website  Tham khảo, tiếp thu ý kiến, thông tin từ giáo viên hướng dẫn để hoàn thiện website tốt  Tìm hiểu website tương tự để rút lĩnh vực cịn thiếu sót để bổ sung khắc phục điểm hạn chế website khác 2.4 Đặc điểm Trang web có hướng dẫn rõ ràng, menu điều hướng Nội dung trực quan Website có đầy đủ tính website mua bán hàng Giao diện xây dựng bắt mắt, đẹp giúp người dung cảm thấy thú vị sử dụng trang web Người dùng tìm kiếm xem thơng tin chi tiết sản phẩm, xem đánh giá khách hàng hay trực tiếp đánh giá theo ý kiến riêng Mỗi mặt hàng mà người dùng muốn đăng bán phải chờ kiểm duyệt admin trước đăng bán 2.5 Chức 2.5.1 Về giao diện Phần trang chủ website giới thiệu tổng quan website Tại bạn xem làm việc hay địa shop Người dùng xem chi tiết làm việc, địa cụ thể shop, người dùng biết xem đối tác khách hàng từ tăng tính tin cậy mặt hàng mà muốn tham khảo Người dùng xem chi tiết sản phẩm hàng muốn từ đưa định cho riêng Người dùng đọc bình luận đánh giá hàng mà mua hay định mua Thơng qua giỏ hàng người dùng xem xét trước đưa định Trang web cập nhật tin tức liên quan đến sản phẩm giá từ giúp người dùng nắm bắt thơng tin cách khách quan Để giúp hồn thiện trang web trang web cung cấp chức phản hồi lại người quản trị người dùng gửi câu hỏi thơng qua email trang web 2.5.2 Ưu điểm Giao diện hội tụ ba yếu tố độc đáo, tinh tế đại Hình ảnh sắc nét sống động Tốc độ tải trang web nhanh Website tưởng thích với thiết bị di động hay máy tính thị trường Ngồi trang web thiết kế dễ dàng sử dụng tiện nâng cấp tương lai Website tích cực chế bảo mật giúp đảm bảo thông tin khách hàng không bị đánh cắp 2.5.3 Nhược điểm Hệ thống chưa tối ưu, số chức cịn chưa hồn thiện 2.6 Một số website có 2.6.1 Nowsaigon Hình 1.1 Trang chủ Nowsaigon Về giao diện: giao diện đơn giản, thiết kế bố cục hợp lí Những danh mục sản phẩm để đầu trang giúp người dùng dễ dàng tìm kiếm sản phẩm mà cần mua Bên cạnh người dùng tìm kiếm theo có, trị chuyện trực tiếp với admin page để nằm rõ nhiều chi tiết Ưu điểm: giao diện website đơn giản đại Hình ảnh sống động sắc nét Tốc độ tải trang cực nhanh Website tương thích thiết bị di động phổ biến thị trường Website thiết kế dễ sử dụng, tiện nâng cấp tương lai Website cung cấp nhiều chức thông tin cho người dùng Nhược điểm: chức cịn hạn chế 2.6.2 The shirt you need Hình 1.2 Trang chủ The shirt you need Về giao diện: trang web xậy dựng với giao diện đơn giản bố cục đơn giản Trang web chủ yếu cung cấp cho người dùng thông tin loại xe khác theo khu vực toàn quốc Ưu điểm: giao diện website đơn giản Hình ảnh đẹp mắt sắc nét Tốc độ tải trang nhanh Website tương thích thiết bị di động phổ biến thị trường Website thiết kế dễ sử dụng Nhược điểm: chức hạn chế 2.7 Kết 2.8 Chức Giới thiệu tổng quan website thương hiệu thời trang Cung cấp tính giúp người dùng xem thơng tin sản phẩm từ thương hiệu lưu lại thơng tin mà muốn xem sau Nếu người dùng tìm thấy sản phẩm ưng ý người dùng mua thơng qua thủ tục định sẵn, người dùng đánh giá bình luận cho nhiều sản phẩm trang web Trang web cung cấp phương thức đăng kí đăng nhập giúp cho khách hàng tiện việc theo dõi hay cập nhật xe trang web nhờ email thông báo gửi cho người dùng Mọi thơng tin khách hàng đăng kí bảo mật để đảm bảo an tồn thơng tin cho người dùng Người dùng xem thông tin chi tiết sản phẩm mà người dùng muốn xem Ngồi người dùng xem số lượng đánh giá sản phẩm bình luận người dùng bình luận đánh giá trước Chương 3: Cơ Sở Lý Thuyết 3.1 Khái niệm website Website (tiếng Anh: website), cịn 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 3.1.1 Để 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.1.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, 3.2 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 hoàn toàn khác Internet có nghĩa “mạng lưới tồ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 phương tiện để giao tiếp thư điện tử, trò chuyện toàn cầu mạng toàn cầu 3.2.1 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 toà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 3.3 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 3.4 Lợi ích có website  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  Chương 4: Phương Pháp Nghiên Cứu 4.1 Giới thiệu đồ án 4.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 Photoshop, Photoshop phầm mền chỉnh sửa, cắt ghép hình ảnh, thiết kế hiệu ứng ảnh Hình 3.3 Photoshop Website code phần mềm VSCode phần mềm phổ biến giúp người dùng linh động, dễ dàng tạo website Hình 3.4 VSCode 4.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 khác nhau, liên kết với Trang web tạo ấn tượng nhờ xếp bố cục hình ảnh, thơng tin lạ, bắt mắt thu hút người xem 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 4.1.3 Quy mô đồ án Trang web gồm trang Mỗi trang có bố cục khác dựa phong cách chung, xuyên suốt toàn trang web Chương 5: Triển Khai Xây Dựng 5.1 Tổng quan website 5.1.1 Trang chủ Hình 4.5 Trang chủ website 5.1.2 Trang đăng nhập Hình 4.6 Trang đăng nhập website 5.1.3 Trang giới thiệu Hình 4.7 Trang giới thiệu website 5.1.4 Trang mua hang Hình 4.8 Trang mua hàng website 5.1.5 Trang giỏ hàng Hình 4.9 Trang giỏ hàng website 5.2 Code VSCode 5.2.1 Trang chủ Hình 4.10 Code HTML trang chủ website Hình 4.11 Code CSS trang chủ website 5.2.2 Trang đăng nhập Hình 4.12 Code HTML trang đăng nhập website Hình 4.13 Code CSS trang đăng nhập website Chương 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1 Kết luận 6.1.1 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 người dùng tương tác với việc đăng nhập đơn giản vào website  Website hỗ trợ tiếng Việt Unicode 6.1.2 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 6.2 Hướng phát triển 6.2.1 Với hạn chế tồn nêu trên, hướng nghiên cứu dự kiến sau:  Tìm hiểu thêm cách xử lí tìm kiếm webstite  Khai thác thêm ứng dụng responsive cho trang website…