ĐỒ ÁN CUỐI KÌ Website bán phụ kiện máy tính (gear)

TRƯỜNG ĐẠI HỌC SƯ PHẠM TP.HCM KHOA CÔNG NGHỆ THÔNG TIN MÔN PHÁT TRIỂN ỨNG DỤNG WEB - - ĐỒ ÁN CUỐI KÌ Website bán phụ kiện máy tính (gear) Thành viên thực hiện: Họ tên MSSV Nguyễn Minh Huy Phạm Quang Dự Trần Cơng Bình Trịnh Hoàng Tùng 46.01.104.065 46.01.104.032 46.01.104.015 46.01.104.211 Mã lớp học phần: 2121COMP130303 Thành phố Hồ Chí Minh – tháng 5/2022 BẢNG PHÂN CƠNG Tạo database (chính) Thiết kế giao diện (chính) Nguyễn Minh Huy Tìm kiếm hình ảnh, tài liệu Backend (chính) Kiểm thử Báo cáo powerpoint Tạo database (phụ) Thiết kế giao diện (phụ) Phạm Quang Dự Tìm kiếm hình ảnh, tài liệu Backend (phụ) Kiểm thử Báo cáo powerpoint Tạo database (phụ) Thiết kế giao diện (phụ) Tìm kiếm hình ảnh, tài liệu Trần Cơng Binh Backend đăng ký, đăng nhập, xử lý mail Kiểm thử Báo cáo word Tạo database (phụ) Thiết kế giao diện (phụ) Tìm kiếm hình ảnh, tài liệu Trịnh Hồng Tùng Backend đăng ký, đăng nhập, xử lý mail Kiểm thử Báo cáo word MỤC LỤC MỤC LỤC HÌNH ẢNH LỜI CẢM ƠN “Trước tiên với tình cảm sâu sắc chân thành nhất, cho phép chúng em bày tỏ lòng biết ơn đến quý thầy cô Khoa công nghệ thông tin đặc biệt Ma Ngân Giang tận tình dạy chúng em học phần Phát triển ứng dụng Web Tuy nhiên, vốn kiến thức khả tiếp cận thực tế nhiều hạn chế Mặc dù, chúng em cố gắng chắn khó tránh khỏi thiếu sót nhiều chỗ cịn chưa xác, kính mong xem xét góp ý để dự án chúng em hoàn thiện Nhóm chúng em xin chân thành cảm ơn!” TP.HCM, tháng năm 2022 LỜI NÓI ĐẦU Với trình phát triển khoa học kĩ thuật cơng nghệ thơng tin đóng vai trị quan trọng Với mong muốn áp dụng công nghệ thông tin vào sống ngày để giảm áp lực, tăng tính tiện lợi việc quản lí mua bán mặt hàng nói chung, đặc biệt mặt hàng điện tử, phụ kiện máy tính nói riêng Nhóm chúng em muốn xây dựng ứng dụng quản lí bán hàng phụ kiện điện tử máy tính để giúp cửa hàng dễ dàng quản lí sản phẩm, hoạt động khách hàng, ngồi cịn giúp khách hàng dễ dàng tiếp cận sản phẩm cửa hàng, cho phù hợp với mục đích mua hàng Một ứng dụng miễn phí phù hợp với cửa hàng Nhận giúp đỡ, bảo tận tình Cơ Ma Ngân Giang, người trực tiếp hướng dẫn nhóm chúng em suốt học phần Phát triển ứng dụng Web Những hướng dẫn, đánh giá chia sẻ kinh nghiệm làm việc Cơ thơng tin vơ hữu ích cho việc hồn thành dự án nhóm chúng em Bên cạnh đó, nhóm chúng em xin gửi lời cảm ơn đến thầy, cô công tác Khoa Công nghệ thông tin - Trường Đại học Sư phạm Thành phố Hồ Chí Minh giúp đỡ trình học tập lớp, kiến thức truyền thầy cô truyền đạt giúp đỡ chúng em nhiều việc hồn thành dự án Bước đầu vào thực tế nhóm chúng em cịn hạn chế vào cịn nhiều bỡ ngỡ nên khơng thể tránh khỏi thiếu sót, nhóm em mong nhận ý kiến đóng góp quý báu quý Thầy Cơ đề tài “ Quản lí bán hàng phụ kiện máy tính” nhằm tạo hội cho kiến thức lĩnh vực chúng em hoàn thiện, bổ sung nâng cao cho thân PHẦN 1: TỔNG QUAN VỀ ỨNG DỤNG WEB, NGÔN NGỮ THIẾT KẾ HTML/CSS VÀ NGƠN NGỮ LẬP TRÌNH PHP 1.1 Tổng quan Web lập trình Web 1.1.1 Tổng quan: Web, hay gọi website, tập hợp trang web, thường nằm tên miền tên miền phụ World Wide Web (WWW) Internet Một trang web tập tin HTML XHTML truy nhập dùng giao thức HTTP Trang mạng xây dựng từ tệp tin HTML (trang mạng tĩnh) vận hành CMS chạy máy chủ (trang mạng động) Một website xây dựng từ nhiều ngơn ngữ lập trình khác Java, PHP, ASP.NET,… 1.1.2 Lập trình Web: Lập trình web cơng việc lập trình viên Các lập trình viên có nhiệm vụ nhận tồn liệu từ phận thiết kế web để chuyển thành hệ thống website hoàn chỉnh Website có tương tác với sở liệu tương tác với người dùng dựa ngơn ngữ máy tính Website có dạng website tĩnh website động Website tĩnh: Quản trị viên tùy ý thay đổi nội dung hình ảnh Dạng web cần lập trình viên có kiến thức HTML Website tĩnh viết tảng HTML CSS số hiệu ứng từ Javascript Website động: Là website có cơng cụ quản trị để tùy biến nội dung dành cho người quản trị Người quản trị tùy ý thay đổi nội dung hình ảnh Ngôn ngữ xây dựng website động thường PHP, ASP.NET Framework, Java, JS,… Bước Lên ý tưởng cho trang web Trong giai đoạn nhóm phát triển sản phẩm thường hội ý với để trao đổi, phát triển ý tưởng Qua hình thành ý tưởng cho lập trình, nội dung, mục đích trang web, layout Giai đoạn quan trọng có ý nghĩa nhằm tránh tình trạng sản phẩm cuối công bố khác xa so với ý tưởng ban đầu khơng có đặc trưng Bước Đặc tả cho lập trình Đây giai đoạn tối quan trọng trình thiết kế trang web Ta bỏ nhiều thời gian cho giai đoạn lập trình, gỡ lỗi, test hay thiết kế tính năng, chi tiết nhỏ dễ kiểm soát phát lỗi điều chỉnh lỗi kịp thời Giai đoạn này, nhóm lập trình hội ý nhiều lần cách ghi giấy bút ưu điểm khuyết điểm mẫu thiết kế phù hợp Bước Viết code, thiết kế layout hiệu ứng Giai đoạn thực bắt tay vào thiết kế website Các thành viên đảm nhận việc code thực hiện, từ việc thiết lập sở liệu, thiết kế giao diện màu sắc, hiệu ứng tính tương tác với người quản lí, khách hàng Bước Kiểm thử sửa lỗi Sau hoàn thành bản, giai đoạn cuối kiểm thử Sau nhiều lần kiểm thử tính năng, trải qua nhiều giai đoạn sửa lỗi, tiếp nhận ý kiến, sản phẩm cuối dần hồn thiện, chờ đến thời điểm cơng bố Tổng quan ứng dụng Web: Thực tế hiểu ứng dụng trực tuyến lưu trữ máy chủ từ xa Trình ứng dụng phân phối thơng qua Internet dựa trình duyệt Nói cách cụ thể ứng dụng chạy website sử dụng trình duyệt cơng nghệ web để người dùng thực thao tác trực tiếp qua Internet Các website có tương tác, cho phép người dùng nhận, nhập hay thực thao tác liệu Ứng dụng web đời thực cho nhiều mục đích khác Hơn sản phẩm còn phù hợp sử dụng từ tổ chức lớn nhỏ cá nhân khác Các ứng dụng web điển hình tiếng biết đến như: • • • • • • … Web bán hàng online Phần mềm trò chơi, tính giải trí Web chỉnh sửa Các trang mạng xã hội Các trang tích hợp dịch vụ trực tuyến (lưu trữ đám mây, E-mail,…) Các dạng phần mềm quản lý (sinh viên/học sinh, nhân viên, ngân hàng, khách sạn, ) Tại nên sử dụng ứng dụng Web: Hiểu đơn giản, dịch vụ hỗ trợ tương tác sử dụng qua Web qua ứng dụng có sẵn, đa số khách hàng sử dụng trực tiếp thơng qua Web, tâm lí tiện dụng, nhanh chóng, khơng cần phải tải ứng dụng từ kho ứng dụng, loại bỏ thao tác rườm rà, cải thiện dung lượng, tương thích với nhiều loại thiết bị Nắm tâm lí đó, nhóm phát triển dự án này, với hi vọng vượt mặt ứng dụng với tính tương tự có sẵn Hình Các tiện ích sử dụng ứng dụng Web 1.2 Tổng quan HTML/CSS: 1.2.1 HTML: HTML (viết tắt từ Hypertext Markup Language, “Ngôn ngữ Đánh dấu Siêu văn bản”) ngôn ngữ đánh dấu thiết kế để tạo nên trang web World Wide Web Nó trợ giúp cơng nghệ CSS ngôn ngữ kịch giống JavaScript1 Các phần tử HTML khối xây dựng trang HTML Với cấu trúc HTML, hình ảnh đối tượng khác biểu mẫu tương tác nhúng vào trang hiển thị HTML cung cấp phương tiện để tạo tài liệu có cấu trúc cách biểu thị ngữ nghĩa cấu trúc cho văn headings, paragraphs, lists, links, quotes mục khác Các phần tử HTML phân định tags, viết dấu ngoặc nhọn Các tags giới thiệu trực tiếp nội dung vào trang Các tags khác bao quanh cung cấp thông tin văn tài liệu bao gồm thẻ khác làm phần tử phụ Các trình duyệt không hiển thị thẻ HTML, sử dụng chúng để diễn giải nội dung trang 1.2.2 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 (ví dụ HTML2) Có thể hiểu đơn giản rằng, HTML đóng vai trị định dạng phần tử website việc tạo đoạn văn bản, tiêu đề, bảng,…thì CSS Xem phần 1.2.2 Xem 1.2.1 10 Image: hình ảnh sản phẩm Sale_price: giá sản phẩm áp dụng giảm giá Normal_price: giá sản phẩm Sold: số lượng sản phẩm bán Quantity: số lượng sản phẩm có kho Date: ngày sản phẩm mắt Update_date: ngày Status: tình trạng sản phẩm, hết, hàng 2.3.7 CSDL chi tiết sản phẩm: Hình CSDL chi tiết sản phẩm Id: mã chi tiết sản phẩm Id_product: mã sản phẩm Table: bảng thông số sản phẩm Content: nội dung quảng cáo sản phẩm 2.4 Các thành phần giao diện: 2.4.1 Giao diện chính: 16 Hình 9: Giao diện trang web Giao diện Màn hình người dùng truy cập vào có thành phần sau: - Dropdown menu: Trang chủ, sản phẩm (Bàn phím, chuột, tai nghe), Nội dung Khuyến Layout Slideshow giới thiệu tính năng, sản phẩm Bên khối gồm button, bấm vào xem chi tiết sản phẩm Một khung chat ẩn (Tư vấn online) 17 2.4.2 Giao diện đăng nhập/đăng ký: Hình 10 Giao diện đăng nhập Hình 11 Giao diện đăng ký Giao diện đăng ký hay đăng nhập sử dụng form gần giống nhau, gồm trường liệu mà người dùng nhập vào (như username, mật khẩu, email, họ tên, ), lưu trữ sở liệu sau nhấn nút Xác nhận 18 2.4.3 Giao diện danh mục sản phẩm Hình 12: Giao diện danh mục sản phẩm Gồm khối, bấm vào truy cập tới chi tiết nội dung sản phẩm người dùng chọn Ngồi cịn có chức xếp mặt hàng theo thứ tự, tìm kiếm mặt hàng theo tên tìm kiếm mặt hàng theo mức giá 19 2.4.4 Giao diện giỏ hàng Hình 13: Giao diện giỏ hàng Quản lí nội dung sản phẩm khách hàng thêm vào giỏ cá nhân, chưa thực tốn Khách hàng huỷ hàng cách nhấn vào biểu tượng hình thùng rác 20 2.4.5 Giao diện chi tiết thông tin sản phẩm Hình 14: Giao diện chi tiết thơng tin sản phẩm Khi bấm chọn sản phẩm giao diện danh mục sản phẩm, người dùng (cụ thể khách hàng) dẫn tới trang chi tiết thông tin sản phẩm click vào Ở giao diện khách hàng xem mơ tả chi tiết sản phẩm, nhập số lượng muốn mua, thêm sản phẩm vào giỏ mua sản phẩm 2.4.6 Giao diện thơng tin tốn 21 Hình 15 Giao diện thơng tin tốn Gồm trường thơng tin, khách hàng tự điền vào, để khai báo thông tin phục vụ cho nghiệp vụ giao hàng tốn trực tuyến 2.4.7 Giao diện thơng tin tài khoản Hình 16 Giao diện thơng tin tài khoản Gồm thông tin người dùng, hiển thị ảnh đại diện, họ tên, e-mail, số điện thoại, địa thường trú, 22 2.4.8 Giao diện thơng tin đơn hàng Hình 17 Giao diện thơng tin đơn hàng Hiển thị trạng thái đơn hàng 2.4.9 Giao diện dashboard: 23 Hình 18 Giao diện dashboard Là bảng điều khiển quyền người quản trị (admin), với tính đặc quyền xem lợi nhuận cửa hàng, số lượt truy cập sản phẩm, số lượt bán, trả lại hàng, xem biểu đồ thống kê, …Đây đặc quyền có vai trị quản trị có 2.4.10 Giao diện thơng tin sản phẩm: Hình 19 Thơng tin sản phẩm sẵn có 24 Hiển thị thơng tin sản phẩm, tùy chọn xóa, sửa thêm 2.4.11 Giao diện thêm sửa sản phẩm: Hình 20 Màn hình thêm sửa thông tin sản phẩm Đây giao diện giúp người quản lí thêm thơng tin sản phẩm mới, mục đích đưa sản phẩm lên kệ, nhanh chóng đến tay người tiêu dùng 25 Ở phần thêm, có trường để thêm nội dung tên, danh mục, nhãn hiệu, hình ảnh minh họa, giá tổng số lượng có sản phẩm • Ở phần sửa, tương tự sửa lại tên, danh mục, nhãn hiệu, hình ảnh minh họa, giá niêm yết giá khuyến • 2.4.12 Giao diện quản lí thành viên: Hình 21 Giao diện quản lí thành viên Giúp quản lí thành viên có hệ thống, số chức khác 26 2.4.13 Giao diện quản lí đơn hàng hiển thị chi tiết đơn hàng: Hình 22 Giao diện quản lí đơn hàng hiển thị chi tiết đơn hàng Giao diện giúp người quản lý kiểm soát đơn hàng, đồng thời bấm vào mục “detail” người quản lý xem chi tiết đơn hàng 27 2.4.14 Giao diện quản lý chi tiết sản phẩm Hình 23 Giao diện quản lí chi tiết sản phẩm 2.4.15 Giao diện chỉnh sửa chi tiết sản phẩm Hình 24 Giao diện chỉnh sửa chi tiết sản phẩm 28 PHẦN 3: KẾT LUẬN 3.1 Ưu điểm: − − − − − Các chức ứng dụng hoàn thành Đáp ứng mục tiêu mà dự án đề ban đầu Tương thích tốt với nhiều loại thiết bị, nhiều trình duyệt hệ điều hành khác Có linh hoạt đáp ứng trải nghiệm người dùng Đường dẫn mã nguồn: https://github.com/minhuy212/wgearshop.git 3.2 Nhược điểm − − Nhóm có số lượng thành viên ỏi q trình xây dựng ứng dụng cịn gặp nhiều khó khăn việc thực viết chương trình cho phần cải tiến thêm nhiều tính nâng cao khác Chưa lường trước cố rủi ro bảo mật cao Tuy nhiên, đảm bảo tính bảo mật mức khá, người dùng an tâm sử dụng 3.3 Kinh nghiệm thu được: − − Hiểu nhiều kinh nghiệm giao tiếp cơng việc thực tế Có hội để vận dụng kiến thức lý thuyết nhà trường áp dụng vào thực tiễn 29