Đề tài xây dựng website bán đồ điện t cho c a hàng smart store

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT - CÔNG NGHỆ BÁO CÁO MÔN HỌC PHÁT TRIỂN PHẦN MỀM MÃ NGUỒN MỞ XÂY DỰNG WEBSITE BÁN ĐỒ ĐIỆN TỬ CHO CỬA HÀNG SMART STORE GV: THS Nguyễn Hữu Vĩnh SVTH: Đào Xn Hồng MSSV: 1724801030188 LỚP: D17PM02 Bình Dương – 11/2020 i|Page 0 TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT - CÔNG NGHỆ BÁO CÁO MÔN HỌC PHÁT TRIỂN PHẦN MỀM MÃ NGUỒN MỞ XÂY DỰNG WEBSITE BÁN ĐỒ ĐIỆN TỬ CHO CỬA HÀNG SMART STORE GV: THS Nguyễn Hữu Vĩnh SVTH: Đào Xuân Hoàng MSSV: 1724801030188 LỚP: D17PM02 Bình Dương – 11/2020 ii | P a g e 0 NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN Họ tên giảng viên: Nguyễn Hữu Vĩnh Tên đề tài: XÂY DỰNG WEBSITE BÁN ĐỒ ĐIỆN TỬ CHO C ỬA HÀNG SMART STORE Nội dung nhận xét: Điểm: Bằng số: Bằng chữ: GIẢNG VIÊN CHẤM (Ký, ghi rõ họ tên) NGUYỄN HỮU VĨNH iii | P a g e 0 Mục Lục CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI 1 Tên Đề Tài Mục Tiêu Của Đề Tài Ý Nghĩa Của Đề Tài Đối Tượng Của Đề Tài Một Số Trang Chính Của Website CHƯƠNG II: GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML gì? 1.2 Công dụng HTML 1.3 Định dạng HTML 2 Giới Thiệu Adobe Dreamweaver Ngôn ngữ CSS Ngôn ngữ Javascript CHƯƠNG III: XÂY DỰNG WEBSITE BÁN ĐỒ ĐIỆN TỬ CHO CỬA HÀNG SMART STORE Sơ đồ website Đặc Tả Giao Diện Client 2.1 Giao Diện Trang Chủ 2.2 Giao diện trang Đăng Nhập Đăng Ký 2.3 Giao diện trang Giỏ Hàng 2.4 Giao diện trang Sản Phẩm 2.5 Giao diện trang Liên Hệ 2.6 Giao diện trang Hồ Sơ 2.7 Giao diện trang Chi Tiết Sản Phẩm 2.8 Giao diện trang Sản Phẩm Theo Thể Loại 10 Đặc tả giao diện trang Admin 11 3.1 Giao diện trang Đăng Nhập Admin 11 3.2 Giao diện Trang Chủ Admin 12 3.3 Giao diện Trang Thêm Mới Nhãn Hiệu 12 3.4 Giao diện trang Danh Sách Nhãn Hiệu 13 3.5 Giao diện trang Thêm Mới Thể Loại 13 iv | P a g e 0 3.7 Giao diện trang Thêm Mới Sản Phẩm 14 3.8 Giao diện trang Danh Sách Sản Phẩm 15 Đặc tả UseCase 16 4.1 Danh sách usecase 16 4.2 Biều đồ usecase quản lý giỏ hàng 18 4.3 Biểu đồ quản lý sản phẩm 18 4.4 Biều đồ quản lý tài khoản khách hàng 19 Đặc tả use case 19 5.1 Đặc tả use case đăng nhập 19 5.2 Đặc tả use case quản lý giỏ hàng 20 5.3 Đặc tả use case quản lý sản phẩm 20 5.4 Đặc tả quản lý tài khoản khách hàng 22 5.5 Phân quyền 24 Biểu đồ chức hệ thống 25 6.1 Biều đồ đăng kí 25 6.2 Biểu đồ đăng nhập 26 6.3 Biểu đồ giỏ hàng 26 6.4 Biểu đồ quản lý sản phẩm 28 Thiết kế Database 29 7.1 Lược đồ quan hệ thực thể 29 7.2 Lược đồ 29 7.3 Lược đồ chi tiết 31 KẾT LUẬN 34 Kết đạt 34 Hướng phát triển đề tài 34 TÀI LIỆU THAM KHẢO 35 v|Page 0 Danh Mục Hình Hnh 1: Giao diện trang chủ Hnh 2: Giao diện trang Đăng nhập Đăng ký Hnh 3: Giao diện trang giỏ hàng Hnh 4: Giao diện trang sản phẩm Hnh 5: Giao diện trang liên hệ Hnh 6: Giao diện trang hồ sơ Hnh 7: Giao diện trang chi tiết sản phẩm 10 Hnh 8: Giao diện trang sản phẩm theo thể loại 10 Hnh 9: Giao diện trang đăng nhập admin 11 Hnh 10: Giao diện trang chủ admin 12 Hnh 11: Giao diện trang thêm nhãn hiệu 12 Hnh 12: Giao diện trang danh sách nhãn hiệu 13 Hnh 13: Giao diện trang thêm thể loại 13 Hnh 14: Giao diện trang danh sách thể loại 14 Hnh 15: Giao diện trang thêm sản phẩm 15 Hnh 16: Giao diện trang danh sách sản phẩm 16 Hnh 17: Biểu đồ usecase quản lý giỏ hàng 18 Hnh 18: Biểu đồ quản lý sản phẩm 18 Hnh 19: Biểu đồ quản lý tài khoản khách hàng 19 Hnh 20: Biểu đồ tuần t ự đăng kí 25 Hnh 21: Biểu đồ tuần t ự đăng nhập 26 Hnh 22: Biểu đồ tuần t ự xem giỏ hàng 26 Hnh 23: Biểu đồ tuần t ự cập nhật giỏ hàng 27 Hnh 24: Biểu đồ tuần t ự xóa giỏ hàng 27 Hnh 25: Biểu đồ tuần t ự thêm sản phẩm 28 Hnh 26: Biểu đồ tuần t ự chỉnh sửa sản phẩm 28 Hnh 27: Biểu đồ tuần t ự xóa sản phẩm 29 vi | P a g e 0 Danh Mục Bảng Bảng 1: Mô tả usecase 17 Bảng 2: Bảng phân quyền 25 Bảng 3: Lược đồ quan hệ thực thể 29 Bảng 4: Lược đồ tổng quan 30 Bảng 5: Lược đồ chi tiết product 31 Bảng 6: Lược đồ chi tiết customer 31 Bảng 7: Lược đồ chi tiết order 32 Bảng 8: Lược đồ chi tiết user 32 Bảng 9: Lược đồ chi tiết category 33 Bảng 10: Lượt đồ chi tiết brand 33 Bảng 11: Lượt đồ chi tiết cart 33 vii | P a g e 0 Lời Mở Đầu Hiện nay, giới công nghệ thông tin thương mại điện tử phát triển mạnh mẽ Kỹ thuật số giúp tiết kiệm đáng kể chi phí nhờ chi phí vận chuyển trung gian, chi phí giao dịch đặc biệt giúp tiết kiệm thời gian để người đầu tư vào hoạt động khác Hơn nữa, thương mại điện tử cịn giúp người tìm kiếm tự động theo nhiều mục đích khác nhau, tự động cung cấp thơng tin theo nhu cầu sở thích người Giờ đây, người ngồi nhà để mua sắm thứ theo ý muốn website bán hàng mạng giúp ta làm điều Chính v vậy, cơng nghệ mã nguồn mở trở nên ý v tính Giá thành rẻ hỗ trợ nhiều mạng giúp ta nhanh chóng Thiết kế website bán hàng thân thiện dễ sử dụng với người dùng Chính báo cáo chọn đề tài về: “Xây dựng website bán giày cho cửa hàng H&B” Đây hệ thống đơn giản đủ mạnh phép nhanh chóng Thiết kế ứng dụng bán hàng Internet Đề tài tiểu luận gồm phần phân chương sau: Chương 1: Tổng quan đề tài Chương 2: Giới thiệu công nghệ Chương 3: Giao diện website Chương 4: Kết luận hướng phát triển viii | P a g e 0 CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài - XÂY DỰNG WEBSITE BÁN ĐỒ ĐIỆN TỬ CHO CỬA HÀNG SMART STORE Mục Tiêu Của Đề Tài - Xây dựng website bán đồ điện tử cho cửa hàng smart store Ý Nghĩa Của Đề Tài - Tối ưu tiết kiệm thời gian khách hàng - Giúp khách hàng tiếp cận sản phầm dễ dàng - Giúp cửa hàng quảng bá r ộng rãi với nhiều khách hàng Đối Tượng Của Đề Tài - Đối tượng nghiên cứu chủ yếu loại mặt hàng liên quan đến điện tử Một Số Trang Chính Của Website - Home: Cung cấp số thông tin dịch vụ cần thiết khách hàng - Products: cung cấp cho khách hàng tất sản phẩm cửa hàng - Detail: Đây trang khách hàng xem chi tiết sản phẩm mua hàng - Login: Người dùng đăng nhập đăng kí để mua sản phẩm trang - Top Brand: Cung cấp cho khách hàng có thương hiệu - Contact: Nơi khách hàng hỏi đáp với cửa hàng - Profile: Khách hàng xem l ại thơng tin 1|Page 0 CHƯƠNG II: GIỚI THIỆU CƠNG NGHỆ Giới Thiệu Về HTML 1.1 HTML gì? HTML (Hypertext Markup Language-Ngôn ngữ đánh dấu siêu văn bản) ngôn ngữ đánh dấu chuẩn dùng soạn thảo tài liệu World Wide Web, rõ trang Web hiển thị trình duyệt Ngơn ngữ HTML dùng tag đoạn mã lệnh trình duyệt (Web browsers) cách hiển thị thành phần trang text graphics HTML ngôn ngữ xác định cấu trúc thông tin HTML s dụng loạt thẻ thuộc tính dùng để thị văn thông tin khác, cung cấp siêu liên kết tới tài liệu khác 1.2 Công dụng HTML Thiết kế nội dung hình thức trang web Xuất tài liệu trực tuyến hay truy xuất thông tin trực tuyến cách dùng liên kết chèn vào trang web Tạo biểu mẫu trực tuyến nhằm thu thập thông tin người dùng, quản lý giao dịch… Thêm vào đối tượng hình ảnh video, âm 1.3 Định dạng HTML Là tập tin có phần mở rộng htm html Là tập tin văn túy, có chứa mã đặc biệt gọi Tag(thẻ), thường đặt xung quanh khối văn Có thể viết nhiều trình soạn thảo: Microsoft Fontpage, notepad…và sử dụng nhiều adobe dreamweaver Giới Thiệu Adobe Dreamweaver Macromedia Dreamweaver trình biên soạn HTML chuyên nghiệp dùng để thiết kế, viết mã phát triển website trang web ứng dụng web Cho dù bạn có thích thú với cơng việc viết mã HTML thủ cơng bạn thích làm việc mơi trường biên soạn trực quan, Dreamweaver cung cấp cho bạn công cụ hữu ích để nâng cao kinh nghiệm thiết kế web bạn Các tính biên soạn trực quan Dreamweaver cho phép bạn tạo nhanh trang web mà khơng cần dịng mã Bạn xem tất thành phần website bạn kéo chúng trực tiếp từ panel dễ sử dụng vào văn Bạn nâng cao sản phẩm bạn cách tạo s ửa ảnh Macromedia Fireworks ứng dụng ảnh khác, sau chèn trực 2|Page 0 Dịng kiện khác: dịng s ự kiện chính, người dùng nhập tên s ản phẩm trùng với sản phẩm tồn để trống field bắt buộc nhập, hệ thống thơng báo lỗi Người dùng chọn trở đầu dịng kiện hủy bỏ việc thêm, lúc use case k ết thúc Các u cầu đăc biệt: khơng có 5.3.2 Đặc tả use case chỉnh sửa Tóm tắt: use case mơ tả cách người dùng chỉnh sửa sản phẩm Actor: Admin Dịng kiện: Dịng kiện chính: use case bắt đầu người dùng muốn sửa sản phẩm hệ thống (1) Người dùng nhập lại Tên sản phẩm… Sau click chọn button Lưu (2) Hệ thống kiểm tra thông tin, liệu hợp lệ cập nhật vào Cơ sở liệu Dòng kiện khác: dịng kiện chính, người dùng nhập mã s ản phẩm trùng với sản phẩm tồn để trống trường bắt buộc nhập, hệ thống thơng báo lỗi Người dùng chọn trở đầu dịng kiện hủy bỏ việc chỉnh sửa, lúc use case k ết thúc Các u cầu đăc biệt: khơng có Trạng thái hệ thống trước thực use case: Trạng thái hệ thống sau thực use case: Sản phẩm sửa Điểm mở rộng: khơng có 5.3.3 Đặc tả use case hiển thị Tóm tắt: use case mô tả cách người dùng chỉnh sửa sản phẩm Actor: Admin Dòng kiện: Dòng kiện chính: use case bắt đầu người dùng muốn sửa sản phẩm hệ thống (1) Người dùng nhập lại Tên sản phẩm… Sau click chọn button Lưu (2) Hệ thống kiểm tra thông tin, liệu hợp lệ cập nhật vào Cơ sở liệu 21 | P a g e 0 Dịng kiện khác: dịng kiện chính, người dùng nhập mã s ản phẩm trùng với sản phẩm tồn để trống trường bắt buộc nhập, hệ thống thơng báo lỗi Người dùng chọn trở đầu dịng kiện hủy bỏ việc chỉnh sửa, lúc use case k ết thúc Các u cầu đăc biệt: khơng có Trạng thái hệ thống trước thực use case: khơng có Trạng thái hệ thống sau thực use case: Sản phẩm sửa Điểm mở rộng: 5.3.4 Đặc tả use case xóa Tóm tắt: use case mơ tả cách người dùng xóa sản phẩm Actor: Admin Dịng kiện: Dịng kiện chính: use case bắt đầu người dùng muốn xóa sản phẩm hệ thống (1) Người dùng chọn sản phẩm muốn xóa cách click chọn Xóa (2) Hệ thống kiểm tra thao tác xóa (3) Actor xác nhận thao tác (4) Hệ thống xóa sản phẩm chọn Các u cầu đăc biệt: khơng có Trạng thái hệ thống trước thực use case: Khơng có Trạng thái hệ thống sau thực use case: sản phẩm xóa Điểm mở rộng: khơng có 5.4 Đặc tả quản lý tài khoản khách hàng 5.4.1 Đặc tả use case thêm Tóm tắt: Use case mô tả cách người dùng thêm khách hàng vào hệ thống Actor: Admin Dòng kiện: Dòng kiện chính: Use case bắt đầu người dùng muốn thêm khách hàng vào hệ thống (1) Người dùng nhập Tên khách hàng, Sau click chọn button Thêm (2) Hệ thống kiểm tra thông tin, liệu hợp lệ lưu vào Cơ sở liệu 22 | P a g e 0 Dòng kiện khác: dịng kiện chính, người dùng để trống field bắt buộc nhập hệ thống thơng báo lỗi Người dùng chọn trở đầu dịng kiện hủy bỏ việc thêm, lúc use case kết thúc Các yêu cầu đăc biệt: khơng có Trạng thái hệ thống trước thực use case: khơng có Trạng thái hệ thống sau thực use case: khách hàng thêm vào hệ thống Điểm mở rộng: khơng có 5.4.2 Đặc tả use case chỉnh sửa Tóm tắt: use case mô tả cách người dùng chỉnh sửa thông tin khách hàng Actor: Admin Dòng kiện: Dòng kiện chính: use case bắt đầu người dùng muốn sửa thông tin khách hàng hệ thống (1) Người dùng nhập lại Tên khách hàng… Sau click chọn button Lưu (2) Hệ thống kiểm tra thông tin, liệu hợp lệ cập nhật vào Cơ sở liệu Dòng kiện khác: dịng kiện chính, người dùng để trống field bắt buộc nhập, hệ thống thơng báo lỗi Người dùng chọn trở đầu dịng kiện hủy bỏ việc chỉnh sửa, lúc use case kết thúc Các yêu cầu đăc biệt: khơng có Trạng thái hệ thống trước thực use case: khơng có Trạng thái hệ thống sau thực use case: thông tin khách hàng sửa Điểm mở rộng: khơng có 5.4.3 Đặc tả use case hiển thị Tóm tắt: use case mơ tả cách người dùng hiển thị thông tin chi tiết khách hàng Actor: Admin Dịng kiện: Dịng kiện chính: use case bắt đầu người dùng muốn hiển thị thông tin chi tiết khách hàng hệ thống (1) Người dùng chọn để hiển thị thông tin chi tiết cách click chọn Hiển thị (2) Hệ thống trả thông tin chi tiết khách hàng người dùng chọn 23 | P a g e 0 Các yêu cầu đăc biệt: khơng có Trạng thái hệ thống trước thực use case: khơng có Trạng thái hệ thống sau thực use case: Chi tiết sản phẩm hiển thị Điểm mở rộng: khơng có 5.4.4 Đặc tả use case xóa Tóm tắt: use case mơ tả cách người dùng xóa khách hàng Actor: Admin Dịng kiện: Dịng kiện chính: use case bắt đầu người dùng muốn xóa khách hàng hệ thống (1) Người dùng chọn khách hàng muốn xóa cách click chọn Xóa (2) Hệ thống kiểm tra thao tác xóa (3) Actor xác nhận thao tác (4) Hệ thống xóa khách hàng chọn Các yêu cầu đăc biệt: khơng có Trạng thái hệ thống trước thực use case: Khơng có Trạng thái hệ thống sau thực use case: khách hàng xóa Điểm mở rộng: khơng có 5.5 Phân quyền Use case User Khách hàng Admin DangKi x x x DangNhap x x x XemSanPham x x x TimSanPham x x x DatHang x ThanhToan x LienHe x x x XemTinTuc x x x 24 | P a g e 0 QuanLiGioHang x QuanLiSanPham x QuanLyTaiKhoanKhachHang x QuanLyDonHang x QuanLyThongTinLienHe x QuanLyTinTuc x Bảng 2: Bảng phân quyền Biểu đồ chức hệ thống 6.1 Biều đồ đăng kí Hnh 20: Biểu đồ đăng kí 25 | P a g e 0 6.2 Biểu đồ đăng nhập Hnh 21: Biểu đồ đăng nhập 6.3 Biểu đồ giỏ hàng 6.3.1 Biểu đồ xem giỏ hàng Hnh 22: Biểu đồ xem giỏ hàng 26 | P a g e 0 6.3.2 Biểu đồ cập nhật giỏ hàng Hnh 23: Biểu đồ cập nhật giỏ hàng 6.3.3 Biều đồ xóa giỏ hàng Hnh 24: Biểu đồ xóa giỏ hàng 27 | P a g e 0 6.4 Biểu đồ quản lý sản phẩm 6.4.1 Biểu đồ thêm sản phẩm Hnh 25: Biểu đồ thêm sản phẩm 6.4.2 Biểu đồ chỉnh sửa sản phẩm Hnh 26: Biểu đồ chỉnh sửa sản phẩm 28 | P a g e 0 6.4.3 Biểu đồ xóa sản phẩm Hnh 27: Biểu đồ xóa sản phẩm Thiết kế Database 7.1 Lược đồ quan hệ thực thể Bảng 3: Lược đồ quan hệ thực thể 7.2 Lược đồ STT Tên Products Brand Mô tả Danh sách thông tin sản phẩm Danh sách thông tin nhãn hiệu 29 | P a g e 0 Category Danh sách dòng sản phẩm Order User Customer Cart Thông tin tổng quan khách hàng mua hàng Danh sách thông tin tài khoản Thơng tin tổng quan khách hàng đăng kí Chi tiết đơn hàng khách hàng đặt mua Bảng 4: Lược đồ tổng quan 30 | P a g e 0 7.3 Lược đồ chi tiết 7.3.1 Bảng chứa thông tin Products Bảng 5: Lược đồ chi tiết product 7.3.2 Bảng chứa thông tin Customer Bảng 6: Lược đồ chi tiết customer 31 | P a g e 0 7.3.3 Bảng chứa thông tin Order Bảng 7: Lược đồ chi tiết order 7.3.4 Bảng chứa thông tin User Bảng 8: Lược đồ chi tiết user 32 | P a g e 0 7.3.5 Bảng chứa thông tin Category Bảng 9: Lược đồ chi tiết category 7.3.6 Bảng chứa thông tin Brand Bảng 10: Lượt đồ chi tiết brand 7.3.7 Bảng chứa thông tin Cart Bảng 11: Lượt đồ chi tiết cart 33 | P a g e 0 KẾT LUẬN Kết đạt - Thiết kế lập trnh thành công website - Upload website lên mạng thành công - Bổ sung thêm kiến thức PHP Hướng phát triển đề tài - Tạo thêm chức đánh giá sản phẩm website - Khách hàng thực chức toán online 34 | P a g e 0 TÀI LIỆU THAM KHẢO Tiếng Việt Lập trnh PHP MySQL = Murach's PHP and MySQL, Murach Joel, 2013, NXB Khoa học Kỹ thuật Tiếng Anh PHP & MySQL: Novice to Ninja: Get Up to Speed With PHP the Easy Way, 2017, Michael J Kavanagh, Richard D Johnson, SAGE Publications Website https://www.w3schools.com/ http://hiepsiit.com/khoa-hoc/php/ngonnguphp/52/0 35 | P a g e 0 ... BÁN ĐỒ ĐIỆN T? ?? CHO C? ? ?A HÀNG SMART STORE M? ?c Tiêu C? ? ?a Đề T? ?i - Xây dựng website bán đồ điện t? ?? cho c? ? ?a hàng smart store Ý Ngh? ?a C? ? ?a Đề T? ?i - T? ??i ưu ti? ?t kiệm thời gian khách hàng - Giúp khách hàng. .. muốn x? ?a c? ?ch click chọn X? ?a (2) Hệ thống kiểm tra thao t? ?c x? ?a (3) Actor x? ?c nhận thao t? ?c (4) Hệ thống x? ?a khách hàng chọn C? ?c yêu c? ??u đ? ?c bi? ?t: khơng c? ? Trạng thái hệ thống trư? ?c th? ?c use case:... ch? ?c toán h? ?c Nhưng JavaScript không ngôn ngữ hướng đối t? ?ợng C+ +/Java 3|Page 0 CHƯƠNG III: XÂY DỰNG WEBSITE BÁN ĐỒ ĐIỆN T? ?? CHO C? ? ?A HÀNG SMART STORE Sơ đồ website Đ? ?c T? ?? Giao Diện Client 2.1 Giao