ĐỒ án 3 xây DỰNG GIAO DIỆN WEBSITE bán QUẦN áo CANIFA

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN ĐỒ ÁN XÂY DỰNG GIAO DIỆN WEBSITE BÁN QUẦN ÁO CANIFA NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: KỸ THUẬT PHẦN MỀM HƯỚNG CHUYÊN SÂU: CÔNG NGHỆ WEB SINH VIÊN: TRẦN KHÁNH SƠN MÃ LỚP: 125202 HƯỚNG DẪN: CHU THỊ MINH HUỆ 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) Xây dựng giao diện website bán quần áo Canifa LỜI CAM ĐOAN Em xin cam đoan đồ án “Xây dựng giao diện website bán quần áo Canifa” kết thực thân em hướng dẫn Cô Chu Thị Minh Huệ 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 tháng năm 2022 Sinh viên Sơn Trần Khánh Sơn Xây dựng giao diện website bán quần áo Canifa LỜI CẢM ƠN Để hoà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 Cơ Chu Thị Minh Huệ 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! Xây dựng giao diện website bán quần áo Canifa MỤC LỤC Contents NHẬN XÉT Contents DANH MỤC CÁC HÌNH ẢNH CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI .9 1.1 Lý chọn đề tài 1.2 Mục tiêu đề tài 1.2.1 Mục tiêu tổng quát .9 1.2.2 Mục tiêu cụ thể 1.3 Giới hạn phạm vi đề tài 1.3.1 Đối tượng nghiên cứu 1.3.2 Phạm vi nghiên cứu 1.4 Nội dung thực 10 1.5 Phương pháp tiếp cận 10 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 11 2.1 Quy trình phát triển phần mềm 11 2.2 Thiết kế giao diện web với HTML, CSS .12 2.3 Lập trình phía front-end 15 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 17 1.1Phát biểu toán 17 1.2Đặc tả yêu cầu phần mềm 19 1.2.1 Các yêu cầu chức 19 1.2.2 Biểu đồ lớp thực thể 36 1.2.3 Các yêu cầu phi chức 36 1.3Thiết kế giao diện 37 CHƯƠNG 4: TRIỂN KHAI WEBSITE 54 Xây dựng giao diện website bán quần áo Canifa 1.4Triển khai chức cho phân hệ người dùng 54 1.4.1 Trang chủ 57 1.5Triển khai chức cho phân hệ quản trị nội dung .60 1.6Kiểm thử triển khai ứng dụng 64 1.6.1 Kiểm thử 64 1.6.2 Đóng gói ứng dụng 64 1.6.3 Triển khai ứng dụng 64 KẾT LUẬN 66 Xây dựng giao diện website bán quần áo Canifa DANH MỤC CÁC HÌNH ẢNH Hình 3-1 Biểu đồ tổng quát trang quản trị .19 Hình 3-2 Biểu đồ phân rã use case quản lý loại quần áo 21 Hình 3-3 Biểu đồ phân rã use case quản lý quần áo 24 Hình 3-4 Biểu đồ phân rã use case quản lý khách hàng 25 Hình 3-5 Biểu đồ phân rã use case quản lý đơn hàng 26 Hình 3-6 Biểu đồ phân rã use case quản lý hóa đơn nhập .27 Hình 3-7 Biểu đồ phân rã use case quản lý nhân viên .28 Hình 3-8 Biểu đồ phân rã use case thống kê 29 Hình 3-9 Biểu đồ tổng quát trang người dùng 30 Hình 3-10 Biểu đồ phân rã use case Xem quần áo 31 Hình 3-11 Biểu đồ phân rã use case quản lý đơn hàng 32 Hình 3-12 Biểu đồ phân rã use case quản lý giỏ hàng .33 Hình 3-13 Biểu đồ use case đặt quần áo 34 Hình 3-14 Biểu đồ lớp thực thể .36 Hình 3-15 Giao diện đăng nhập .38 Hình 3-16 Giao diện ký 38 Hình 3-17 giao diện giỏ hàng mini 39 Hình 3-18 Giao diện trang chủ 40 Hình 3-19 Giao diện trang chủ 40 Hình 3-20 Giao diện trang chủ 41 Hình 3-21 Giao diện trang chủ 41 Hình 3-22 Giao diện trang chủ 42 Hình 3-23 Giao diện trang chủ 42 Hình 3-24 giao diện chi tiết sản phẩm 43 Hình 3-25 giao diện chi tiết sản phẩm 43 Hình 3-26 giao diện chi tiết sản phẩm 44 Hình 3-27 giao diện chi tiết sản phẩm 44 Hình 3-28 giao diện chi tiết sản phẩm 45 Xây dựng giao diện website bán quần áo Canifa Hình 3-29 giao diện chi tiết sản phẩm 45 Hình 3-30 giao diện chi tiết sản phẩm 46 Hình 3-31 giao diện chi tiết sản phẩm 46 Hình 3-32 giao diện chi tiết sản phẩm 47 Hình 3-33 Giao diện giỏ hàng 47 Hình 3-34 Giao diện giỏ hàng 48 Hình 3-35 Giao diện tất sản phẩm .48 Hình 3-36 Giao diện tất sản phẩm .49 Hình 3-37 Giao diện tất sản phẩm .49 Hình 3-38 Giao diện quản lý loại quần áo .50 Hình 3-39 Giao diện quản lý quần áo 50 Hình 3-40 Giao diện quản lý khách hàng 51 Hình 3-41 Giao diện quản lý nhân viên 51 Hình 3-42 Giao diện quản lý hóa đơn nhập 52 Hình 3-43 Giao diện quản lý đơn đặt hàng 52 Hình 3-44 Giao diện báo cáo doanh thu lợi nhuận 53 Hình 45 Bố cục trang home page html 58 Hình 46 Javascript xử lý giao diện chức đăng nhập đăng ký người dùng.60 Xây dựng giao diện website bán quần áo Canifa CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Lý chọn đề tài Trước tiên, xem lại chút hình thức bán quần áo truyền thống mà xưa chủ doanh nghiệp sỉ lẻ áp dụng Đó bán hàng hàng Nhưng với cách làm doanh nghiệp khơng thể phát triển nhanh chóng khó quảng bá thương hiệu đến với người dùng Đặc biệt thời kỳ dịch bệnh thói quen mua sắm người dùng chuyển nhiều sang hình thức online, mà cách thức bán hàng truyền thống khó khăn hết Hiện có nhiều cách thức bán hàng online bán qua trang mạng xã hội, qua trang thương mại điện tử… Và bán hàng qua website riêng doanh nghiệp cách điển hình 1.2 Mục tiêu đề tài 1.2.1 Mục tiêu tổng quát Xây dựng giao diện website bán quần áo Canifa đảm bảo tính thẩm mỹ thân thiện với người dùng 1.2.2 Mục tiêu cụ thể Xây dựng giao diện như: - Đăng nhập - Trang chủ - Trang xem chi tiết thông tin quần áo - Trang giỏ hàng - Các trang quản trị hệ thống 1.3 Giới hạn phạm vi đề tài 1.3.1 Đối tượng nghiên cứu - Đối tượng nghiên cứu: Các cửa hàng bán quần áo Canifa - Khách thể nghiên cứu: Ban quản lý Canifa khách hàng 1.3.2 Phạm vi nghiên cứu - Phạm vi không gian: cửa hàng cửa Canifa Xây dựng giao diện website bán quần áo Canifa - Phạm vi thời gian: tháng 1.4 Nội dung thực - Lấy yêu cầu khách hàng - Phân tích thiết kế hệ thống - Lập trình website - Kiểm thử - Bảo trì 1.5 Phương pháp tiếp cận Tiếp cận trực tiếp với người sử dụng hệ thống thông qua việc khảo sát hệ thống cũ, đề xuất, lựa chọn hệ thống (có thể đề xuất nhiều phương án để chủ đầu tư lựa chọn, … 10 Xây dựng giao diện website bán quần áo Canifa Hình 3-44 Giao diện báo cáo doanh thu lợi nhuận 53 Xây dựng giao diện website bán quần áo Canifa CHƯƠNG 4: TRIỂN KHAI WEBSITE 1.4 Triển khai chức cho phân hệ người dùng − Có thể sử dụng chức đăng kí, đăng nhập tài khoản − Khách hàng xem danh sách sản phẩm chạy trang chủ 54 Xây dựng giao diện website bán quần áo Canifa − Khách hàng xem chi tiết sản phẩm cách click vào sản phẩm 55 Xây dựng giao diện website bán quần áo Canifa − Khách hàng xem tất sản phẩm cửa hàng trang tất sản phẩm 56 Xây dựng giao diện website bán quần áo Canifa − Khách hàng vào trang giỏ hàng để đặt mặt hàng muốn mua 1.4.1 Trang chủ a) Phía font end  Xây dựng bố cục trang Home thẻ HTML 57 Xây dựng giao diện website bán quần áo Canifa Hình 45 Bố cục trang home page html − Về mặt cấu tạo html, trang chủ gồm phần head body Phần phần head dùng cặp thẻ Phần head phần cấu hình trang web, nơi khai báo thư viện, link, thẻ SEO() − Phần body gồm thẻ để tạo nên cấu trúc trang web dùng cặp thẻ Thân trang web(body) lại chia thành phần header, main, footer, thẻ hỗ trợ phiên HTML5 Header sử dụng cặp thẻ Phần chứa navigation bar() tools bar Navigation bar cặp thẻ bên có chứa thẻ

