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 thoại cho cửa hàng qa

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 THOẠI CHO CỬA HÀNG Q&A GV: THS Nguyễn Hữu Vĩnh SVTH: Nguyễn Quốc Anh MSSV: 172480103091 LỚP: D17PM02 Bình Dương – 11/2020 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 THOẠI CHO CỬA HÀNG Q&A 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 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ử 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ậy, cơng nghệ mã nguồn mở trở nên ý 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 tơi chọn đề tài về: “Xây dựng website bán điện thoại cho cửa hàng Q&A” Đâ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 I 0 MỤC LỤC LỜI MỞ ĐẦU I MỤC LỤC II DANH MỤC HÌNH IV 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Ệ Kiến trúc hệ thống 2 Giới Thiệu Về HTML 2.1 HTML gì? .2 2.2 Công dụng HTML Giới Thiệu Visual Studio Code .2 Ngôn ngữ CSS Ngôn ngữ Javascript CHƯƠNG III: XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI CHO CỬA HÀNG Q&A Đặc Tả Giao Diện Client II 0 1.1 Giao Diện Trang Chủ 1.2 Giao diện trang Đăng Nhập Đăng Ký 1.3 Giao diện trang Giỏ Hàng 1.4 Giao diện trang Sản Phẩm 1.5 Giao diện trang Chi Tiết Sản Phẩm 1.6 Giao diện trang sản phẩm theo thương hiệu Đặc tả giao diện trang Admin 10 2.1 Giao diện trang đăng nhập Admin 10 2.2 Giao diện trang chủ Admin 10 2.3 Giao diện trang thêm danh mục sản phẩm 11 2.4 Giao diện trang liệt kê danh mục sản phẩm 11 2.5 Giao diện trang thêm thương hiệu 12 2.6 Giao diện trang liệt kê thương hiệu .12 2.7 Giao diện trang thêm sản phẩm 13 2.8 Giao diện trang Danh Sách Sản Phẩm 14 Đặc tả UseCase 15 3.1 Danh sách usecase .15 3.2 Biều đồ usecase toàn hệ thống 17 3.3 Biều đồ usecase quản lý giỏ hàng 18 3.4 Biểu đồ usecase quản lý sản phẩm 18 3.5 Biều đồ usecase quản lý đơn hàng 19 Đặc tả use case 19 4.1 Đặc tả use case đăng nhập 19 4.2 Đặc tả use case quản lý giỏ hàng 20 4.3 Đặc tả use case quản lý sản phẩm 20 4.4 Đặc tả usecase quản lý đơn hàng 22 4.5 Phân quyền 24 Biểu đồ chức hệ thống 25 5.1 Biều đồ đăng kí 25 5.2 Biểu đồ đăng nhập 25 5.3 Biểu đồ giỏ hàng 26 5.4 Biểu đồ quản lý sản phẩm 27 Thiết kế Database 29 III 0 6.1 Lược đồ quan hệ thực thể .29 6.2 Lược đồ 29 6.3 Lược đồ chi tiết 30 KẾT LUẬN 33 Kết đạt 33 Hướng phát triển đề tài 33 TÀI LIỆU THAM KHẢO 34 DANH MỤC HÌNH Hình Giao diện trang chủ Hình Giao diện trang Đăng Nhập Đăng Ký .6 Hình Giao diện trang Giỏ Hàng .6 Hình Giao diện trang Sản Phẩm .7 Hình Giao diện trang Chi Tiết Sản Phẩm .9 Hình Giao diện trang sản phẩm theo thể loại Hình Giao diện đăng nhập admin 10 Hình Giao diện Trang Chủ Admin .11 Hình Giao diện trang thêm danh mục sản phẩm 11 Hình 10 Giao diện trang liệt kê danh mục sản phẩm .12 Hình 11 Giao diện trang thêm thương hiệu .12 Hình 12 Giao diện trang liệt kê thương hiệu 13 Hình 13 Giao diện trang thêm sản phẩm 14 Hình 14 Giao diện trang danh sách sản phẩm 15 Hình 15 Biểu đồ usecase tồn hệ thống 17 Hình 16 Biểu đồ usecase quản lý giỏ hàng .18 Hình 17 Biểu đồ usecase quản lý sản phẩm 18 Hình 18 Biểu đồ usecase quản lý đơn hàng .19 Hình 19 Biểu đồ đăng kí .25 Hình 20 Biểu đồ đăng nhập 25 Hình 21 Biểu đồ xem giỏ hàng 26 Hình 22 Biểu đồ cập nhật giỏ hàng .26 Hình 23 Biểu đồ xóa giỏ hàng 27 Hình 24 Biểu đồ thêm sản phẩm 27 Hình 25 Biểu đồ chỉnh sửa sản phẩm 28 Hình 26 Biểu đồ xóa sản phẩm 28 Hình 27 Lược đồ quan hệ thực thể 29 IV 0 Hình 28 Bảng chứa thông tin tbl_product .30 Hình 29 Bảng chứa thơng tin tbl_customer .30 Hình 30 Bảng chứa thơng tin tbl_brand 30 Hình 31 Bảng chứa thơng tin tbl_Category_product .31 Hình 32 Bảng chứa thông tin tbl_admin 31 Hình 33 Bảng chứa thông tin tbl_shipping 31 Hình 34 Bảng chứa thơng tin tbl_order 32 Hình 35 Bảng chứa thơng tin tbl_order_details .32 V 0 CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài - XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI CHO CỬA HÀNG Q&A Mục Tiêu Của Đề Tài - Xây dựng website bán điện thoại cho cửa hàng Q&A Ý 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 thoại 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 - Product Detail: Đây trang khách hàng xem chi tiết sản phẩm đặt 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 thương hiệu sản phẩm hàng - Giỏ hàng: Nơi khách hàng xem sản phẩm chọn va đặt mua CHƯƠNG II: GIỚI THIỆU CÔNG NGHỆ 0 Kiến trúc hệ thống Xây dựng website ngôn ngữ lập trình mã nguồn mở PHP ( Hypertext Preprocessor ) Thường viết tắt thành PHP ngôn ngữ lập trình ngơn ngữ kịch đặc biệt phù hợp để lập trình web Ban đầu tạo lập trình viên người Canada gốc Đan Mạch Rasmus Lerdorf năm 1994 The PHP reference implementation is now produced by The PHP Group Giới Thiệu Về HTML 2.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 2.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 Giới Thiệu Visual Studio Code Visual Studio Code (VS Code hay VSC) trình soạn thảo mã nguồn phổ biến sử dụng lập trình viên Nhanh, nhẹ, hỗ trợ đa tảng, nhiều tính mã nguồn mở ưu điểm vượt trội khiến VS Code ngày ứng dụng rộng rãi Là trình biên tập lập trình code miễn phí dành cho Windows, Linux macOS, Visual Studio Code phát triển Microsoft Nó xem kết hợp hoàn hảo IDE Code Editor 0 Visual Studio Code hỗ trợ nhiều ngơn ngữ lập trình C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, PHP … Vì vậy, dễ dàng phát đưa thơng báo chương chương trình có lỗi Visual Studio Code hỗ trợ nhiều ứng dụng web Ngồi ra, có trình soạn thảo thiết kế website Và hết, Visual Studio Code phần mềm miễn phí, đơng đảo lập trình viên giới sử dụng Ngôn ngữ CSS CSS (Cascading Style Sheets) ngơn ngữ quy định cách trình bày cho tài liệu viết HTML, XHTML, XML, SVG, hay UML,… CSS cung cấp nhiều thuộc tính trình bày dành cho đối tượng với sáng tạo việc kết hợp thuộc tính giúp mang lại hiệu cao CSS hỗ trợ tất trình duyệt hiển thị “như nhau” hệ điều hành CSS đưa phương thức áp dụng từ file CSS ngồi Có hiệu đồng tạo website có hàng trăm trang hay muốn thay đổi thuộc tính trình bày CSS cập nhật liên tục mang lại trình bày phức tạp tinh vi Ngôn ngữ Javascript Với HTML biểu diễn thông tin chưa phải trang Web động có khả đáp ứng kiện từ phía người dùng Hãng Netscape đưa ngơn ngữ script có tên LiveScript để thực chức Sau đổi tên thành JavaScript để tận dụng tính đại chúng ngơn ngữ lập trình Java JavaScript ngơn ngữ dạng script gắn với file HTML Được trình duyệt diễn dịch, trình duyệt đọc JavaScript dạng mã nguồn 0 chức không hiển thị Trạng thái hệ thống sau thực use case: use case thành cơng actor sử dụng chức phân quyền Điểm mở rộng: khơng có 4.2 Đặc tả use case quản lý giỏ hàng Tóm tắt: use case mô tả cách người dùng quản lý Giỏ hàng Actor: Khách hàng Dòng kiện: Dòng kiện chính: use case bắt đầu người dùng muốn quản lý Giỏ hàng sau chọn mua sản phẩm (1) Người dùng chọn mua sản phẩm thông qua việc click button Mua hàng (2) Hệ thống chuyển sản phẩm chọn vào Giỏ hàng để giúp người dùng cập nhật lại số lượng sản phẩm xóa sản phẩm Dịng kiện khác: dịng kiện chính, người dùng khơng chọn mua sản phẩm cách click vào button Mua hàng , người dùng khơng mở Giỏ hàng lúc Giỏ hàng chưa có sản phẩm chọn Website tự chuyển Trang chủ ban đầu, 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: Phải có sản phẩm người dùng chọn mua cách click vào button Mua hàng Trạng thái hệ thống sau thực use case: Mở trang Giỏ hàng để tiến hành quản lý sản phẩm Giỏ hàng (cập nhật số lượng xóa sản phẩm) Điểm mở rộng: khơng có 4.3 Đặc tả use case quản lý sản phẩm 4.3.1 Đặc tả use case thêm Tóm tắt: Use case mô tả cách người dùng thêm sản phẩm 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 sản phẩm vào hệ thống (1) Người dùng nhập Tên sản phẩm, CategoryID … Sau click chọn button Thêm 22 0 (2) Hệ thống kiểm tra thông tin, liệu hợp lệ lưu vào Cơ sở liệu Dòng kiện khác: dịng 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 yêu cầu đăc biệt: khơng có 4.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 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: Sản phẩm sửa Điểm mở rộng: khơng có 4.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 23 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: khơng có 4.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ó 4.4 Đặc tả usecase quản lý đơn hàng 4.4.1 Đặc tả use case Thêm Tóm tắt: Use case mơ tả cách người dùng thêm đơn 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 đơn hàng vào hệ thống (1) Người dùng chọn ngày đặt, Sau click chọn button Thêm 24 0 (2) Hệ thống kiểm tra thông tin, liệu hợp lệ lưu 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 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: đơn hàng thêm vào hệ thống Điểm mở rộng: khơng có 4.4.2 Đặ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 đơn 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 đơn hàng hệ thống (1) Người dùng chọn để hiển thị thông tin cách click chọn Hiển thị (2) Hệ thống trả thông tin đơn hàng người dùng 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: Trạng thái hệ thống sau thực use case: thông tin đơn hàng hiển thị Điểm mở rộng: khơng có 4.4.3 Đặc tả use case Xóa Tóm tắt: use case mơ tả cách người dùng xóa đơn 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 đơn hàng hệ thống (1) Người dùng chọn đơn 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 25 0 (3) Actor xác nhận thao tác (4) Hệ thống xóa đơn hàng chọn Các yêu cầu đăc biệt: khơng có 4.5 Phân quyền Use case DangKi DangNhap XemSanPham TimSanPham DatHang ThanhToan LienHe QuanLiGioHang QuanLiSanPham QuanLyTaiDanhMucSanPham QuanLyTaiThươngHieuSanPham QuanLyDonHang QuanLyLienHe User x x x x Khách hàng x x x x x x x x x Admin x x x x x x x x x x 26 0 Biểu đồ chức hệ thống 5.1 Biều đồ đăng kí Hình 19 Biểu đồ đăng kí 5.2 Biểu đồ đăng nhập Hình 20 Biểu đồ đăng nhập 27 0 5.3 Biểu đồ giỏ hàng 5.3.1 Biểu đồ xem giỏ hàng Hình 21 Biểu đồ xem giỏ hàng 5.3.2 Biểu đồ cập nhật giỏ hàng Hình 22 Biểu đồ cập nhật giỏ hàng 28 0 5.3.3 Biều đồ xóa giỏ hàng Hình 23 Biểu đồ xóa giỏ hàng 5.4 Biểu đồ quản lý sản phẩm 5.4.1 Biểu đồ thêm sản phẩm Hình 24 Biểu đồ thêm sản phẩm 29 0 5.4.2 Biểu đồ chỉnh sửa sản phẩm Hình 25 Biểu đồ chỉnh sửa sản phẩm 5.4.3 Biểu đồ xóa sản phẩm Hình 26 Biểu đồ xóa sản phẩm 30 0 Thiết kế Database 6.1 Lược đồ quan hệ thực thể Hình 27 Lược đồ quan hệ thực thể 6.2 Lược đồ STT Tên tbl_product Mô tả Danh sách thông tin sản phẩm tbl_brand Danh sách thông tin thương hiệu tbl_category_product Danh sách danh mục sản phẩm tbl_order tbl_admin tbl_customers Thông tin tổng quan đơn hàng khách hàng mua hàng Danh sách thông tin tài khoản admin Danh sách tài khoản khách hàng đăng kí tbl_order_details Chi tiết đơn hàng khách hàng đặt mua tbl_shipping Chi tiết thông tin đơn hàng 31 0 6.3 Lược đồ chi tiết 6.3.1 Bảng chứa thơng tin tbl_product Hình 28 Bảng chứa thơng tin tbl_product 6.3.2 Bảng chứa thơng tin tbl_customer Hình 29 Bảng chứa thông tin tbl_customer 6.3.3 Bảng chứa thông tin tbl_brand Hình 30 Bảng chứa thơng tin tbl_brand 32 0 6.3.4 Bảng chứa thơng tin tbl_Category_product Hình 31 Bảng chứa thơng tin tbl_Category_product 6.3.5 Bảng chứa thơng tin tbl_admin Hình 32 Bảng chứa thông tin tbl_admin 6.3.6 Bảng chứa thông tin tbl_shipping Hình 33 Bảng chứa thơng tin tbl_shipping 33 0 6.3.7 Bảng chứa thơng tin tbl_order Hình 34 Bảng chứa thông tin tbl_order 6.3.8 Bảng chứa thông tin tbl_order_details Hình 35 Bảng chứa thơng tin tbl_order_details 34 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 35 0 TÀI LIỆU THAM KHẢO [1] Nguyễn Trường Sinh, Sửdụng PHP & MySQL thiết kếweb động, Nhà Xuất Bản Minh Khai [2] Thạc Bình Cường, Phân tích thiết kếhệthống thơng tin, Nhà xuất Khoa Học KỹThuật, 2002 [3] " Lập trình website Laravel Framework," https://www.youtube.com/playlist? list=PLWTu87GngvNxpWN6FVuEcS-YvFNq6RnqG [4] "Laravel Version 5.6 Documentation," https://laravel.com/docs/5.6 [5] "Laravel Wikipedia," https://en.wikipedia.org/wiki/Laravel 36 0 ... Đề Tài - XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI CHO CỬA HÀNG Q&A Mục Tiêu Của Đề Tài - Xây dựng website bán điện thoại cho cửa hàng Q&A Ý Nghĩa Của Đề Tài - Tối ưu tiết kiệm thời gian khách hàng - Giúp... nghệ mã nguồn mở trở nên ý 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. .. CHƯƠNG III: XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI CHO CỬA HÀNG Q&A Đặc Tả Giao Diện Client 1.1 Giao Diện Trang Chủ  Mục đích: Cung cấp số dịch vụ chức website  Trong giao diện khách hàng xem số thẻ