BÁO CÁO ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: THIẾT KẾ WEBSITE THỜI TRANG ONLINE. Giảng viên hướng dẫn : TS. LÊ VĂN MINH

S ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT-HÀN BÁO CÁO ĐỒ ÁN CƠ SỞ ĐỀ TÀI: THIẾT KẾ WEBSITE THỜI TRANG ONLINE Sinh viên thực Lớp : LÊ VĂN NHẤT : 20IT4 Giảng viên hướng dẫn : TS LÊ VĂN MINH Đà nẵng, tháng năm 2021 ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT-HÀN ĐỒ ÁN CƠ SỞ THIẾT KẾ WEBSITE THỜI TRANG ONLINE Đà Nẵng, tháng năm 2021 LỜI MỞ ĐẦU - Cùng với nhiều lĩnh vực ngành nghề làm đẹp khác thời trang ln lĩnh vực kinh doanh thu hút thị hiếu quan tâm người tiêu dùng lớn Ngày với phát triển công nghệ shop thời trang việc bán trực tiếp cửa hàng chủ shop cịn trọng đến cửa hàng bán online Các cửa hàng online đa dạng mạng xã hội, website, di động Winshop giúp bạn thuận tiện việc mua sắm ! - Đề tài nhằm mục tiêu Xây dựng hệ thống bán quần áo trực tuyến đơn giản, thân thiện, dễ sử dụng, cho phép khác hàng xem thông tin đặt hàng qua mạng, người quản trị quản lý thông tin sản phẩm người dùng Vì vậy, em chọn đề tài “ thiết kế website thời trang online ” LỜI CẢM ƠN - Lời cho phép em gửi lời cảm ơn tới Thầy Cô giáo cán công tác Khoa Khoa Học Máy Tính – Trường ĐH Cơng Nghệ Thông Tin Và Truyền Thông Việt Hàn tạo điều kiện giúp đỡ em thời gian xây dựng hoàn thành đồ án - Đặc biệt em xin bày tỏ lòng biết ơn sâu sắc tới thầy Ts Lê Văn Minh người tận tình giúp đỡ, bảo nghiệp vụ trực tiếp hướng dẫn em suốt q trình hồn thành đồ án - Tuy nhiên thời gian có hạn với nhiều nguyên nhân khác, em nổ lực xong đồ án , cịn mắc phải thiếu sót hạn chế Em mong nhận thông cảm bảo Thầy Cô tất bạn Em xin chân thành cảm ơn ! NHẬN XÉT (Của giảng viên hướng dẫn) ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… …………………………………………………………………………… ………………………………………………………………………………… ……………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… … ………………………………………………………………………………… ……………………………………………………………………………… ………………………………………………………………………………… MỤC LỤC CHƯƠNG 1: GIỚI THIỆU 1.1 Tổng quan 1.2 Phương pháp, kết quả: 1.3 Cấu trúc đồ án CHƯƠNG 2: THIẾT KẾ NGHIÊN CỨU 2.1 Cơ sở lí thuyết: CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 1.4 Mơ hình tổng quan hệ thống nghiên cứu 1.5 Thiết kế chi tiết Chương Triển khai xây dựng Chương Kết luận Hướng phát triển DANH MỤC HÌNH (Chèn danh mục hình ảnh tự động: References/Insert Table of Figures, chọn nhãn phù hợp) Trang DANH MỤC CỤM TỪ VIẾT TẮT STT Cụm từ HyperText Markup Language Cascading Style Sheet Viết tắt HTML CSS … CHƯƠNG 1: GIỚI THIỆU 1.1 Tổng quan 1.1.1 Bối cảnh thực đề tài: Như biết so với khinh doanh truyền thống TMDT chi phí thấp hiệu cao Hơn với lợi công nghệ internet nên việc truyền tải thông tin sản phẩm nhanh chống thuận tiện kết hợp với phận giao hàng tận nơi thông qua bưu điện ngân hàng để toán tiền tăng thêm thuận lợi để loại hình phát triển biết nhu cầu chương trình ‘web thời trang online ‘đã đời để đáp ứng cho nhười tiêu dùng toàn quốc thơng qua hệ thống họ đặt mua sản phẩm cần thiết 1.1.2 Vấn đề cần giải quyết: - website cửa hàng bán mặt hàng không cần nhiều nhân viên ,khách hàng khơng cần trực tiến điến mua hàng mà nhà dùng vài click chuột có sản phẩm cần thiết - Website giải vấn đề chi phí thắc mắc trình sử dụng - Tiết kiệm chi phí , sử dụng đâu 1.1.3 Đề xuất nội dung thực hiện: + Thiết kế giao diện website giới thiệu loại ngôn ngữ lập trình có nhằm giúp người dùng dễ dàng xem thông tin + Thiết kế giao diện website cho phép dùng truy cập vào trang web cách nhanh chóng mà khơng thủ tục phức tạp + 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 1.2 Phương pháp, kết quả: 1.2.1 Phương pháp: - 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 - Dựa kiến thức học, sử dụng ngôn ngữ HTML, CSS, Bootstrap số cơng cụ lập trình Sublime Text để thiết kế website tĩnh - Tham khảo, tiếp thu ý kiến, thơng tin từ giảng viên hướng dẫn để hồn thiện website tốt phần mềm ngôn ngữ sử dụng 1.2.2 Kết quả: - 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 Tiện lợi cho việc người dùng tìm hiểu rõ loại ngơn ngữ lập trình 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 - Ngoài ra, trang web số chức chưa hòan thiện chưa khai thác nhiều nội dung 1.3 Cấu trúc đồ án - Chương 2: Nghiên cứu thiết kế + Đây chương nêu cụ thể lý thuyết ngơn ngữ lập trình webiste Do giúp ta hiểu cụ thể ngơn ngữ lập trình ngơn ngữ siêu văn - Chương 3: Phân tích thiết kế hệ thống + Chương tập trung vào cách thức hoạt động website miêu tả chi tiết chức để giúp cho khách hàng tiếp cận dễ dàng với trang web - Chương 4: Kết đạt + Ở chương trình bày số kết đạt được, thư viện sử dụng sau thiết kế giao diện website 10 CHƯƠNG 2: THIẾT KẾ NGHIÊN CỨU 2.1 Cơ sở lí thuyết: 1.3.1 Sơ lược ngơn ngữ lập trình web HTML: - HTML chữ viết tắt HyperText Markup Language(ngôn ngữ đánh dấu siêu văn bản) HTML sinh để tạo nên trang web với mẫu thông tin trình bày World Wide Web HTML viết lên phần mềm, trình soạn thảo văn thơng thường notepad++, editplus, trình soạn thảo chuyên dụng visual studio, sublime text 3,… Một file HTML có hai địng dạng mở rộng html htm 1.3.2 Sơ lược ngôn ngữ lập trình web CSS: - CSS (Cascading Style Sheet) Web cấu tạo từ thẻ html với thẻ html thể khung website Để chỉnh, trình bày cho đẹp mắt ta cần sử dụng ngơn ngữ CSS Đây ngôn ngữ dùng nhiều ngôn ngữ website, thường ngôn ngữ html 1.3.3 Sơ lược ngôn ngữ lập trình web Bootstrap: - Bootstrap xây dựng dựa tảng HTML templates, CSS templates Javascript để hình thành nên mẫu thiết kế có sẵn typography, forms, buttons( nút bấm), tables(bảng), navigation, modals, image carousels nhiều thành phần khác Với mục đích giúp cho nhà phát triển thiết kế reponsive cho website dễ dàng nhanh hơn, plugin Javascript tích hợp Bootstrap 1.3.4 Giới thiệu phần mềm Visual Studio Code: 1.3.4.1 Visual Code gì? - VisualCode công cụ soạn thảo mã nguồn Microsoft phát triển, giới thiệu lần đầu vào năm 2015 thức phát hành năm 2016 VSCode cài đặt sử dụng Windows, MacOS Linux VSCode mã nguồn mở hồn tồn miễn phí - Có thể nói VisualCode kết hợp tuyệt vời tính đơn giản editor công cụ hỗ trợ mạnh mẽ dành cho lập trình viên Debugger, Git, Terminal cịn nhiều Đúng 11 vậy, nhìn chung VSCode Code Editor độ hữu ích khơng cạnh IDE 1.3.5 Giới thiệu môi trường hoạt động Chrome: Google lấy thông tin từ nhiều nguồn khác nhau, bao gồm: - Trang web - Nội dung người dùng gửi, chẳng hạn nội dung người dùng gửi Google Doanh nghiệp Maps - Nội dung quét từ sách - Cơ sở liệu công khai Internet - Và nhiều nguồn khác Tuy nhiên, trang tập trung vào trang web Google thực ba bước để tạo kết từ trang web: 1.Thu thập liệu: - Bước tìm trang tồn web Google không lưu giữ danh mục trung tâm trang web, đó, chúng tơi phải liên tục tìm kiếm trang thêm trang vào danh sách trang biết Google biết đến số trang chúng tơi truy cập trang từ trước Google tìm thấy trang khác theo đường liên kết từ trang biết đến trang Ngoài ra, phát số trang khác chủ sở hữu trang web gửi danh sách trang để Google thu thập liệu Nếu bạn sử dụng nhà cung cấp dịch vụ lưu trữ web quản lý, họ u cầu Google thu thập liệu trang bạn tạo cập nhật - Khi phát URL trang, Google truy cập thu thập liệu trang để tìm hiểu nội dung trang Google hiển thị trang phân tích nội dung văn lẫn nội dung văn bố cục hiển thị tổng thể để định vị trí trang kết Tìm kiếm Càng hiểu rõ trang web bạn Google hiển thị trang cho người tìm kiếm nội dung bạn cách phù hợp nhiêu 2.Lập mục: - Sau tìm thấy trang, Google cố gắng tìm hiểu nội dung trang Q trình gọi lập mục Google phân tích nội dung trang, lập danh mục hình ảnh tệp video nhúng trang cố gắng tìm hiểu trang theo cách khác Thơng tin lưu trữ mục Google – sở liệu khổng lồ lưu trữ nhiều máy tính 3.Phân phát (và xếp hạng): - Khi người dùng nhập cụm từ tìm kiếm, Google cố gắng tìm câu trả lời phù hợp mục dựa nhiều yếu tố Google cố gắng xác định câu trả lời có chất lượng cao xem xét yếu tố cung cấp trải nghiệm người dùng tốt câu trả lời phù hợp nhất, vị trí, ngơn ngữ thiết bị người dùng (máy tính điện thoại) 12 1.3.5.1 Những tính mạnh mẽ VisualCode: - Nói đến tính hỗ trợ lập trình viên từ lúc bắt đầu, VSCode cho thấy vượt trội so với Code Editor khác Tiêu biểu số tính kể đến như: IntelliSense: - IntelliSense kết hợp code auto-complete trí tuệ nhân tạo (AI) Tính cung cấp loạt đề nghị với gợi ý mô tả ngắn ta viết code Những gợi ý tính tốn dựa theo nhân tố bối cảnh ngôn ngữ lập trình, cú pháp, biến, hàm, code file - hết Code Editor đại có IntelliSense, phần mềm chun nghiệp VisualCode Đây tính nâng cao hiệu suất lập trình khơng thể thiếu lập trình viên chuyên nghiệp - VisualCode cung cấp sẵn IntelliSense cho ngơn ngữ lập trình JavaScript, CSS, HTML, TypeScript Ngồi bạn cài thêm IntelliSense cho ngơn ngữ khác thơng qua extension, bạn tự custom tính cho phù hợp với mình, tiện q khơng nào! Tích hợp sẵn Git: - Nhu cầu làm việc nhóm lưu trữ khơng thể thiếu, tích hợp Git vào Code Editor tính lựa chọn đắn Git VisualCode cung cấp cho bạn git action commit code, pull, push,… Và qua phiên việc hỗ trợ Git đầy đủ Debugger: - Một tính VisualCode khả hỗ trợ debug tuyệt vời Theo mặc định, VisualCode kèm theo trình Debug hỗ trợ NodeJS Nhưng tất nhiên, lần nữa, bạn cài thêm extension để debug cho ngơn ngữ khác Tích hợp Terminal: - Terminal chương trình giao diện cửa sổ dòng lệnh (command line interface) Cũng Git, nhu cầu sử dụng terminal lập trình viên vơ quan trọng Trên VisualCode, bạn mở nhiều tab terminal thư mục làm việc tại, điều làm tăng hiệu suất công việc lên nhiều 13 Khả tùy chỉnh mở rộng: - VisualCode cung cấp khả tùy chỉnh tuyệt vời dành cho người dùng, từ theme, font chữ, kích thước đến tùy chỉnh tính năng, keyboard shortcut, snippets, coding style,… vơ linh hoạt Ngồi bạn cịn tùy chỉnh workspace tiện lợi cho loại dự án - Cũng Code Editor/IDE khác, VisualCode có khả mở rộng thông qua việc cài thêm extension CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 1.4 Mơ hình tổng quan hệ thống nghiên cứu Hình 3.1: Sơ đị ngữ cảnh 1.5 Thiết kế chi tiết Hình 3.2.1: Trang chủ 14 Chương Triển khai xây dựng 4.1 Yêu cầu toán đặt Thiết kế thời trang online Người dùng : + xem cụ thể sản phẩm + liên hệ trợ giúp + đánh giá góp ý Admin : +cập nhật sản phẩm + nắm bắt nhu cầu người dùng 4.2 tính website - Giao diện : Hình 4.2.1: Giao diện • Trình bày trang nhã , đơn giản thân thiện • Nội dung hiển thị chủ yếu : hinh ảnh chức • Có banner đổi hình javascript chuyển động nhẹ Hình 4.2.1: Giao diện • Hiển thị danh mục sản phẩm • Hiển thị chức 15 Hình 4.2.1: Giao diện • Hiển thị mục góp ý • Cho phép xem nhanh u thích xem sản phẩm 4.3: cách tiếp cận giải vấn đề Ta dùng phương pháp hướng đối tượng để tiếp cận vấn đề dễ ,tạo nên khung hình nhìn tổng thể vấn đề 16 Chương Kết luận Hướng phát triển Đồ án xây dựng hệ thống website thời trang online Qua trình thực đồ án ,em tổng hợp lại kiến thức thời gian học trường Đồng thời em tìm hiểu nắm bắt wuy trình xây dựng website Đồ án có gấn đầy đủ phần website thời trang online Vì thời gian có hạn , vốn kiến thức chưa đủ kinh nghiệm thực tế chưa nhiều nên việc phân tích tốn tương đối thực đầy đủ trang web nhiên chưa mô tả khía cạnh vấn đề xây dựng hệ thống với chức có chức chưa đầy đủ , nhiều chức có chưa tiện dụng đơn giản 17 PHỤ LỤC (kèm theo) Phần bao gồm nội dung cần thiết nhằm mimh họa hỗ trợ cho nội dung luận văn như: số liệu, mẫu biểu, tranh ảnh… Phụ lục khơng dày phần luận văn 18 size 13, …………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… 19