ĐỒ á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 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 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 .8 1.4 Nội dung thực 1.5 Phương pháp tiếp cận CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 10 2.1 Quy trình phát triển phần mềm 10 2.2 Thiết kế giao diện web với HTML, CSS .11 2.3 Lập trình phía front-end 14 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 16 3.1 Phát biểu toán 16 3.2 Đặc tả yêu cầu phần mềm .18 3.2.1 Các yêu cầu chức 18 3.2.2 Biểu đồ lớp thực thể 36 3.2.3 Các yêu cầu phi chức 36 3.3 Thiết kế giao diện 37 CHƯƠNG 4: TRIỂN KHAI WEBSITE 55 4.1 Triển khai chức cho phân hệ người dùng 55 Xây dựng giao diện website bán quần áo Canifa 4.1.1 Trang chủ 58 4.2 Triển khai chức cho phân hệ quản trị nội dung 61 4.3 Kiểm thử triển khai ứng dụng 65 4.3.1 Kiểm thử 65 4.3.2 Đóng gói ứng dụng 65 4.3.3 Triển khai ứng dụng 65 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ị 20 Hình 3-2 Biểu đồ phân rã use case quản lý loại quần áo 22 Hình 3-3 Biểu đồ phân rã use case quản lý quần áo .25 Hình 3-4 Biểu đồ phân rã use case quản lý khách hàng .26 Hình 3-5 Biểu đồ phân rã use case quản lý đơn hàng 27 Hình 3-6 Biểu đồ phân rã use case quản lý hóa đơn nhập 28 Hình 3-7 Biểu đồ phân rã use case quản lý nhân viên 29 Hình 3-8 Biểu đồ phân rã use case thống kê 30 Hình 3-9 Biểu đồ tổng quát trang người dùng .32 Hình 3-10 Biểu đồ phân rã use case Xem quần áo .33 Hình 3-11 Biểu đồ phân rã use case quản lý đơn hàng 34 Hình 3-12 Biểu đồ phân rã use case quản lý giỏ hàng 35 Hình 3-13 Biểu đồ use case đặt quần áo 36 Hình 3-14 Biểu đồ lớp thực thể 38 Hình 3-15 Giao diện đăng nhập 40 Hình 3-16 Giao diện ký .41 Hình 3-17 giao diện giỏ hàng mini .42 Hình 3-18 Giao diện trang chủ 43 Hình 3-19 Giao diện trang chủ 43 Hình 3-20 Giao diện trang chủ 44 Hình 3-21 Giao diện trang chủ 44 Hình 3-22 Giao diện trang chủ 45 Hình 3-23 Giao diện trang chủ 45 Hình 3-24 giao diện chi tiết sản phẩm 46 Hình 3-25 giao diện chi tiết sản phẩm 46 Hình 3-26 giao diện chi tiết sản phẩm 47 Hình 3-27 giao diện chi tiết sản phẩm 47 Hình 3-28 giao diện chi tiết sản phẩm 48 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 48 Hình 3-30 giao diện chi tiết sản phẩm 49 Hình 3-31 giao diện chi tiết sản phẩm 49 Hình 3-32 giao diện chi tiết sản phẩm 50 Hình 3-33 Giao diện giỏ hàng 50 Hình 3-34 Giao diện giỏ hàng 51 Hình 3-35 Giao diện tất sản phẩm 51 Hình 3-36 Giao diện tất sản phẩm 52 Hình 3-37 Giao diện tất sản phẩm 52 Hình 3-38 Giao diện quản lý loại quần áo 53 Hình 3-39 Giao diện quản lý quần áo 53 Hình 3-40 Giao diện quản lý khách hàng 54 Hình 3-41 Giao diện quản lý nhân viên 54 Hình 3-42 Giao diện quản lý hóa đơn nhập 55 Hình 3-43 Giao diện quản lý đơn đặt hàng 55 Hình 3-44 Giao diện báo cáo doanh thu lợi nhuận .56 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-40 Giao diện quản lý khách hàng Hình 3-41 Giao diện quản lý nhân viên 53 Xây dựng giao diện website bán quần áo Canifa Hình 3-42 Giao diện quản lý hóa đơn nhập Hình 3-43 Giao diện quản lý đơn đặt hàng 54 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 55 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ủ 56 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 57 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 58 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 59 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 60 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 61 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 62 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 63 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 64 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 đồ 65 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  Các trình duyệt Cốc cốc, Google Chrome, Egde, FireFox… 66 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 67 ... xem báo cáo cửa hàng Hình 3- 15 Giao diện đăng nhập 39 Xây dựng giao diện website bán quần áo Canifa Hình 3- 16 Giao diện ký 40 Xây dựng giao diện website bán quần áo Canifa Hình 3- 17 giao diện. .. 3- 21 Giao diện trang chủ 43 Xây dựng giao diện website bán quần áo Canifa Hình 3- 22 Giao diện trang chủ Hình 3- 23 Giao diện trang chủ 44 Xây dựng giao diện website bán quần áo Canifa Hình 3- 24 giao. .. Hình 3- 31 giao diện chi tiết sản phẩm 48 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 49 Xây dựng giao diện website bán quần áo