Báo cáo XÂY DỰNG WEBSITE GIỚI THIỆU VÀ BÁN PHỤ KIỆN, ĐỒ ĂN TRỰC TUYẾN CHO CỬA HÀNG THÚ CƯNG PETNOW MỤC LỤC Chương 1 Kiến thức nền tảng 1 1 1 Cơ sở lý thuyết 1 1 1 1 Phân tích thiết kế hướng đối tượng.
Báo cáo XÂY DỰNG WEBSITE GIỚI THIỆU VÀ BÁN PHỤ KIỆN, ĐỒ ĂN TRỰC TUYẾN CHO CỬA HÀNG THÚ CƯNG PETNOW MỤC LỤC Chương Kiến thức tảng 1.1 Cơ sở lý thuyết 1.1.1 Phân tích thiết kế hướng đối tượng 1.1.2 Ngôn ngữ HTML CSS 1.1.3 Ngôn ngữ JavaScript 1.1.4 Ngôn ngữ PHP 1.1.5 Hệ quản trị sở liệu 1.2 Công cụ sử dụng 1.2.1.Phần mềm trực tuyến Draw.io 1.2.2 Thư viện Jquery 1.2.3 Mơ hình MVC 1.2.4 MySQL Chương Phân tích thiết kế hệ thống 2.1 Giới thiệu đơn vị khảo sát 2.2 Khảo sát cửa hàng 2.2.1 Tầm nhìn 2.2.2 Sứ mệnh 2.2.3 Giá trị cốt lõi .2 2.2.4 Các mẫu hàng hóa 2.2.5 Phương thức bán hàng .2 2.2.6 Phương thức toán 2.2.7 Các dịch vụ .3 2.3 Hình thức khảo sát 2.3.1 Hình thức khảo sát 2.3.2 Phỏng vấn 2.3.3 Tạo google biểu mẫu 2.4 Mô tả hệ thống 2.5 Yêu cầu với hệ thống .9 2.6 Use Case hệ thống 10 2.6.1 Các tác nhân hệ thống .10 2.6.2 Use Case tổng quát 10 2.6.3 Đăng ký 11 2.6.4 Quản lý tài khoản cá nhân .13 2.6.5 Tìm kiếm sản phẩm 16 2.6.6 Quản lý giỏ hàng 18 2.6.7 Quản lý đơn hàng cá nhân .22 2.6.8 Quản lý Đặt hàng 25 2.6.9 Tư vấn CSKH 27 2.6.10 Quản lý danh mục sản phẩm 28 2.6.11 Quản lý sản phẩm 36 2.6.12 Quản lý nhà cung cấp 46 2.6.13 Quản lý đơn hàng 54 2.6.14 Quản lý toán .58 2.6.15 Quản lý khách hàng .62 2.6.16 Thống kê báo cáo 66 2.7 Thiết kế sở liệu 72 2.7.1 Biểu đồ lớp 72 2.7.2 Các bảng thực thể 73 Chương Xây dựng chương trình .76 3.1.1 Giao diện trang chủ 76 3.1.2 Giao diện danh sách sản phẩm 77 3.1.3 Giao diện đăng ký 77 3.1.4 Giao diện đăng nhập .78 3.1.5 Giao diện giỏ hàng 78 3.1.6 Giao diện đơn hàng cá nhân 79 3.2 Giao diện trang quản trị .79 3.2.1 Giao diện trang chủ 79 3.2.2 Giao diện quản lý sản phẩm 80 3.2.3 Giao diện cập nhật sản phẩm 80 3.2.4 Giao diện quản lý đơn hàng 81 3.2.5 Giao diện chi tiết đơn hàng 81 3.2.7 Giao diện quản lý nhà cung cấp .82 Kết luận 83 Tài liệu tham khảo .84 DANH MỤC HÌNH Hình 1.1 Minh họa trang web sử dụng HTML CSS Hình 1.2 Giao diện phần mềm trực tuyến Draw.io Hình 2.3 Google biểu mẫu khảo sát khách hàng Hình 2.4 Google biểu mẫu khảo sát khách hàng Hình 2.5 Google biểu mẫu khảo sát khách hàng Hình 2.6 Biểu đồ câu trả lời khách hàng Hình 2.7 Biểu đồ câu trả lời khách hàng Hình 2.8 Biểu đồ câu trả lời khách hàng Hình 2.9 Các tác nhân hệ thống Hình 2.10 Use Case tổng quát Hình 2.11 Use Case đăng ký Hình 2.12 Biểu đồ hoạt động đăng ký Hình 2.14 Use Case Quản lý tài khoản cá nhân Hình 2.15 Biểu đồ hoạt động đăng nhập Hình 2.16 Biểu đồ đăng nhập Hình 2.17 Use Case Tìm kiếm sản phẩm Hình 2.18 Biểu đồ hoạt động tìm kiếm sản phẩm Hình 2.20 Use Case quản lý giỏ hàng Hình 2.21 Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng Hình 2.22 Biểu đồ hoạt động cập nhật sản phẩm giỏ hàng Hình 2.23 Biểu đồ hoạt động xóa sản phẩm giỏ hàng Hình 2.24 Use Case quản lý đơn hàng cá nhân Hình 2.25 Biểu đồ hoạt động xem chi tiết đơn hàng Hình 2.26 Biểu đồ xem chi tiết đơn hàng Hình 2.27 Use Case Đặt hàng Hình 2.28 Biểu đồ hoạt động đặt hàng Hình 2.29 Biểu đồ đặt hàng Hình 2.30 Use Case Tư vấn CSKH Hình 2.31 Use Case quản lý danh mục sản phẩm Hình 2.32 Biểu đồ hoạt động thêm danh mục Hình 2.33 Biểu đồ hoạt động sửa danh mục Hình 2.34 Biểu đồ hoạt động xóa danh mục Hình 2.35 Biểu đồ thêm danh mục Hình 2.36 Biểu đồ cập nhật danh mục Hình 2.37 Biểu đồ xóa danh mục Hình 2.38 Use Case quản lý sản phẩm Hình 2.39 Biểu đồ hoạt động thêm sản phẩm Hình 2.40 Biểu đồ hoạt động cập nhật sản phẩm Hình 2.41 Biểu đồ hoạt động tìm kiếm sản phẩm Hình 2.42 Biểu đồ hoạt động tìm kiếm sản phẩm Hình 2.43 Biểu đồ thêm sản phẩm Hình 2.44 Biểu đồ cập nhật sản phẩm Hình 2.45 Biểu đồ xóa sản phẩm Hình 2.46 Biểu đồ tìm kiếm sản phẩm Hình 2.47 Use Case quản lý nhà cung cấp Hình 2.48 Biểu đồ hoạt động thêm nhà cung cấp Hình 2.49 Biểu đồ hoạt động cập nhật nhà cung cấp Hình 2.50 Biểu đồ hoạt động xóa nhà cung cấp Hình 2.51 Biểu đồ thêm nhà cung cấp Hình 2.52 Biểu đồ cập nhật nhà cung cấp Hình 2.53 Biểu đồ xóa nhà cung cấp Hình 2.54 Use Case quản lý đơn hàng Hình 2.55 Biểu đồ hoạt động xem chi tiết đơn hàng Hình 2.56 Biểu đồ hoạt động tìm kiếm đơn hàng Hình 2.57 Biểu đồ xem chi tiết đơn hàng Hình 2.58 Biểu đồ tìm kiếm đơn hàng Hình 2.60 Biểu đồ hoạt động xem chi tiết tốn Hình 2.61 Biểu đồ hoạt động tìm kiếm tốn Hình 2.62 Biểu đồ xem chi tiết tốn Hình 2.63 Biểu đồ tìm kiếm tốn Hình 2.64 Use Case quản lý khách hàng Hình 2.65 Biểu đồ hoạt động tìm kiếm khách hàng Hình 2.66 Biểu đồ hoạt động xóa khách hàng Hình 2.67 Biểu đồ tìm kiếm khách hàng Hình 2.68 Biểu đồ xóa khách hàng Hình 2.70 Biểu đồ hoạt động thống kê doanh thu Hình 2.71 Biểu đồ hoạt động thống kê số lượng hàng tồn Hình 2.72 Biểu đồ thống kê doanh thu Hình 2.73 Biểu đồ thống kê số lượng hàng tồn Hình 2.74 Biểu đồ lớp Hình 3.1 Giao diện trang chủ người dùng Hình 3.2 Giao diện danh sách sản phẩm Hình 3.3 Giao diện đăng ký Hình 3.4 Giao diện đăng nhập Hình 3.5 Giao diện giỏ hàng Hình 3.6 Giao diện đơn hàng cá nhân Hình 3.7 Giao diện trang chủ quản trị Hình 3.8 Giao diện quản lý sản phẩm Hình 3.9 Giao diện cập nhật sản phẩm Hình 3.10 Giao diện quản lý đơn hàng Hình 3.11 Giao diện chi tiết đơn hàng Hình 3.12 Giao diện quản lý khách hàng Hình 3.13 Giao diện quản lý nhà cung cấp DANH MỤC BẢNG Bảng 2.1 Bảng admin Bảng 2.2 Bảng danhmuc Bảng 2.3 Bảng sanpham Bảng 2.4 Bảng khachhang Bảng 2.5 Bảng nhanvien Bảng 2.6 Bảng nhacungcap Bảng 2.7 Bảng donhang Bảng 2.8 Bảng chitietdonhang LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành tri ân sâu sắc thầy cô trường Đại học XXX đặc biệt thầy cô khoa Công nghệ thông tin trường tạo điều kiện cho em hoàn thành đồ án tốt nghiệp Em xin chân thành cảm ơn XXX nhiệt tình hướng dẫn bảo em kiến thưc học, kiến thức thực tế suốt trình thực đề tài Mặc dù cố gắng hoàn thành đồ án phạm vi khả cho phép chắn khơng tránh khỏi thiết sót Em mong nhận thơng cảm, góp ý tận tình bảo q thầy bạn Em xin chân thành cảm ơn! Chương Kiến thức tảng 1.1 Cơ sở lý thuyết 1.1.1 Phân tích thiết kế hướng đối tượng Giới thiệu OOAD Phân tích thiết kế hướng đối tượng(OOAD) giai đoạn phát triển mơ hình xác súc tính vấn đề, có thành phần đối tượng khái niệm đời thực, dễ hiểu người sử dụng Nguyên tắc OOAD - Một lớp nên có lý để thay đổi, tức lớp nên xử lý chức đơn lẻ Nếu đặt nhiều chức vào lớp, dẫn đến phụ thuộc chức với - Các lớp, module, chức nên dễ dàng cho việc thêm chức cho việc thay đổi - Lớp dẫn xuất phải có khả thay lớp cha - Chương trình khơng nên buộc phải cài đặt Interface mà khơng sử dụng đến - Các module cấp cao không nên phụ thuộc vào module cấp thấp Cả hai nên phụ thuộc thông qua lớp trừu tượng Lớp trừa tượng không nên phụ thuộc vào chi tiết Chi tiết nên phụ thuộc vào trừu tượng 1.1.2 Ngôn ngữ HTML CSS Hình 1.1 Minh họa trang web sử dụng HTML CSS Giới thiệu HTML HTML(Hypertext Markup Language) mã dùng để xây dựng nên cấu trúc nội dung trang web Ví dụ, nội dung cấu thành loạt đoạn văn, danh sách liệt kê, sử dụng hình ảnh bảng biểu Tính HTML5 - Phần tử dùng để hiển thị cỡ nhỏ, ký hiệu trình bao bọc xác cho thơng tin - Việc sử dụng dấu ngoặc kép phụ thuộc vào người dùng - Cho phép người dùng chỉnh sửa văn có phần tử, bao gồm phần tử - HTML5 loại bỏ hồn tồn thuộc tính - Cung cấp đầu vào email cho phép hướng dẫn trình duyệt cho phép chuỗi xác nhận địa email - Dễ dàng tạo trượt với phạm vi đầu vào Giới thiệu CSS CSS (viết tắt Cascading Style Sheets) dùng để miêu tả cách trình bày tài liệu viết ngôn ngữ HTML XHTML CSS hiểu cách mà chúng thêm kiểu hiển thị (font chữ, kích thước, màu sắc,…) cho tài liệu Web Tính CSS3 - Bo trịn góc ảnh - Xây dựng phần tử động, tạo đối tượng động animation - Biến đổi phần tử cách quay, dịch chuyển… - Đổ bóng cho phần tử với box-shadow - Tạo gradient với hai kiểu linear radial - Bo đường viền góc phần tử box 1.1.3 Ngơn ngữ JavaScript Giới thiệu JavaScript JavaScript ngơn ngữ lập trình HTML ứng dụng Web Nó sử dụng phổ biến phần trang web, chúng cho phép Client-Side script tương tác với người sử dụng tạo trang web động Nó ngơn ngữ chương trình thơng dịch với khả hướng đối tượng JavaScript kết hợp với HTML CSS Một website thường có phần gồm HTML, CSS Javascript Trong đó, HTML định nội dung cấu trúc trang web; CSS định màu sắc, hình dáng, kiểu chữ,… Hầu hết thay đổi HTML CSS thể dạng tĩnh, thực hành động với chuyển động bắt mắt xoay hình, kiểm tra thơng tin hợp lệ, hiển thị thông báo người dùng Tất hành động chuyển thể từ trạng thái tĩnh sang trạng thái động nhờ vào thành phần thứ Javascript Ba thành phần kết hợp với tạo nên website hoàn chỉnh với giao diện (UI) trải nghiệm người dùng (UX) chất lượng 1.1.4 Ngôn ngữ PHP Giới thiệu PHP Hypertext Preprocessor, thường viết tắt thành PHP ngơn ngữ lập trình kịch hay loại mã lệnh chủ yếu dùng để phát triển ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó thích hợp với web dễ dàng nhúng vào trang HTML PHP trở thành ngơn ngữ lập trình web phổ biến giới Lý nên sử dụng ngơn ngữ lập trình PHP - Mã nguồn mở: PHP sản phẩm mã nguồn mở(Open-source) nên việc cài đặt tùy biến PHP miễn phí tự Vì có ưu nguồn mở nên PHP cài đặt hầu hết Web Server thông dụng Apache, IIS… - Tính cộng đồng PHP: Là ngơn ngữ mã nguồn mở phổ biến PHP cộng đồng PHP lớn chất lượng Với cộng đồng phát triển lớn, việc cập nhật lỗi phiên linh hoạt việc hoàn thiện Cộng đồng hỗ trợ, chia kinh nghiệp PHP dồi dào, với nhiều diễn đàn blog ngồi nước nói PHP khiến q trình tiếp cận nhanh chóng - Thư viện phong phú: Thư viện script PHP phong phú đa dạng Từ đoạn code, hàm(PHP.net), tới lớn framework(Zend, CakePHP, Symfony…), hay ứng dụng hoàn chỉnh(Joomla, WordPress…) 10 name varchar(191) Tên email varchar(191) Email phone varchar(10) Số điện thoại password varchar(191) Mật lever tinyint(1) Cấp Bảng 2.1 Bảng admin Bảng danhmuc: STT Khóa Khóa chín ngoại h Tên trường Kiểu liệu Diễn giải id bigint(20) Mã mục phẩm danhmuccha_id bigint(20) Mã danh mục cha hinhanh varchar(191) Hình ảnh tendanhmuc varchar(191) Tên danh mục √ √ danh sản Bảng 2.2 Bảng danhmuc Bảng sanpham: STT Khóa Khóa chín ngoại h Kiểu liệu Diễn giải id bigint(20) Mã sản phẩm tensanpham varchar(191) Tên sản phẩm kichthuoc int(10) Kích thước giaban int(10) Giá bán gianhap int(10) Giá nhập nhacungcap_id bigint(20) Mã nhà cung cấp yeuthich tinyint(1) Yêu thích trangthai tinyint(1) Trạng thái mota varchar(191) Mô tả 10 hinhanh varchar(191) Hình ảnh √ Tên trường √ 72 11 giamgia int(10) Giảm giá 12 soluong int(10) Số lượng 13 gia int(10) Giá danhmuc_id bigint(20) Mã mục 14 √ danh Bảng 2.3 Bảng sanpham Bảng khachhang: STT Khóa Khóa chín ngoại h Tên trường Kiểu liệu Diễn giải id bigint(20) Mã khách hàng id_auth bigint(20) Mã bảo mật sodienthoai varchar(191) Số điện thoại lever varchar(191) Cấp avatar varchar(191) Ảnh đại diện diachi varchar(191) Địa password varchar(191) Mật email varchar(191) Email hoten varchar(191) Họ tên √ Bảng 2.4 Bảng khachhang Bảng nhanvien: STT Khóa Khóa chín ngoại h Tên trường Kiểu liệu Diễn giải id bigint(20) Mã viên ten varchar(191) Tên email varchar(191) Email sodienthoai varchar(191) Số điện thoại matkhau varchar(191) Mật khâủ √ nhân Bảng 2.5 Bảng nhanvien Bảng nhacungcap: STT Khóa Khóa Tên trường 73 Kiểu liệu Diễn giải chín h ngoại id bigint(20) Mã nhà cung cấp tennhacungcap varchar(191) Tên nhà cung cấp email varchar(191) Email sodienthoai varchar(191) Số điện thoại diachi varchar(191) Địa √ Bảng 2.6 Bảng nhacungcap Bảng donhang: STT Khóa Khóa chín ngoại h √ Tên trường Kiểu liệu Diễn giải id bigint(20) Mã đơn hàng ten varchar(191) Tên trangthai varchar(191) Trạng thái sodienthoai varchar(191) Số điện thoại email varchar(191) Email loai tinyint(1) Loại khachhang_id bigint(20) Mã hàng noidung varchar(191) Nội dung diachi varchar(191) Địa 10 tongtien int(10) Tổng tiền √ khách Bảng 2.7 Bảng donhang Bảng chitietdonhang: STT Khóa Khóa chín ngoại h Tên trường Kiểu liệu Diễn giải id bigint(20) Mã chi tiết đơn hàng hinhanh varchar(191) Hình ảnh gia int(10) Giá soluong int(10) Số lượng √ 74 √ donhang_id bigint(20) Mã đơn hàng √ sanpham_id bigint(20) Mã sản phẩm Bảng 2.8 Bảng chitietdonhang Chương Xây dựng chương trình 3.1 Giao diện trang người dùng 3.1.1 Giao diện trang chủ Hình 3.1 Giao diện trang chủ người dùng 75 3.1.2 Giao diện danh sách sản phẩm Hình 3.2 Giao diện danh sách sản phẩm 3.1.3 Giao diện đăng ký Hình 3.3 Giao diện đăng ký 3.1.4 Giao diện đăng nhập 76 Hình 3.4 Giao diện đăng nhập 3.1.5 Giao diện giỏ hàng Hình 3.5 Giao diện giỏ hàng 3.1.6 Giao diện đơn hàng cá nhân 77 Hình 3.6 Giao diện đơn hàng cá nhân 3.2 Giao diện trang quản trị 3.2.1 Giao diện trang chủ Hình 3.7 Giao diện trang chủ quản trị 3.2.2 Giao diện quản lý sản phẩm 78 Hình 3.8 Giao diện quản lý sản phẩm 3.2.3 Giao diện cập nhật sản phẩm Hình 3.9 Giao diện cập nhật sản phẩm 3.2.4 Giao diện quản lý đơn hàng 79 Hình 3.10 Giao diện quản lý đơn hàng 3.2.5 Giao diện chi tiết đơn hàng Hình 3.11 Giao diện chi tiết đơn hàng 3.2.6 Giao diện quản lý khách hàng 80 Hình 3.12 Giao diện quản lý khách hàng 3.2.7 Giao diện quản lý nhà cung cấp Hình 3.13 Giao diện quản lý nhà cung cấp Kết luận Tổng kết Trong thời gian làm đồ án giúp em tìm hiểu nắm bắt nhiều kiến thức bổ ích, đồng thời rút nhiều kinh nghiệm thực tế Do hạn chế thời gian trình độ nên chương trình khơng tránh khỏi nhiều sai sót Đề tài 81 “XÂY DỰNG WEBSITE GIỚI THIỆU VÀ BÁN PHỤ KIỆN, ĐỒ ĂN TRỰC TUYẾN CHO CỬA HÀNG THÚ CƯNG PETNOW” đời giúp nâng cấp, quản lý dễ dàng sản phẩm cửa hàng Kết đạt được: - Lưu trữ thông tin hệ thống dài hạn xác - Các giao dịch tiến hành nhanh chóng - Tìm kiếm thơng tin nhanh chóng, dễ dàng - Tiết kiệm thời gian nhân lực - … Hạn chế: - Một số trường thông tin chưa kiểm tra chặt chẽ - Thao tác nhanh đơi xảy lỗi - … Hướng phát triển Phát triển, cải tiến website có thêm số tính tương lai như: Tăng tính bảo mật trang web Cải tiến giao diện sinh động hơn, tạo ý cho khách hàng Tạo nhiều hiệu ứng đẹp mắt giao diện sử dụng khách hàng … 82 Tài liệu tham khảo [1] Nguyễn Hà Giang, Giáo trình học HTML, CSS, JavaScript bản, [2] Trường Đại học Bách Khoa Đà Nẵng, 2017 Bùi Khánh Phong, Đồ án sở: Tìm hiểu PHP Framework CodeIgniter, Trường Đại học Kỹ thuật Cơng Nghệ Thành Phố Hồ Chí [3] Minh, 2010 Trần Nguyên Phong, Giáo trình SQL - Đại học Khoa học Huế, 2004 [4] Trương Ninh Thuận, Đặng Đức Hạnh, Giáo trình phân tích thiết kế [5] hướng đối tượng - Nhà xuất Đại học Quốc gia Hà Nội, 2013 Trần Thị Thùy Dung, Giáo trình phân tích thiết kế hệ thống thơng tin, Trường Cao đẳng nghề tỉnh Bà Rịa Vũng Tàu, 2014 83 ... trang HTML PHP trở thành ngôn ngữ lập trình web phổ biến giới Lý nên sử dụng ngơn ngữ lập trình PHP - Mã nguồn mở: PHP sản phẩm mã nguồn mở(Open-source) nên việc cài đặt tùy biến PHP miễn phí... miễn phí tự Vì có ưu nguồn mở nên PHP cài đặt hầu hết Web Server thông dụng Apache, IIS… - Tính cộng đồng PHP: Là ngơn ngữ mã nguồn mở phổ biến PHP cộng đồng PHP lớn chất lượng Với cộng đồng phát... kinh nghiệp PHP dồi dào, với nhiều diễn đàn blog ngồi nước nói PHP khiến q trình tiếp cận nhanh chóng - Thư viện phong phú: Thư viện script PHP phong phú đa dạng Từ đoạn code, hàm (PHP. net), tới