Đồ án xây dựng website bán giày

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN ĐỀ TÀI: Xây dựng Website bán giày Giảng viên hướng dẫn: ThS Thái Thụy Hàn Uyển Sinh viên thực hiện: Nguyễn Trung Đức - 20521200 Thành phố Hồ Chí Minh, tháng năm 2023 Lời cảm ơn Đồ án mơn học có nhiều thử thách, địi hỏi người học phải dành nhiều thời gian, cơng sức để nghiên cứu, tìm tịi xây dựng Đồng thời, hội để sinh viên thực hành học suốt năm đại học học hỏi thêm nhiều kiến thức, kinh nghiệm kỹ phục vụ cho công việc sau Cho nên xem thử thách hội để sinh viên rèn luyện, hồn thiện thân kĩ tích lũy suốt q trình làm đồ án Để hồn thành Đồ án này, em xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học Công nghệ Thơng tin – ĐHQG TP.HCM tạo điều kiện sở vật chất với hệ thống thư viện đại, đa dạng loại sách, tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thơng tin Em xin chân thành cảm ơn cô Thái Thụy Hàn Uyển tận tình giúp đỡ nhóm em hồn thành đồ án Chính nhờ góp ý, động viên cô giúp đồ án nhóm hồn thiện chun nghiệp nhiều Bên cạnh đó, nhóm học hỏi nhiều kiến thức, kinh nghiệm học thú vị trình làm khố luận, hành trang hữu ích cho nhóm sau Nhóm xin chân thành cảm ơn anh chị, bạn bè giúp đỡ nhóm q trình thực đồ án Nhờ người mà nhóm có nhiều góc nhìn khác nhauvề đề tài làm, từ giúp hồn thiện đồ án nhóm Trong q trình làm Đồ án em khơng tránh khỏi sai sót, em kính mong nhận dẫn góp ý q thầy để hồn thiện phát triển đồ án Khóa luận tốt nghiệp tương lai Chương I: Giới thiệu đề tài 1.Giới thiệu chung 1.1 Tên đề tài: Website bán giày 1.2.Mô tả đề tài: Trong thời đại công nghệ thông tin nay, website shop giày Online hình thức kinh doanh thời trang phổ biến ưa chuộng Điều không giúp cho nhà kinh doanh bán hàng trực tuyến mà mang lại tiện lợi cho khách hàng lựa chọn mua sản phẩm mà u thích nhà Một website shop giày Online đáp ứng yêu cầu khách hàng cần phải cung cấp đầy đủ thơng tin sản phẩm, hình ảnh chất lượng cao, giá cạnh tranh hệ thống toán đa dạng, tiện lợi Điều giúp khách hàng dễ dàng tìm kiếm sản phẩm cần cách nhanh chóng thuận tiện Ngồi ra, website shop giày Online giúp cho nhà kinh doanh mở rộng thị trường khách hàng tiếp cận với nhiều sản phẩm khác từ khắp nơi giới Một yếu tố quan trọng website shop giày Online thiết kế giao diện trang trí website đẹp mắt, dễ sử dụng Điều giúp thu hút khách hàng tạo niềm tin cho họ mua sắm website Nếu website bạn thiết kế chuyên nghiệp hấp dẫn, khách hàng cảm thấy thoải mái mua sắm trang web đánh giá cao sản phẩm 1.3.Khảo sát Website bán giày  Shopee: Shopee ứng dụng mua sắm trực tuyến đa cung cấp nhiều sản phẩm giày đa dạng từ giày thể thao, giày lười, giày cao gót đến giày dép biển Ngồi ra, Shopee cịn có sách đổi trả hàng tốt thường xun có chương trình khuyến hấp dẫn  Tiki: Tiki website bán hàng trực tuyến lớn Việt Nam cung cấp đa dạng sản phẩm giày từ thương hiệu tiếng Clarks, Crocs, Bata, Skechers Website có thiết kế đẹp mắt dễ sử dụng, cung cấp nhiều thông tin sản phẩm giá cả, đồng thời có sách đổi trả hàng bảo hành tốt  Sendo: Sendo ứng dụng mua sắm trực tuyến phổ biến cung cấp nhiều sản phẩm giày đa dạng từ thương hiệu khác Website có thiết kế đơn giản dễ sử dụng, cung cấp nhiều thông tin sản phẩm giá cả, đồng thời có sách đổi trả hàng tốt  Giaytot.com: Là website bán giày online chuyên nghiệp Việt Nam, giaytot.com cung cấp sản phẩm giày thể thao, giày nam, giày nữ đến từ thương hiệu tiếng Nike, Adidas, Converse, Vans Website có thiết kế đơn giản dễ sử dụng 2.Mục tiêu đề tài 2.1.Lý thuyết  Nghiên cứu ReactJS NodeJS  Nắm rõ thao tác cơng cụ lập trình Visual studio code  Nghiên cứu sử dụng dịch vụ sở liệu MongoDB  Nghiên cứu cách thức phát triển ứng dụng đa tảng 2.2 Mục tiêu  Thiết kế giao diện đẹp mắt, bắt mắt dễ sử dụng  Cung cấp đầy đủ thông tin sản phẩm  Đảm bảo tính an tồn bảo mật  Tối ưu hóa cơng cụ tìm kiếm:  Tích hợp tính đánh giá sản phẩm phản hồi từ khách hàng  Cập nhật xu hướng giày 2.4 Phạm vi nghiên cứu 2.4.1 Phạm vi môi trường:  Triển khai ứng dụng Website 2.4.2 Phương pháp nghiên cứu:  Tìm hiểu phương pháp có  Tham khảo Website shop giày xác định tính chung cần có  Tìm hiểu cơng nghệ sử dụng cho đề tài  Triển khai theo kế hoạch sẵn có  Kiểm thử sửa lỗi (nếu có)  Thiết kế giao diện, sở liệu Chương II Cơ sở lý thuyết 1.HTML  HTML viết tắt cụm từ Hypertext Markup Language (tạm dịch Ngôn ngữ đánh dấu siêu văn bản) HTML sử dụng để tạo cấu trúc thành phần trang web ứng dụng, phân chia đoạn văn, heading, titles, blockquotes… HTML ngôn ngữ lập trình  Một tài liệu HTML hình thành phần tử HTML (HTML Elements) quy định cặp thẻ (tag attributes) Các cặp thẻ bao bọc dấu ngoặc (ví dụ ) thường khai báo thành cặp, bao gồm thẻ mở thẻ đóng Ví dụ, tạo đoạn văn cách đặt văn vào cặp tag mở đóng văn

