thiết kế và xây dựng website giới thiệu và bán motor – xe máy cho cửa hàng xe máy cao sơn

TĨM TẮT Hiện với phát triển khơng ngừng thương mại điện tử, nhu cầu mua bán trực tuyến người ngày tăng Các website thương mại điện tử dần thay phương pháp mua bán truyền thống có ưu điểm khơng giúp người khơng giảm thời gian mà cịn giảm chi phí cho vấn đề giao dịch Nhờ có phát triển vượt bậc công nghệ thông tin website thương mại điện tử mà việc kinh doanh buôn bán ngày dễ dàng Mục tiêu xây dựng đồ án nhằm giúp cho khách hàng nắm rõ tìm hiểu dòng xe máy – motor thị trường Việt Nam thông qua viết giới thiệu sản phẩm tin tức Khách hàng đặt mua xe trực tiếp từ xa thông qua mạng internet website thương mại điện tử Dù đâu, khách hàng tham khảo thơng tin sản phẩm cần, lựa chọn cho mẫu xe ưa thích, phục hợp với nhu cầu sử dụng thân, giúp cho việc mua sắm nhanh gọn, tiện ích tiết kiệm thời gian Hệ thống có chức tìm kiếm dễ dàng, giao diện dễ sử dụng Khách hàng chủ động tương tác với hệ thống mua tạo đơn hàng Để xây dựng website hoàn chỉnh em lên kế hoạch xây dựng đầy đủ chức năng: quản lý người dùng, quản lý đơn hàng, quản lý sản phẩm Dành cho khách hàng có nhiều chức thú vị tìm kiếm sản phẩm, chức giỏ hàng toán Bố cục đồ án em gồm chương: CHƯƠNG 1: TỔNG QUAN Chương phần tổng quan, giới thiệu lý chọn đề tài, mục tiêu đề tài, giới hạn phạm vi đề tài, kết dự kiến đạt CHƯƠNG 2: CƠ SỞ LÝ THUYẾT Chương hai, trình bày sở lý thuyết dùng để xây dựng đồ án lý thuyết phân tích thiết kế hướng đội tượng UML, ngơn ngữ lập trình HTML, CSS, PHP, Javascript, Framework Bootstrap, Laravel, jQuery hệ sở liệu MySQL, số công cụ sử dụng hỗ trợ làm đồ án Git, XAMPP, PhpStorm CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ Chương ba trình bày phân tích thiết kế hệ thống theo phương pháp luận hướng đối tượng gồm phần: khảo sát hệ thống, phân tích thiết kế hệ thống, thiết kế CSDL CHƯƠNG 4: XÂY DỰNG CHƯƠNG TRÌNH Chương bốn xây dựng chương trình gồm: xây dựng hệ thống, kết đạt phương hướng phát triển MỤC LỤC LỜI CẢM ƠN LỜI CAM ĐOAN MỤC LỤC DANH MỤC BẢNG DANH MỤC HÌNH ẢNH THUẬT NGỮ VIẾT TẮT 10 LỜI MỞ ĐẦU 11 CHƯƠNG 1: TỔNG QUAN 12 1.1 Lý chọn đề tài 12 1.2 Mục tiêu nhiệm vụ 12 1.2.1 Mục tiêu 12 1.2.2 Nhiệm vụ 13 1.3 Giới hạn phạm vi đề tài 13 1.4 Kết dự kiến đạt .13 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT .14 2.1 Kiến thức tảng 14 2.1.1 Trình bày phân tích thiết kế hướng đối tượng UML 14 2.1.2 Trình bày HTML, CSS .16 2.1.3 Trình bày Javascript jQuery 19 2.1.4 Trình bày PHP, mơ hình MVC 21 2.1.5 Tìm hiểu Framework Bootstrap 23 2.1.6 Trình bày MYSQL 25 2.2 CÔNG CỤ SỬ DỤNG 27 2.2.1 Tìm hiểu phầm mềm hỗ trợ phân tích thiết kế Rational Rose 27 2.2.2 Phần mềm hỗ trợ code Sublime Text 27 2.2.3 Chương trình tạo máy chủ Web XAMPP 28 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG THÔNG TIN 30 3.1 Khảo sát hệ thống 30 3.1.1 Khảo sát trạng thực tế hệ thống mua bán trực tuyến 30 3.1.2 Lập mục tiêu cho hệ thống 34 3.1.3 Lên kế hoạch cho dự án 34 3.2 Phân tích thiết kế hệ thống 35 3.2.1 Biểu đề UseCase 35 3.2.2 Biểu đồ lớp .52 3.2.3 Biểu đồ biểu đồ tương tác 53 3.3 Thiết kế sở liệu vật lý 90 CHƯƠNG 4: XÂY DỰNG CHƯƠNG TRÌNH 94 4.1 Xây dựng hệ thống 94 4.1.1 Giao diện chương trình 94 4.1.2 Chức 110 4.1.3 Code số chức 110 4.2 Kết đạt phương hướng phát triển 121 4.2.1 Kết đạt 121 4.2.2 Thuận lợi khó khăn 121 4.2.3 Hướng phát triển đồ án .121 TÀI LIỆU THAM KHẢO 122 DANH MỤC BẢNG Bảng 2.1: Các vấn đề liên quan đến UML 16 Bảng 3.1: Bảng khảo sát người quản lý 31 Bảng 3.2: Bảng khảo sát khách hàng 33 Bảng 3.3: Các tác nhân (Actor) chức (Use case) 36 Bảng 3.4: Đặc tả UC Add User (thêm tài khoản người dùng): 39 Bảng 3.5: Đặc tả UC Edit User (Sửa người dùng) 40 Bảng 3.6: Đặc tả UC Delete User .40 Bảng 3.7: Đặc tả UC Search User (Tìm kiếm người dùng) .40 Bảng 3.8: Đặc tả UC Add Product (Thêm sản phẩm) 41 Bảng 3.9: Đặc tả UC Edit Product (Sửa sản phẩm) 41 Bảng 3.10: Đặc tả UC Delete Product (Xóa sản phẩm) 42 Bảng 3.11: Đặc tả UC Search Product (Tìm kiếm sản phẩm) 42 Bảng 3.12: Đặc tả UC View Booking (Xem đơn hàng) 43 Bảng 3.13: Đặc tả UC Search Booking (Tìm kiếm đơn hàng) 43 Bảng 3.14: Đặc tả UC Add Post (Thêm viết) .44 Bảng 3.15: Đặc tả UC Edit Post (Sửa viết) 44 Bảng 3.16: Đặc tả UC Delete Post (Xóa viết) .45 Bảng 3.17: Đặc tả UC Search Post (Tìm kiếm viết) 45 Bảng 3.18: Đặc tả UC View Comment (Xem bình luận) 46 Bảng 3.19: Đặc tả UC Reply Comment (Trả lời bình luận) .46 Bảng 3.20: Đặc tả UC Register (Đăng kí) 47 Bảng 3.21: Đặc tả UC Login (Đăng nhập) 47 Bảng 3.22: Đặc tả UC Statistics 49 Bảng 3.23: Đặc tả UC Views .50 Bảng 3.24: Đặc tả Search 50 Bảng 3.25: Đặc tả Booking .51 Bảng 3.26: Đặc tả Comment .52 Bảng 3.27: Đặc tả UC Contact 52 Bảng 3.28: Bảng User (Người dùng) 90 Bảng 3.29: Bảng Category Product (Danh mục sản phẩm) 90 Bảng 3.30: Bảng Product (Sản phẩm) .91 Bảng 3.31: Bảng Category Post (Danh mục tin tức) 91 Bảng 3.32: Bảng Post (Tin tức) 91 Bảng 3.33: Bảng Booking_product (Đơn hàng sản phẩm) 92 Bảng 3.34: Bảng Comment (Bình luận) .92 Bảng 3.35: Bảng Booking (Đơn hàng) 92 DANH MỤC HÌNH ẢNH Hình 2.1: Cấu hình tập tin HTML 18 Hình 2.2: Quy trình hoạt động PHP 23 Hình 2.3: Mơ hình MVC 24 Hình 3.1: Sơ đồ UseCase tổng quát 37 Hình 3.2: UseCase Manages .38 Hình 3.3: UseCase Manage Users 39 Hình 3.4: UseCase Manage Products .41 Hình 3.5: UseCase Manage Booking 42 Hình 3.6: UseCase Manage Posts .43 Hình 3.7: UseCase Manage Comment 45 Hình 3.8: UseCase Authenticate 46 Hình 3.9: UseCase Statistics .47 Hình 3.10: UseCase View 48 Hình 3.11: UseCase Search .49 Hình 3.12: UseCase Booking 49 Hình 3.13: UseCase Comment 50 Hình 3.14: UseCase Contact .51 Hình 3.15: Class tổng quát 52 Hình 3.16: Biểu đồ trình tự “Add User” 53 Hình 3.17: Biểu đồ trình tự “Edit User” 54 Hình 3.18: Biểu đồ trình tự “Delete User” .54 Hình 3.19: Biểu đồ trình tự “Add Product” 55 Hình 3.20: Biểu đồ trình tự “Edit Product” 56 Hình 3.21: Biểu đồ trình tự “Delete Product” 56 Hình 3.22: Biểu đồ trình tự “Add Post” 57 Hình 3.23: Biểu đồ trình tự “Edit Post” 58 Hình 3.24: Biểu đồ trình tự “Delete Post” 58 Hình 3.25: Biểu đồ trình tự “View Booking” 59 Hình 3.26: Biểu đồ trình tự “Statistics” 59 Hình 3.27: Biểu đồ trình tự “Comment” 60 Hình 3.28: Biểu đồ trình tự “Register” .61 Hình 3.29: Biểu đồ trình tự “Login” 62 Hình 3.30: Biểu đồ trình tự “View” 62 Hình 3.31: Biểu đồ trình tự “Search” .63 Hình 3.32: Biểu đồ trình tự “Booking” .63 Hình 3.33: Biểu đồ trình tự “Contact” 64 Hình 3.34: Biểu đồ tương tác “Add User” 64 Hình 3.35: Biểu đồ tương tác “Edit User” 65 Hình 3.36: Biểu đồ tương tác “Delete User” 65 Hình 3.37: Biểu đồ tương tác “Add Product” 66 Hình 3.38: Biểu đồ tương tác “Edit Product” 66 Hình 3.39: Biểu đồ tương tác “Delete Product” .67 Hình 3.40: Biểu đồ tương tác “Add Post” 67 Hình 3.41: Biểu đồ tương tác “Edit Post” 68 Hình 3.42: Biểu đồ tương tác “Delete Post” .68 Hình 3.43: Biểu đồ tương tác “View Booking” 69 Hình 3.44: Biểu đồ tương tác “Statistics” 69 Hình 3.45: Biểu đồ tương tác “Comment” 70 Hình 3.46: Biểu đồ tương tác “Register” 70 Hình 3.47: Biểu đồ tương tác “Login” 71 Hình 3.48: Biểu đồ tương tác “View” .71 Hình 3.49: Biểu đồ tương tác “Search” 72 Hình 3.50: Biểu đồ tương tác “Booking” 72 Hình 3.51: Biểu đồ tương tác “Contact” 73 Hình 3.52: Biểu đồ hoạt động “Add User” .74 Hình 3.53: Biểu đồ hoạt động “Edit User” .75 Hình 3.54: Biểu đồ hoạt động “Delete User” 75 Hình 3.55: Biểu đồ hoạt động “Add Product” 76 Hình 3.56: Biểu đồ hoạt động “Edit Product” 77 Hình 3.57: Biểu đồ hoạt động “Delete Product” 77 Hình 3.58: Biểu đồ hoạt động “Add Post” 78 Hình 3.59: Biểu đồ hoạt động “Edit Post” 79 Hình 3.60: Biểu đồ hoạt động “Delete Post” 79 Hình 3.61: Biểu đồ hoạt động “View Booking” 80 Hình 3.62: Biểu đồ hoạt động “Statistics” 80 Hình 3.63: Biểu đồ hoạt động “Comment” .81 Hình 3.64: Biểu đồ hoạt động “View” .82 Hình 3.65: Biểu đồ hoạt động “Search” 83 Hình 3.66: Biểu đồ hoạt động “Booking” 84 Hình 3.67: Biểu đồ hoạt động “Register” 85 Hình 3.68: Biểu đồ hoạt động “Login” .86 Hình 3.69: Biểu đồ hoạt động “Contact” 87 Hình 3.70: Biểu đồ trạng thái “Sản phẩm” .87 Hình 3.71: Biểu đồ trạng thái “Thanh tốn đơn hàng” 88 Hình 3.72: Biểu đồ thành phần 88 Hình 3.73: Biểu đồ triển khai 89 Hình 4.1: Giao diện Trang chủ 93 Hình 4.2: Giao diện trang Đăng nhập tài khoản khách hàng 93 Hình 4.3: Giao diện trang Đăng ký tài khoản khách hàng 94 Hình 4.4: Giao diện trang Sản phẩm 94 Hình 4.5: Giao diện trang Chi tiết sản phẩm 95 Hình 4.6: Giao diện trang Tin tức .95 Hình 4.7: Giao diện trang Chi tiết tin tức 96 Hình 4.8: Giao diện trang Giỏ hàng 96 Hình 4.9: Giao diện trang Đăng nhập tài khoản Admin 97 Hình 4.10: Giao diện trang Quản lý Admin 97 Hình 4.11: Giao diện trang Quản lý danh mục Sản phẩm 98 Hình 4.12: Giao diện Thêm danh mục sản phẩm .98 Hình 4.13: Giao diện Sửa danh mục sản phẩm 99 Hình 4.14: Giao diện trang Quản lý sản phẩm 99 Hình 4.15: Giao diện trang Thêm sản phẩm 100 Hình 4.16: Giao diện trang Sửa thông tin sản phẩm .100 Hình 4.17: Giao diện trang Quản lý danh mục tin tức 101 Hình 4.18: Giao diện trang Thêm danh mục tin tức 101 Hình 4.19: Giao diện trang Sửa danh mục tin tức 102 Hình 4.20: Giao diện trang Quản lý viết tin tức 102 Hình 4.21: Giao diện trang Thêm viết tin tức .103 Hình 4.22: Giao diện trang Sửa thông tin viết tin tức .103 Hình 4.23: Giao diện Quản lý tài khoản Admin 104 Hình 4.24: Giao diện Thêm tài khoản Admin 104 Hình 4.25: Giao diện Sửa thông tin tài khoản Admin 105 Hình 4.26: Giao diện Quản lý tài khoản khách hàng 105 Hình 4.27: Giao diện Xem thông tin chi tiết tài khoản khách hàng 106 Hình 4.28: Giao diện trang Quản lý đơn hàng 106 Hình 4.29: Giao diện trang Xem thơng tin chi tiết đơn hàng 107 Hình 4.30: Giao diện Quản lý bình luận khách hàng 107 Hình 31: Giao diện trang Xem chi tiết bình luận khách hàng .108 Hình 4.32: Giao diện trang Liên hệ khách hàng .108 Hình 4.33: Giao diện trang Quản lý liên hệ Admin 109 Hình 4.34: Giao diện trang Xem chi tiết liên hệ khách hàng 109 THUẬT NGỮ VIẾT TẮT Ký hiệu UML Viết tắt Unifiled Modeling Language Giải thích Là ngơn ngữ mơ hình hóa thống nhất, dùng để đặc tả, trực quan hóa tư liệu hóa phần mềm hướng đối tượn PHP Person Home Page Là 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 HTML Hyper Text Markup Language Là ngôn ngữ thiết kế để tạo nên trang web MVC Model View Controller Là kiến trúc phần mềm, tạo với mục đích quản lý xây dựng dự án phần mềm SQL Structured Query Language Là hệ quản trị sở liệu tự nguồn mở phổ biến giới JS Javascript Là ngôn ngữ lập trình kịch dựa đối tượng phát triển từ ý niêm nguyên mẫu LỜI MỞ ĐẦU Thị trường thương mại điện tử Việt Nam ngày phát triển số lượng chất lượng Nhu cầu tìm kiếm sản phẩm internet người dùng Việt Nam giới ngày tăng nhanh kể từ thương mại điện tử bắt đầu xuất từ năm 1979 Cùng với phát triển mạnh mẽ khơng ngừng xã hội, nhu cầu lại người ngày tăng cao Một phương tiện di chuyển tiện ích giúp cho người di chuyển lại nhanh chóng giải nhiều vấn đề Bên cạnh phương tiện công cộng ngày chiếm niềm tin từ nhiều người, hay phương tiện cá nhân sang trọng tơ, motor – xe máy phương tiện đông đảo người dân Việt Nam tin dùng chiếm thị phần lớn thị trường bán xe Việt Nam với ưu điểm nhỏ gọn, di chuyển nhanh chóng phù hợp với túi tiền người mua Trong thời đại công nghệ 4.0, với bùng nổ phát triển mạnh mẽ công nghệ thông tin điện tử viễn thông nay, website thương mại điện tử dành cho việc mua bán motor – xe máy điều cần thiết để quảng bá thương hiệu hàng, tiếp cận với lượng khách hàng nhiều với phương pháp bán hàng truyền thống Với kiến thức học ghế nhà trường kinh nghiệm thực tế, em chọn đề tài “ THIẾT KẾ VÀ XÂY DỰNG WEBSITE GIỚI THIỆU VÀ BÁN MOTOR – XE MÁY CHO CỬA HÀNG XE MÁY CAO SƠN ” để làm tốt nghiệp CHƯƠNG 1: TỔNG QUAN 1.1 Lý chọn đề tài Hiện kinh tế phát triển kéo theo nhu cầu di chuyển lại người trở nên nhiều Bên cạnh phương tiên công cộng phát triển mạnh mẽ nhiều người quan tâm sử dụng, xe máy ln phương tiện cá nhân đông đảo người dân ưa chuộng sử dụng phổ biến đáp ứng nhu cầu thiết yếu người sử dụng nhanh, gọn, chủ động thời gian chi phí mua sắm chi phí vận hành phù hợp với túi tiền người tiêu dùng Hiểu điều đó, cửa hàng xe máy Cao Sơn nhập cung cấp dòng xe, mẫu xe đa dạng thị trường để người tiêu dùng có nhiều lựa chọn khác tùy vào nhu cầu sở thích người tiêu dùng Cửa hàng xe máy Cao Sơn có sở bán hàng nhiều địa điểm địa bàn tỉnh Bắc Ninh T.X Từ Sơn, huyện Tiêu Du Trong vài năm gần đây, website thương mại điện tử trở thành kênh mua sắm nhiều người Những người mua tham khảo mẫu xe, dịng xe hay mua xe họ thường chọn việc tìm kiếm lựa chọn trang website bán motor – xe máy nhắm tiếp kiệm thời gian so với trước phải đến tận cửa hàng để hỏi giá, xem xe Việc mua hàng trang website thương mại điện tử khơng cịn q xa lạ với người tiêu dùng thông thái thời đại công nghệ 4.0 Nhưng vấn đề, nhiều website vấn chưa thể đáp ứng cầu mua sắm người tiêu dùng muốn xem, hay tham khảo mẫu xe ưa chuộng, mẫu xe mới, nhiều hãng xe thị trường Chính em chọn đề tài “Thiết kế xây dựng website giới thiệu bán motor – xe máy cho cửa hàng xe máy Cao Sơn” với mục đích tìm hiểu hệ thống – đáp ứng nhu cầu bán hàng cửa hàng xe máy Cao Sơn đáp ứng cầu mua xe khách hàng Giúp khách hàng lựa chọn mẫu xe, loại xe phù hợp với nhu cầu sở thích thân Đồng thời tạo niềm tin uy tín cho hàng xe máy Cao Sơn qua việc bán hàng website 1.2 Mục tiêu nhiệm vụ 1.2.1 Mục tiêu - Nắm bắt phương pháp làm việc kinh doanh quy trình hoạt động website thương mại điện tử - Giao diện trang Xem thơng tin chi tiết đơn hàng: Hình 4.28: Giao diện trang Xem thông tin chi tiết đơn hàng - Giao diện trang Quản lý bình luận khách hàng: Hình 4.29: Giao diện Quản lý bình luận khách hàng 110 - Giao diện trang Xem chi tiết bình luận khách hàng: Hình 4.30: Giao diện trang Xem chi tiết bình luận khách hàng - Giao diện trang Liên hệ khách hàng: Hình 4.31: Giao diện trang Liên hệ khách hàng 111 - Giao diện trang Quản lý liên hệ Admin: Hình 4.32: Giao diện trang Quản lý liên hệ Admin - Giao diện trang Xem chi tiết liên hệ khách hàng: Hình 4.33: Giao diện trang Xem chi tiết liên hệ khách hàng 4.1.2 Chức - Giỏ hàng - Bình luận 4.1.3 Code số chức - Đăng ký tài khoản khách hàng: require_once DIR ."/autoload/autoload.php"; // Bắt điều kiện đăng nhập thành cơng khơng vào trang đăng ký 112 if (isset($_SESSION['name_id'])) { echo "alert('Bạn có tài khoản nên khơng thể đăng ký thêm tài khoản.');location.href='index.php'"; } $data = [ "name" => postInput('name'), "email" => postInput('email'), "password" => postInput('password'), "address" => postInput('address'), "phone" => postInput('phone') ]; $error = []; if ($_SERVER["REQUEST_METHOD"] == "POST") { // Nếu tồn phương thức POST tiến hàng validate đăng ký // echo "Đã submit"; if ($data['name'] == '') { $error['name'] = "Yêu cầu nhập đầy đủ thông tin."; } if ($data['email'] == '') { $error['email'] = "Yêu cầu nhập đầy đủ thông tin."; } else { $is_check = $db->fetchOne("users","email = '".$data['email']."' "); if ($is_check != NULL) { $error['email'] = "Địa email tồn Yêu cầu nhập địa email khác."; } } if ($data['password'] == '') { $error['password'] = "Yêu cầu nhập đầy đủ thông tin."; } else { $data['password'] = MD5(postInput('password')); } if ($data['address'] == '') { $error['address'] = "Yêu cầu nhập đầy đủ thông tin."; } 113 if ($data['phone'] == '') { $error['phone'] = "Yêu cầu nhập đầy đủ thông tin."; } // Kiểm tra mảng error if (empty($error)) { $idinsert = $db->insert('users', $data); if ($idinsert > 0) { $_SESSION['success'] = "Đăng ký thành công"; // Nếu đăng ký thành công sử dụng câu lệnh header("location: dangnhap.php"); // để chuyển sang trang đăng nhập header("location: dang-nhap.php"); } else { // Thêm thất bại $_SESSION['error'] = "Đăng ký thất bại"; } } } ?> Đăng ký thành viên Họ tên