Em xin cam đoan đồ án “Xây dựng website bán đồ da” là kết quả thực hiệncủa bản thân em dưới sự hướng dẫn của thầy Nguyễn Minh Quý. Những phần sửdụng tài liệu tham khảo trong đồ án đã được nêu rõ trong phần tài liệu tham khảo.Các kết quả trình bày trong đồ án và chương trình xây dựng được hoàn toàn là kếtquả do bản thân em thực hiện. Nếu vi phạm lời cam đoan này, em xin chịu hoàn toàntrách nhiệm trước khoa và nhà trường.
BỘ GIÁO DỤC VÀ ĐÀO TẠO PHAN TRƯỜNG GIANG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN PHAN TRƯỜNG GIANG XÂY DỰNG WEBSITE BÁN ĐỒ DA ECCO XÂY DỰNG WEBSITE BÁN ĐỒ DA ECCO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HƯNG YÊN - 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN PHAN TRƯỜNG GIANG XÂY DỰNG WEBSITE BÁN ĐỒ DA ECCO NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: KỸ THUẬT PHẦN MỀM ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC NGƯỜI HƯỚNG DẪN NGUYỄN MINH QUÝ HƯNG YÊN - 2022 NHẬN XÉT Nhận xét giảng viên hướng dẫn: GIẢNG VIÊN HƯỚNG DẪN (Ký ghi rõ họ tên) Đồ án tốt nghiệp: Xây dựng website quản lý đồ da LỜI CAM ĐOAN Em xin cam đoan đồ án “Xây dựng website bán đồ da” kết thực thân em hướng dẫn thầy Nguyễn Minh Quý Những phần sử dụng tài liệu tham khảo đồ án nêu rõ phần tài liệu tham khảo Các kết trình bày đồ án chương trình xây dựng hoàn toàn kết thân em thực Nếu vi phạm lời cam đoan này, em xin chịu hoàn toàn trách nhiệm trước khoa nhà trường Hưng Yên, ngày 18 tháng năm 2022 SINH VIÊN Phan Trường Giang Đồ án tốt nghiệp: Xây dựng website quản lý đồ da LỜI CẢM ƠN Để hồn thành đồ án này, lời em xin phép gửi lời cảm ơn tới môn Công nghệ phần mềm, Khoa Công nghệ thông tin – Trường Đại học Sư phạm Kỹ thuật Hưng Yên tạo điều kiện thuận lợi cho em thực đồ án môn học Đặc biệt em xin chân thành cảm ơn thầy Nguyễn Minh Quý tận tình hướng dẫn, bảo em suốt thời gian thực đồ án vừa qua Em xin chân thành cảm ơn tất Thầy, Cô Trường tận tình giảng dạy, trang bị cho em kiến thức cần thiết, quý báu để giúp em thực đồ án Mặc dù em có cố gắng, với trình độ cịn hạn chế, q trình thực đề tài khơng tránh khỏi thiếu sót Em hi vọng nhận ý kiến nhận xét, góp ý Thầy giáo, Cô giáo kết triển khai đồ án Em xin trân trọng cảm ơn! Đồ án tốt nghiệp: Xây dựng website quản lý đồ da MỤC LỤC DANH MỤC CÁC THUẬT NGỮ DANH MỤC CÁC BẢNG DANH MỤC CÁC HÌNH VẼ, ĐỒ THỊ CHƯƠNG 1: 1.1 Lý chọn đề tài 11 1.2 Mục tiêu đề tài 11 1.2.1 Mục tiêu tổng quát 11 1.2.2 Mục tiêu cụ thể 11 1.3 Giới hạn phạm vi đề tài 11 1.3.1 Đối tượng nghiên cứu 11 1.3.2 Phạm vi nghiên cứu 12 1.4 Nội dung thực 12 1.5 Phương pháp tiếp cận 12 CHƯƠNG 2: 2.1 Quy trình phát triển phần mềm 13 2.2 Phương pháp phân tích thiết kế hướng đối tượng 13 2.3 Giới thiệu xu hướng lập trình web 13 2.4 Tổng quan Angular 20 2.5 Lập trình Web API NET CORE 24 CHƯƠNG 3: 3.1 Đặc tả yêu cầu phần mềm 25 3.1.1 Các yêu cầu chức 25 3.1.2 Biểu đồ lớp thực thể 30 3.1.3 Các yêu cầu phi chức 33 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da 3.2 Thiết kế hệ thống 33 3.2.1 Thiết kế sở liệu 33 3.2.2 Thiết kế lớp đối tượng 38 3.2.3 Thiết kế giao diện 51 CHƯƠNG 4: 4.1 Triển khai chức cho phân hệ người dùng 61 4.2 Triển khai chức cho phân hệ quản trị nội dung (nếu có) 62 4.3 Kiểm thử triển khai ứng dụng 62 KẾT LUẬN 64 TÀI LIỆU THAM KHẢO 66 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da DANH MỤC CÁC THUẬT NGỮ STT Từ viết tắt Cụm từ tiếng anh Diễn giải MVC Model View Control Mẫu thiết kế MVC PWA Progressive Web Apps Tiến trình web ứng dụng HTML Hypertext Markup Language Ngôn ngữ đánh dấu siêu văn DOM Document Object Model Mơ hình đối tượng tài liệu CSS Cascading Style Sheets Ngôn ngữ tạo phong cách Đồ án tốt nghiệp: Xây dựng website quản lý đồ da DANH MỤC CÁC BẢNG Bảng 3- 1: Các chức phân hệ quản trị nội dung .26 Bảng 3- 2: Bảng sản phẩm 34 Bảng 3- 3: Bảng danh mục sản phẩm 34 Bảng 3- 4: Bảng thương hiệu sản phẩm 35 Bảng 3- 5: Bảng đơn hàng .35 Bảng 3- 6: Bảng chi tiết đơn hàng 35 Bảng 3- 7: Bảng khách hàng .36 Bảng 3- 8: Bảng Admin 36 Bảng 3- 9: Bảng phản hồi khách hàng 37 Bảng 3- 10: Bảng tin tức khuyến mại 37 Bảng 3- 11: Bảng nhân viên 38 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da DANH MỤC CÁC HÌNH VẼ, ĐỒ THỊ Hình 3- 1: Biểu đồ USE CASE phân hệ quản trị 26 Hình 3- 2: Biểu đồ USE CASE phân rã Quản lý khách hàng 27 Hình 3- 3: Biểu đồ USE CASE phân rã Quản lý sản phẩm 27 Hình 3- 4: Biểu đồ USE CASE phân rã Quản lý bán hàng .28 Hình 3- 5: Biểu đồ USE CASE phân rã Quản lý tin tức 29 Hình 3- 6: Biểu đồ USE CASE phân rã Quản lý người dùng 29 Hình 3- 7: Biểu đồ lớp thực thể 32 Hình 3- 8:Biểu đồ VOPC đăng kí .38 Hình 3- 9:Biểu đồ VOPC cho chức đăng nhập 38 Hình 3- 10:Biểu đồ VOPC thêm người dùng 39 Hình 3- 11:Biểu đồ VOPC cập nhật người dùng 39 Hình 3- 12:Biểu đồ VOPC xóa người dùng 40 Hình 3- 13:Biểu đồ VOPC thêm sản phẩm .40 Hình 3- 14:Biểu đồ VOPC cập nhật sản phẩm 41 Hình 3- 15:Biểu đồ VOPC xóa sản phẩm 41 Hình 3- 16:Biểu đồ VOPC thêm tin tức dịch vụ .42 Hình 3- 17:Biểu đồ VOPC cập nhật tin tức dịch vụ 42 Hình 3- 18:Biểu đồ VOPC xóa tin tức dịch vụ 43 Hình 3- 19:Biểu đồ VOPC hiển thị đơn hàng 43 Hình 3- 20: Biểu đồ cho chức đăng nhập .44 Hình 3- 21: Biểu đồ cho chức quản lý đặt hàng 44 Hình 3- 22: Biểu đồ cho chức quản lý nhập hàng 45 Hình 3- 23:Biểu đồ chức bán hàng 45 Hình 3- 24: Biểu đồ cho chức xem sản phẩm 46 Hình 3- 25: Biểu đồ cho chức tìm kiếm sản phẩm .46 Hình 3- 26: Biểu đồ cho chức quản lý giỏ hàng 46 Hình 3- 27:Biểu đồ chức thêm người dùng 47 Hình 3- 28:Biểu đồ chức cập nhật thông tin người dùng .47 10 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da Hình 3- 38:Giao diện trang chủ 52 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da Hình 3- 39:Giao diện giới thiệu 53 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da Hình 3- 40:Giao diện tin tức 54 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da Hình 3- 41:Giao diện trang chi tiết sản phẩm 55 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da Hình 3- 42:Giao diện trang giỏ hàng 56 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da Hình 3- 43:Giao diện trang tốn b) Trang quản trị 57 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da Hình 3- 44:Giao diện đăng nhập Admin Hình 3- 45:Giao diện trang quản lí sản phẩm 58 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da Hình 3- 46:Giao diện trang quản lí danh mục Hình 3- 47:Giao diện trang quản lí hóa đơn 59 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da Hình 3- 48:Giao diện trang quản lí tin tức 60 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da CHƯƠNG 4: 4.1 TRIỂN KHAI WEBSITE Triển khai chức cho phân hệ người dùng a) Phía front end - Xây dựng bố cục trang Home thẻ HTML + Sử dụng thẻ , , để phân trang thành khối; + Sử dụng thẻ- ,
- để tạo menu; + Sử dụng thẻ
để tạo đoạn văn bản; + Sử dụng thẻ để đặt link đến giao diện trang website ; + Sử dụng thẻ để hiển thị hình ảnh; + Sử dụng thẻ để xây dựng bảng; + Sử dụng thẻ để xử lý liệu nhập gửi cho hệ thống - Kỹ thuật định dạng CSS + Sử dụng kỹ thuật External style sheet thông qua thẻ để đưa định dạng CSS vào giao diện; + Sử dụng kỹ thuật Inline style để định dạng; + Sử dụng bootstrap để định dạng; + Sử dụng selector HTML, selector class, selector ID để định dạng - Sử dụng Javascript, Jquery, AngularJS để lập trình chức + Xây dựng function AngularJS để lấy trả liệu giao tiếp với Controller; + Sử dụng DOM Jquery để thao tác với phần tử HTML, CSS b) Phía back end - Triển khai tầng DataAccess + Sử dụng lớp context lớp kế thừa từ lớp DbContext để kết nối với DB + Xây dựng hàm thao tác với liệu DB như: hàm truy vấn lấy danh sách sản phẩm theo loại, hàm thêm user,… 61 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da - Triển khai tầng Business + Gọi hàm tạo DataAccess để giao tiếp với tầng Controller Triển khai tầng Controller + Cài đặt ActionResult để xử lý liệu từ tầng Business với Angularjs trả View với tên View trùng với tên ActionResult; + Cài đặt JsonResult để xử lý liệu sang json giao tiếp với Angularjs; + Cài đặt Partial View để tạo partial View với tên View trùng với tên partialView 4.2 Triển khai chức cho phân hệ quản trị nội dung - Chức quản lý bán hàng: quản lý hóa đơn bán, quản lý sản phẩm, quản lý loại sản phẩm, với thao tác thêm, xóa, cập nhật - Chức quản lý kho: quản lý nhập hàng, quản lý tồn kho… với thao tác thêm, xóa, cập nhật 4.3 Kiểm thử triển khai ứng dụng 4.3.1 Kiểm thử 1.Trang Chủ Hiển thị nội dung trang web bao gồm header,menu,sản phẩm.Khi click chuột vào sản phẩm đến trang chi tiết click thêm giỏ hàng sản phẩm nằm giỏ hàng Xem thị tất nội dung sản phẩm.Hiển thị cách trình duyệt khác 2.Tìm Kiếm Tìm kiếm dựa theo tên sản phẩm Kết tìm kiếm phù hợp; 3.Chi Tiết sản phẩm Hình ảnh sản phẩm Thơng tin sản phẩm:Giá Tiền,Thông số,Review,Sản Phẩm liên quan 62 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da 4.Giỏ Hàng Thêm mặt hàng vào giỏ hàng tiếp tục mua sắm Nếu người dùng thêm sản phẩm vào giỏ hàng tiếp tục mua sắm,số lượng giỏ hàng tăng lên Tất mục tổng số hiển thị giỏ hàng Người dùng thêm nhiều mặt hàng vào giỏ hàng 4.3.2 Đóng gói ứng dụng Một khách hàng vào trang Web=>Tìm kiếm sản phẩm họ cần mua=>chọn lựa mẫu mã,nhà sản xuất,model,màu sắc…=>cho vào giỏ hàng=>vào giỏ hàng kiểm tra tốn=> tốn=>nhập thơng tin đầy đủ toán=>Kết thúc mua hàng 4.3.3 Triển khai ứng dụng ● Môi trường phần cứng - CPU: Pentium IV 3.0 GHz cao - RAM: tối thiểu 512 MB - HDD: dung lượng tối thiểu trống 2G ● Môi trường phần mềm - Hệ điều hành: Windows XP cao - Công cụ phát triển: Visual Code , Visual Studio 63 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da KẾT LUẬN Kết đạt Sau thời gian thực em hoàn thiện hệ thống theo tiến độ yêu cầu đặt Tìm hiểu hệ thống kỹ xác Phân tích rõ : - Hiện trạng website yêu cầu người sử dụng - Các chức cần có website - Thiết kế chức hệ thống đáp ứng yêu cầu người dùng Sau hoàn thành xong được Website Cổng thông tin Quản lý hoạt động thương mại điện tử, em có thêm kỹ tảng thiết kế lập trình để xây dựng website theo thiết kế Bên cạnh đó, em mở rộng thêm kiến thức chuyên ngành nhờ việc tìm hiểu số kiến thức lập trình để áp dụng vào việc phát triển ứng dụng Nhờ vậy, kỹ tự học vận dụng kỹ em nâng cao Khi thực hoàn thành dự án, em biết thêm nhiều kinh nghiệm quý giá xây dựng website nói riêng phát triển phần mềm Những kỹ tảng để giúp em nâng cao trình độ thân, kinh nghiệm thực tế để làm việc ngồi doanh nghiệp sau Hạn chế đề tài Đề tài thiếu sót nghiệp vụ, chưa giải vấn đề quản lý ship hàng - Chưa có quản lý Quận/Huyện, Phường/Xã - Dù toàn tâm cố gắng, xong khả trình độ định đề tài cịn giới hạn mặt quy mô ứng dụng - Một số chức bị hạn chế chưa giải tối ưu chế đề tài Hướng phát triển đề tài - Trước mắt khắc phục hạn chế nêu phía - Cải thiện hiệu suất xử lý 64 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da - Áp dụng sản phẩm vào thực tế để sử dụng cho hệ thống cổng thông tin Việt Nam 65 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da TÀI LIỆU THAM KHẢO [1] Nguyễn Văn Quyết, Giáo trình Cơng nghệ Web ứng dụng Hưng Yên, Việt Nam: Khoa Công nghệ Thông tin - UTEHY, 2010 [2] Chu Thị Minh Huệ, Giáo trình Đề cương thiết kế WEB với HTML CSS Hưng Yên, Việt Nam: Khoa Công nghệ Thông tin - UTEHY, 2010 [3] Chu Thị Minh Huệ, Giáo trình phân tích thiết kế hướng đối tượng Hưng Yên, Việt Nam: Khoa Công nghệ Thông tin - UTEHY, 2010 [4] Nguyễn Minh Tiến, Giáo trình Phân tích thiết kế phần mềm Hưng Yên, Việt Nam: Khoa Công nghệ thông tin – UTEHY, 2010 66 ... GIẢNG VIÊN HƯỚNG DẪN (Ký ghi rõ họ tên) Đồ án tốt nghiệp: Xây dựng website quản lý đồ da LỜI CAM ĐOAN Em xin cam đoan đồ án “Xây dựng website bán đồ da? ?? kết thực thân em hướng dẫn thầy Nguyễn... hàng - Biểu đồ quản lý nhập hàng 44 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da Hình 3- 22: Biểu đồ cho chức quản lý nhập hàng - Quản lý bán hàng Hình 3- 23:Biểu đồ chức bán hàng 45 Đồ án tốt... Angular xây dựng thế! 23 Đồ án tốt nghiệp: Xây dựng website quản lý đồ da Cộng đồng hỗ trợ rộng lớn -Nhiều tài liệu phong phú, đa dạng từ đến nâng cao API Angular, có hẳn Tutorial Basic xây dựng