Ưu nhược điểm HTML HTML ngôn ngữ đánh dấu siêu văn nên có vai trị xây dựng cấu trúc siêu văn website, khai báo tập tin kỹ thuật số (media) hình ảnh, video, nhạc Tuy nhiên, HTML có ưu nhược điểm riêng Ưu điểm:  Được sử dụng rộng rãi, có nhiều nguồn tài nguyên hỗ trợ cộng đồng sử dụng lớn  Học đơn giản dễ hiểu  Mã nguồn mở hoàn toàn miễn phí  Markup gọn gàng đồng  Tiêu chuẩn giới vận hành World Wide Web Consortium (W3C)  Dễ dàng tích hợp với ngôn ngữ backend PHP, Python… Khuyết điểm:  Được dùng chủ yếu cho web tĩnh Đối với tính động update hay realtime thời gian thực, bạn cần sử dụng JavaScript ngôn ngữ backend bên thứ PHP  Một số trình duyệt chậm hỗ trợ tính Code đơn giản HTML CSS  CSS chữ viết tắt Cascading Style Sheets, ngơn ngữ sử dụng để tìm định dạng lại phần tử tạo ngơn ngữ đánh dấu (HTML) Nói ngắn gọn ngôn ngữ tạo phong cách cho trang web  CSS phát triển W3C (World Wide Web Consortium) vào năm 1996, HTML khơng thiết kế để gắn tag để giúp định dạng trang web  Phương thức hoạt động CSS tìm dựa vào vùng chọn, vùng chọn tên thẻ HTML, tên ID, class hay nhiều kiểu khác Sau áp dụng thuộc tính cần thay đổi lên vùng chọn  Mối tương quan HTML CSS mật thiết HTML ngôn ngữ markup (nền tảng site) CSS định hình phong cách (tất tạo nên giao diện website), chúng khơng thể tách rời  Bố cục CSS thường chủ yếu dựa vào hình hộp hộp chiếm khoảng trống trang bạn với thuộc tính như:  Padding: Gồm khơng gian xung quanh nội dung (ví dụ: xung quanh đoạn văn bản)  Border: Là đường liền nằm bên phần đệm  Margin: Là khoảng cách xung quanh bên phần tử Cấu trúc đoạn CSS Một đoạn CSS bao gồm phần này: Nghĩa khai báo vùng chọn, sau thuộc tính giá trị nằm bên cặp dấu ngoặc nhọn {} Mỗi thuộc tính ln có giá trị riêng, giá trị dạng số, tên giá trị danh sách có sẵn CSS Phần giá trị thuộc tính phải cách dấu hai chấm, dòng khai báo thuộc tính ln có dấu chấm phẩy cuối Một vùng chọn sử dụng khơng giới hạn thuộc tính Dưới code đơn giản CSS: Javascript  JavaScript (JS) ngôn ngữ lập trình thơng dịch, phát triển Netscape từ năm 1995 Nó có cú pháp phát triển dựa ngôn ngữ C JavaScript ban đầu tạo để sử dụng trình duyệt, giúp thiết kế trang web động xử lý số hiệu ứng hình ảnh thơng qua DOM Ngơn ngữ bổ sung cần thiết giúp thực tác vụ mà thực với HTML  JavaScript không dành cho Website hay lập trình viên Frontend, cịn có nhiều thứ khác từ Backend ứng dụng di động Khái niệm lập trình viên Fullstack nhắc đến nhiều từ NodeJS – platform viết JavaScript sử dụng để lập trình server-side đời năm 2009 NodeJs giúp cho JavaScript Developer tự tạo Website ngơn ngữ Cấu trúc Javascript:  Khai báo biến: để lưu trữ giá trị JavaScript, ta sử dụng biến Cú pháp khai báo biến JavaScript là: var ten_bien = gia_tri;  Các loại liệu: JavaScript hỗ trợ nhiều loại liệu số, chuỗi, đối tượng, mảng, boolean, null undefined  Các phép toán: JavaScript hỗ trợ phép toán cộng, trừ, nhân, chia, phép toán logic phép so sánh STT Biến cố Xử lý Click ScrollView Chọn số lượng sản phẩm Click button Add Thêm sản phẩm vào giỏ hàng với số lượng mà To Cart khách hàng chọn Click ScrollView Khách hàng chọn số đánh giá sản phẩm ‘Select Rating’ Click button Khách hàng Submit Review sau đưa số ‘Submit Review’ rating bình luận sản phẩm 5.5 Giỏ hàng STT Biến cố Click Tên sản phẩm Xử lý Chuyển trang chi tiết sản phẩm Click icon Delete Xóa sản phẩm khỏi giỏ hàng Click ScrollView Khách hàng chọn số lượng sản phẩm ‘chọn số lượng’ Click button ‘Go Chuyển đến trang Shipping to checkout’ 5.6 Shipping STT Biến cố Click button Xử lý Chuyển đến trang Payment ‘Continue’ Click button ‘Back to Cart’ Trở lại trang Cart 5.7 Payment STT Biến cố Click option Xử lý Chọn hình thức tốn ‘Paypal’ ‘Paypal or Credit Card’ Click button Chuyển đến trang Place Order ‘Continue’ Click button ‘Back to Cart’ Trở lại trang Cart 5.8 Place Order STT Biến cố Click ‘Tên sản Xử lý Chuyển đến trang chi tiết sản phẩm phẩm’ Click button ‘Place Order’ Chuyển đến trang toán Paypal 5.9 Place Order Detail STT Biến cố Click ‘Tên sản Xử lý Chuyển đến trang chi tiết sản phẩm phẩm’ Click button Thông báo thành cơng khách hàng nhập ‘Thanh tốn thơng tin cần cung cấp ngay’ 5.10 Update Profile STT Biến cố Click ‘Update’ Xử lý Cập nhật thông tin khách hàng với thông tin mà khách hàng cung cấp 5.11 Order Information STT Biến cố Click button ‘Detail’ Xử lý Chuyển đến trang chi tiết toán 5.12 Manage User STT Biến cố Xử lý Click icon ‘Edit’ Chuyển đến trang thay đổi thông tin khách hàng Click icon Xóa tài khoản khách hàng ‘Delete’ 5.13 Product List STT Biến cố Xử lý Click icon ‘Edit’ Chuyển đến trang cập nhật thông tin sản phẩm Click icon Xóa sản phẩm ‘Delete’ 5.14 Product Form STT Biến cố Xử lý Click icon ‘Edit’ Chuyển đến trang cập nhật thông tin sản phẩm Click icon Xóa sản phẩm ‘Delete’ 5.15 Order List Page STT Biến cố Click button ‘Detail’ Xử lý Chuyển đến trang chi tiết Orders CHƯƠNG 6: KẾT LUẬN 6.1.Tổng kết  Điều quan trọng làm website bán giày phải có đầy đủ tính cần thiết trang web mua hàng trực tuyến đa dạng sản phẩm giao diện thân thiện dễ nhìn để phục vụ đáp ứng nhu cầu người dùng  Cần phân tích kỹ xác định tính trước thực code, thiết kế giao diện, thiết kế sở liệu  Cần xếp thời gian code cho chức cách hợp lý hơn, không nên tốn nhiều thời gian cho phần  Có khả đọc tài liệu tiếng anh lợi hướng dẫn bản, hay tài liệu đa số viết tiếng Anh 6.2.Khó khăn  Việc làm đồ án gặp nhiều trở ngại cơng đoạn xác định tính ứng dụng, phần việc xếp theo thứ tự chưa thật hợp lý, khơng có nhiều thời gian để hồn thành đồ án  Nhóm tốn nhiều thời gian cho việc xây dựng giao diện người dùng cách hợp lý cố gắng thực mục tiêu đề  Chưa xếp thời gian cách hợp lý nên tốn nhiều thời gian phần tự tìm hiểu Mern Stack hệ sở liệu MongoDB  Khó khăn việc đọc tài liệu chuyên ngành tiếng Anh 6.3.Kết đạt  Kết nhóm cố gắng để hồn thành chức đưa từ đầu  Có thể sử dụng thêm nhiều framework  Giải rắc rối cách xem thêm nhiều tài liệu để tìm hiểu sửa lỗi chương trình  Cải thiện khả đọc tài liệu tiếng Anh 6.4.Hạn chế đồ án  Code chưa tối ưu tốt nên load website chậm  Giao diện người dùng mức  Còn nhiều tính chưa tối ưu, chưa tiện dụng người dùng  Dữ liệu lưu trữ MongoDB bị hạn chế  Chưa sử dụng nhiều ngôn ngữ 6.5.Hướng phát triển  Đầu tư, phát triển thiết kế giao diện  Sử dụng đa dạng ngôn ngữ  Tối ưu hóa code  Nâng cấp thêm tính tiện ích hỗ trợ người dùng  Bổ sung tính Hỏi – Đáp Chatbot cho người dùng  Mở rộng thị trường khắp nước Việt Nam  Triển khai thêm phiên ứng dụng di động để dễ dàng phục vụ tốt cho nhu cầu người dùng CHƯƠNG 7: TÀI LIỆU THAM KHẢO Các Thư viện sử dụng trình phát triển 1.ReactJS: https://reactjs.org 2.ExpressJs: https://expressjs.com 3.NodeJs: https://nodejs.org/en/ 4.MongoDB: https://www.mongodb.com/home 5.Mern Stack: https://www.mongodb.com/mern-stackj2 Fix Bug: https://stackoverflow.com/ 7.UI: https://themeforest.net/