tập thẻ

đẻ định dạng phần tử menu Tuy nhiên mặc định thẻ mặc định xếp theo chiều dọc phần tử

có định dạng margin, padding, list-style Như để menu hiển thị theo chiều ngang cần sử dụng display: flex list-style: none bỏ định dạng
− Bên thẻ
• cịn có menu khác menu định dạng giống Tuy nhiên chúng bổ sung thêm hậu tố (pseudo class) “hover” để tạo hiệu ứng xuất menu trỏ vào item menu cha Khi click chuột vào item, trang web chuyển hướng, bên nội dung thẻ li cịn chứa cặp thẻ thuộc tính href chứa đừng dẫn chuyển hướng Các 58 Xây dựng giao diện website bán quần áo Canifa thẻ định dạng mặc định chữ màu xanh có gạch chân, để bỏ chúng sử dụng thuộc tính color text-decoration − Để có form tìm kiếm, sử dụng cặp thẻ với thuộc tính method, action Các component cho người dùng tương tác (nhập, submit) sử dụng thẻ input với thuộc tính type=”text” thẻ button với thuộc tính type = “submit” Ở đây, trường hợp sử dụng phương thức get hợp lý chưa có phần backend phía sau hỗ trợ xử lý liệu Sau người dùng nhập từ khoá nhấn nút submit, trang web chuyển hướng theo đường dẫn thuộc tính action Sau chuyển hướng, địa hiển thị parameter tên input có form Lấy giá trị parameter ta sử dung đối tượng URL để thực hiện: − Cuối phần chân bao bới thẻ footer danh sách footer làm cặp thẻ ul li  Kỹ thuật định dạng CSS  Sử dụng Javascript, Jquery để lập trình chức 59 Xây dựng giao diện website bán quần áo Canifa Hình 46 Javascript xử lý giao diện chức đăng nhập đăng ký người dùng 1.5 Triển khai chức cho phân hệ quản trị nội dung  Thêm sửa xóa loại quần áo 60 Xây dựng giao diện website bán quần áo Canifa  Thêm sửa xóa sản phẩm  Thêm sửa xóa khách hàng 61 Xây dựng giao diện website bán quần áo Canifa  Thêm sửa xóa nhân viên  Thêm xóa hóa đơn nhập hàng 62 Xây dựng giao diện website bán quần áo Canifa  Tìm kiếm chuyển đổi trạng thái đơn đặt hàng  Thống kê báo cáo doanh thu lợi nhuận theo ngày, tuần, tháng theo dạng bảng biểu đồ 63 Xây dựng giao diện website bán quần áo Canifa 1.6 Kiểm thử triển khai ứng dụng 1.6.1 Kiểm thử 1.6.2 Đóng gói ứng dụng 1.6.3 Triển khai ứng dụng  Phần cứng • Máy tính truy cập internet • Có RAM 2GB  Phần mềm 64 Xây dựng giao diện website bán quần áo Canifa  Các trình duyệt Cốc cốc, Google Chrome, Egde, FireFox… 65 Xây dựng giao diện website bán quần áo Canifa KẾT LUẬN - Kết đạt Nắm vững HTML, CSS, Javascript, Jquery - “Thiết kế website bán quần áo” đáp ứng nhu cầu đề như: - Đặt sản phẩm, tìm kiếm, xem thơng tin sản phẩm, … - Thiết kế trang quản trị website - Dễ dàng thao tác (chỉnh sửa, thêm, xóa, tìm kiếm, …) - Website chạy ổn, xác - Giao diện thân thiện, dễ dàng tiếp cận Mặt hạn chế - Do kiến thức lập trình phía backend cịn hạn chế nên chương trình chưa tối ưu hồn tồn Website chưa đầy đủ tính năng, cần cập nhập thêm Hướng phát triển đề tài - Tối ưu website, cung cấp tính tương thích dễ sử dụng đến với người dùng - Tối ưu giao diện để người dùng dễ dàng sử dụng, cho người quản trị dễ dàng quản lý danh mục cho website 66 ... phẩm 46 Xây dựng giao diện website bán quần áo Canifa Hình 3- 32 giao diện chi tiết sản phẩm Hình 3- 33 Giao diện giỏ hàng 47 Xây dựng giao diện website bán quần áo Canifa Hình 3- 34 Giao diện giỏ... Hình 3- 35 Giao diện tất sản phẩm 48 Xây dựng giao diện website bán quần áo Canifa Hình 3- 36 Giao diện tất sản phẩm Hình 3- 37 Giao diện tất sản phẩm 49 Xây dựng giao diện website bán quần áo Canifa. .. xem báo cáo cửa hàng Hình 3- 15 Giao diện đăng nhập Hình 3- 16 Giao diện ký 38 Xây dựng giao diện website bán quần áo Canifa Hình 3- 17 giao diện giỏ hàng mini 39 Xây dựng giao diện website bán quần