ĐỒ ÁN CƠ SỞ 1ĐỀ TÀI:Showroom Trưng bày sản phẩm tạo kiểu và chăm sóc tóc nam The Family

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ ĐỀ TÀI: Showroom Trưng bày sản phẩm tạo kiểu chăm sóc tóc nam The Family Sinh viên thực : NGUYỄN XUÂN THỊNH (19IT5) DƯƠNG VĂN LỘC (19IT4) Giảng viên hướng dẫn : THS HÀ THỊ MINH PHƯƠNG Đà nẵng, tháng năm 2020 ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ Ngày nay, với phát triển đất nước ngành Cơng nghệ thơng tin có bước phát triển mạnh mẽ không ngừng tin học trở thành chìa khóa dẫn đến thành cơng cho nhiều cá nhân nhiều lĩnh vực, hoạt động Với ứng dụng mình, ngành Cơng nghệ thơng tin góp phần mang lại nhiều lợi ích mà khơng phủ nhận Đặc biệt lĩnh vực quản lý kinh tế, tin học góp phần tạo thay đổi nhanh chóng cho mặt xã hội Nhất việc tin học hóa vào cơng tác quản lý, bán hàng yêu cầu cần thiết doanh nghiệp Từ phần mềm quản lý giúp cho công việc bán hàng cửa hàng trở nên nhanh chóng dễ dàng, ngày công nghệ thông tin phát triển mạnh mẽ nữa, Website đời không đáp ứng cho khách hàng đến trực tiếp cửa hàng mua sản phẩm mà cịn phục vụ cho khách hàng xa Không thế, việc giới thiệu, quảng bá hình ảnh cửa hàng, cơng ty mở rộng quy mô lớn giúp cho việc kinh doanh, buôn bán, trao đổi tin tức thuận lợi nhiều, mang lại hiệu kinh tế cao tạo uy tín lịng khách hàng Chính lợi ích mà Website mang lại mà cửa hàng, cơng ty áp dụng để phát triển công việc kinh doanh giới thiệu cửa hàng Trong số đó, làm đẹp cho nam giới ngành sử dụng nhiều đến Website Do vậy, nhóm em lựa chọn đề tài thiết kế Website trưng bày sản phẩm tạo kiểu chăm sóc tóc cho nam giới nhằm đưa đến cho khách hàng thông tin xác chia sẻ thực tế sản phẩm giúp nam giới tự tin vẻ ngồi Đà Nẵng, tháng năm 2020 MỞ ĐẦU 1.1 Tên đề tài Showroom Trưng bày sản phẩm tạo kiểu chăm sóc tóc nam The Family 1.2 Lý chọn đề tài Trong sống đại ngày việc chăm chút ngoại hình nói chung tạo phong cách nói riêng điều cần thiết Khơng riêng chị em có quyền làm đẹp, cánh mày râu phải xuất thật ấn tượng, chu tình Và mái tóc định lớn ngoại hình cánh mày râu 1.3 Hướng tiếp cận đề tài Đề tài hướng đến tiệm baber cut có quy mơ vừa 1.4 Ưu điểm đề tài  Ưu điểm - Giao diện thân thiện dễ sử dụng - Tìm kiếm thơng tin sản phẩm, thơng tin nhà cung cấp nhanh chóng dễ dàng - Cập nhật xu hướng đến người dùng  Nhược điểm - Tốc độ xử lý chậm 1.5 Ý nghĩa lý luận thực tế đề tài - Giúp nhóm em hiểu rõ quy trình nghiệp vụ gian hàng trực tuyến - Tiếp cận làm quen với yêu cầu thực tế cửa hàng cho website bán hàng - Ứng dụng đề tài vào trình giới thiệu sản phẩm cho cửa hàng vừa - Nâng cấp Website để phục vụ yêu cầu trình bán hàng cửa hàng 1.6 Cấu trúc báo cáo - Trang bìa - Lời mở đầu - Lời cảm ơn - Nhận xét giáo viên hướng dẫn - Mục lục - Danh mục bảng - Danh mục hình Phần I : Mở đầu 1.1 Tên đề tài 1.2 Lý chọn đề tài 1.3 Hướng tiếp cận đề tài 1.4 Ưu khuyết điểm đề tài 1.5 Ý nghĩa lý luận ý nghĩa thực tiễn đề tài 1.6 Cấu trúc báo cáo Phần II : Nội Dung Chương I : Nội Dung Chương II : Nghiên cứu tổng quan Chương III : Phân tích thiết kế hệ thống Phần III : Thực nghiệm , đánh giá kết hướng phát triển Chương IV : Triển khai xây dựng Phần IV : Kết luận Chương V :Kết luận hướng phát triển LỜI CẢM ƠN Chúng em xin chân thành cảm ơn thầy cô khoa Công nghệ thông tin trang bị kiến thức quý báu cho chúng em suốt trình học tập làm đề tài Khoa Công Nghệ Thông Tin Và Truyền Thông Đại Học Đà Nẵng Nhờ công lao giảng dạy, bảo tận tình thầy mà nhóm em có kiến thức chun ngành cơng nghệ thông tin để thực Đồ Án Cơ Sở Đặc biệt, chúng em xin chân thành cảm ơn Cơ Hà Thị Minh Phương tận tình hướng dẫn, bảo, đưa đóng góp ý kiến hữu ích quý báu cho chúng em suốt trình thực đề tài Chúng em xin gửi lời cám ơn đến gia đình, bạn bè động viên, chia sẻ cung cấp tài liệu hữu ích cho nhóm Mặc dù cố gắng nỗ lực thực đề tài với tâm cao hẳn đề tài tránh khỏi thiếu sót Nhóm em mong nhận ý kiến đóng góp ý kiến thầy bạn để đề tài chúng em ngày hoàn thiện hướng tới áp dụng thực tế Nhóm em xin chân thành cảm ơn! Đà Nẵng ,tháng 08 năm 2020 Nhóm sinh viên thực Nguyễn Xuân Thịnh Dương Văn lộc NHẬN XÉT (Của giảng viên hướng dẫn) MỤC LỤC Trang MỞ ĐẦU CHƯƠNG CƠ SỞ LÝ THUYẾT .6 1.1 Công cụ .6 1.2 Ngôn ngữ CHƯƠNG PHÂN TÍCH THIẾT KẾ WEBSTE .8 2.1 Yêu cầu .9 2.1.1 Yêu cầu chức 2.1.2 Yêu cầu phi chức 2.2 Các bước thiết kế 2.2.1 Interface: .9 2.2.2 Login 2.2.3 Các sản phẩm CHƯƠNG The Family – website trưng bày giới thiệu sản phẩm tạo kiểu chăm sóc tóc nam .10 3.1 Giao diện 10 Chương KẾT LUẬN 14 Kết đạt .14 Hướng phát triển .14 TÀI LIỆU THAM KHẢO .15 TÀI LIỆU THAM KHẢO 15 DANH MỤC HÌNH Trang Hình 1.3 - Html CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1 Cơng cụ Ngày có nhiều cơng cụ hỗ trợ cho việc lập trình, thiết kế website Và đồ án HT-Phone này, em sử sụng công cụ sau: + Visual Studio Code phiên chương trình soạn thảo văn sử dụng nhiều web developers, coders, programmers Nó sẵn có cho Mac, Windows, Linux cho phép tải sử dụng miễn phí Việc lựa chọn mơi trường lập trình thích hợp góp phần vào thành cơng việc xây dựng website phục vụ cho đồ án Hình 1.1 – Visual Studio Code 1.2 Ngôn ngữ Đồ án chủ yếu trọng phần giao diện (Front end) nên em sử dụng ngôn ngữ thiết kế web cở sau: - HTML (HyperText Markup Language): ngôn ngữ đánh dấu thiết kế để tạo nên thành phần (như tiêu đề, đoạn văn, hình ảnh, video, button, input box, audio, ) website - CSS (Cascading Style Sheets): Hình 1.3 - Html ngôn ngữ mô tả style (phong cách) hiển thị đối tượng HTML Chẳng hạn như: vị trí hiển thị, màu sắc, kích thước, vị trí CSS giúp tránh phải sử dụng rắc rối HTML, dễ dàng định nghĩa style cho thẻ dễ quản lý Hình 1.4 - CSS - Javascript: ngơn ngữ lập trình chạy trình duyệt giúp xây dựng chức tương tác với người dùng hiệu ứng chuyển, animation, kiện click chuột, kéo thả chuột, Hình 1.5 - Javascript - Bootstrap: CSS Framework mã nguồn mở giúp CSS nhanh chóng cho đối tượng HTML Nó giúp đơn giản & dễ dàng thiết kế giao diện hỗ trợ responsive Đây CSS Framework phổ biến Hình 1.6 - Bootstrap - jQuery: thư viện Javascript xây dựng giúp việc xây dựng chức website sử dụng javascript trở nên đơn giản thuận tiện nhiều Hình 1.7 - jQuery Với nhũng ngơn ngữ này,chúng em hồn tồn xây dựng website CHƯƠNG PHÂN TÍCH THIẾT KẾ WEBSTE 2.1 Yêu cầu 2.1.1 Yêu cầu chức - Người dùng đăng nhập đăng ký với trang web - Người dùng phép tìm kiếm thơng tin sản phẩm theo tiêu chí khác - Liệt kê sản phẩm hot - Hiển thị đầy đủ thông tin chi tiết sản phẩm - Hiển thị thơng tin liên hệ để người dùng phản hồi có thắc mắc 2.1.2 Yêu cầu phi chức - Tính tiện dụng: Giao diện thân thiện, dễ sử dụng người dùng - Tính tương thích: Tương thích với hầu hết trình duyệt web 2.2 Các bước thiết kế 2.2.1 Interface: Thiết kế giao diện phù hợp đầy dủ chức yêu cầu đặt - Trang chủ: Navbar, Chia sản phẩm theo loại - Trang thông tin chi tiết sản phẩm: Liệt kê tồn thơng tin sản phẩm giá cả, thành phần, thời gian sản xuất ,nguồn gốc - Trang hỗ trợ khách hàng: Phản hồi khách hàng câu hỏi cần mà khách hàng cần tư vấn, liên hệ trực tiếp với chủ website 2.2.2 Login Người dùng đăng ký đăng nhập thông tin Người dùng chọn đăng nhập 2.2.3 Các sản phẩm Chọn vào sản phẩm để xem thơng tin chi tiết: - Tên sản phẩm - Hình ảnh sản phẩm Giá sản phẩm Bình luận, đánh giá Thông tin chi tiết sản phẩm Đánh giá sản phẩm CHƯƠNG The Family – website trưng bày giới thiệu sản phẩm tạo kiểu chăm sóc tóc nam Sau phần mà nhóm chúng em hồn thành báo cáo (cịn có nhiều ý tưởng, dự định chưa thể thực khả năng, hy vọng hoàn thiện thời gian tới): 3.1 Giao diện Giao diện xây dựng hoàn chỉnh, tương ứng với đối tượng người dùng có menu riêng, chứa khả thực Hình 3.1 - Trang chủ The Family Hình 3.2 - Trang chủ The Family Hình 3.3 - Trang chủ The Family Hình 3.4 - Trang chủ The Family Hình 3.5 - Trang sản phẩm Hình 3.6 - Trang thơng tin chi tiết sản phẩm Hình 3.7 - Trang đánh giá sản phẩm - Đăng nhập vào tài khoản (có hỗ trợ chức tìm kiếm mật quên mật khẩu) Hình 3.9 - Form đăng nhập Chương KẾT LUẬN Kết đạt Xây dựng website giới thiệu sản phẩm sử dụng cơng nghệ lập trình mới, đại có nhiều thú vị hấp dẫn có nhiều thách thức chúng em Thứ nhất, thương mại điện tử khơng cịn lạ chúng em thời gian tiếp cận Thứ hai, lần chúng em thật tiếp xúc làm việc với ngôn ngữ web để xây dựng website Do đó, q trình thực đồ án gặp nhiều khó khăn, nhiều thời gian để hiểu nắm cách làm việc với nó, có lúc tưởng khơng thể hồn thành kịp tiến độ, có vài chỗ chưa hồn thành kịp cho báo cáo Ngoài ra, để xây dựng trang web thành cơng giao diện yếu tố quan trọng bậc nhất, phải kết hợp hài hịa hấp dẫn, lơi người dùng với đơn giản, thân thiện, dễ sử dụng Về mặt nhóm chúng em thật khơng có khiếu thẫm mỹ nên giao diện đơn giản Qua trình thực đồ án này, em học hỏi, có nhiều kiến thức hay Về mặt lý thuyết, em nắm rõ sâu kiến thức lập trình website phương pháp tạo trang web hoàn chỉnh, nắm rõ ngôn ngữ web đề từ em vận dụng tốt cho tương lai, công việc sau Cũng qua thời gian làm đồ án này, em có trải nghiệm chân thật nghề nghiệp sau thân Hướng phát triển Em cố gắng để phát triển khắc phục đề tài theo hướng sau: - Liên kết với hệ sở liệu - Liên kết với đối tác baber shop - Đưa vào triển khai ứng dụng thực tế TÀI LIỆU THAM KHẢO Head First HTML and CSS: A Learner's Guide to Creating Standards-Based Web Pages Learn Bootstrap by Freetuts Javascript: The Good Parts