NIÊN LUẬN CÔNG NGHỆ THÔNG TIN NGÀNH CÔNG NGHỆ THÔNG TIN đề tài THIẾT kế WEB bán đồ ăn vặt và QUẢN lý TRÊN mô HÌNH MVC

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CẦN THƠ TRƯỜNG CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG NIÊN LUẬN CÔNG NGHỆ THÔNG TIN NGÀNH CÔNG NGHỆ THÔNG TIN Đề tài THIẾT KẾ WEB BÁN ĐỒ ĂN VẶT VÀ QUẢN LÝ TRÊN MƠ HÌNH MVC Sinh viên: Lê Tuấn Kiệt Mã số: B1909935 Khóa: K45 Cần Thơ, 12/2022 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Cần Thơ, ngày tháng 11 năm 2022 Giảng viên hướng dẫn LỜI CẢM ƠN Đầu tiên, em xin cảm ơn Thầy Cô khoa Công nghệ thông tin truyền thông tạo điều kiện cho em học tập truyền đạt kiến thức chuyên môn kinh nghiệm suốt trình học tập trường để em có đủ khả để nghiên cứu thực đề tài Em xin cảm ơn khoa Công nghệ thông tin truyền thông tạo điều kiện tài liệu tham khảo, không gian học tập làm việc góp phần để em hoàn thành tốt niên luận sở Đồng thời, em xin cảm ơn ban lãnh đạo khoa tạo điều kiện sở hạ tầng để hỗ trợ sinh viên thực tốt đề tài nghiên cứu Đặc biệt, em xin chân thành cảm ơn thầy Võ Bùi Quốc Bảo giúp đỡ em nhiều suốt q trình thực niên luận cơng nghệ thông tin Nhờ giúp đỡ hướng dẫn tận tình thầy em quản lý tiến độ dự án đảm bảo hoàn thành thời gian quy định Ngồi ra, giúp em tích lũy nhiều kiến thức chuyên môn cho sau Mặc dù có nhiều cố gắng thực đề tài cách hoàn chỉnh nhất, song hạn chế thời gian nghiên cứu kiến thức kinh nghiệm tránh khỏi thiếu sót định mà em chưa thấy Em mong nhận góp ý đến từ thầy cô để đề tài em hồn thiện Em kính chúc thầy nhiều sức khỏe, thành công hạnh phúc Em xin trân trọng cảm ơn Mục Lục CHƯƠNG I GIỚI THIỆU Đặt Vấn Đề Mục Tiêu Đề Bài Đối Tượng Và Phương Pháp Nghiên Cứu Nội Dung Nghiên Cứu 1 1 CHƯƠNG II CƠ SỞ LÝ THUYẾT Ngôn Ngữ Thiết Kế WebSite 1.1 HTML5 1.2 CSS3 1.3 JavaScript Thư Viện Cho CSS Và Javascript 2.1 Bootstrap 2.2 jQuery 2.3 Các thư viện bổ sung cho web Ngơn Ngữ Lập Trình Backend PHP MySQL Database Mơ Hình MVC 5.1 Giới thiệu MVC 5.2 Mơ hình MVC 5.3 MVC ứng dụng Web CDN 2 5 10 10 11 12 13 CHƯƠNG III ĐẶC TẢ YÊU CẦU Đặc Tả Yêu Cầu Chức Năng Của Hệ Thống Mơ Hình Use Case Tổng Quát Của Đặc Tả Hệ Thống Mô Hình Use Case Cụ Thể Của Đặc Tả Hệ Thống 14 14 15 16 CHƯƠNG IV THIẾT KẾ GIẢI PHÁP Thiết Kế Cơ Sở Dữ Liệu Chi Tiết Các Thực Thể Dữ Liệu Các Tỉnh Thành, Quận Huyện Việt Nam 23 23 24 28 CHƯƠNG V CÀI ĐẶT GIẢI PHÁP Chuẩn Bị Công Cụ Và Tài Ngun 1.1 Cài đặt mơi trường lập trình 1.2 Thiết lập tài nguyên dự án Trình Bày Giao Diện Mua Hàng 2.1 Trang Header 29 29 29 30 31 31 2.2 Trang Footer 2.8 Trang thêm hàng 2.2 Trang Error 2.3 Trang Chủ 2.4 Trang Giới thiệu 2.5 Trang liên hệ 2.6 Trang mua hàng 2.6 Trang đăng Nhập 2.7 Trang đăng ký 2.9 Trang quản lý giỏ hàng 2.10 Trang toán 2.11 Trang cá nhân Trình Bày Giao Diện Trang Admin 3.1 Trang Dashboard 3.2 Trang quản lý sản phẩm 3.3 Trang quản lý đơn hàng 3.4 Trang quản lý người dùng 31 31 32 33 37 38 38 42 43 44 45 45 48 48 49 51 52 CHƯƠNG VI KẾT LUẬN Kết Quả Đạt Được Đánh Giá Về Hệ Thống Hướng Phát Triển Phần Mềm 53 53 53 53 TÀI LIỆU THAM KHẢO 54 CHƯƠNG I GIỚI THIỆU Đặt Vấn Đề Ngày nay, với phát triển mạnh mẽ khoa học – cơng nghệ, góp phần thúc đẩy tiến xã hội tất lĩnh vực đời sống xã hội Đặc biệt với bùng nổ công nghệ thông tin internet tất thơng tin ln cập nhật, thay đổi cách liên tục đầy đủ thông qua mạng truyền thông internet, mà phổ biến thông qua website Hiện nay, nhu cầu mua hàng ngày nhiều thời đại thương mại điện tử, từ thiết bị công nghệ đến nhu yếu phẩm ngày, trang thương mại điện tử dần xu như: Shopee, Tiki, Lazada khơng cịn xa lại với nhiều người Trên thực tế cho thấy, nhiều nhà bán hành có nhu cầu bán hàng trực tuyến, muốn làm trang website riêng biệt để tăng độ uy tín mở rộng thị trường thay làm đối tác cho tảng lớn Shopee Nhưng để làm website bán hàng chuẩn SEO thật hoàn chỉnh nhiều thời gian yêu cầu tính Nắm bắt nhu cầu đó, ý tưởng làm "WebSite bán đồ ăn vặt" với công nghệ đơn giản giúp cho việc giới thiệu hàng nhà bn bán nhanh chóng quản lý thu chi đơn hàng, với thời gian có hạn Mục Tiêu Đề Bài Đây tài liệu đặc tả yêu cầu hệ thống chia sẻ giáo trình, tài liệu web Tài liệu nhằm mục đích mơ tả cung cấp thông tin chức năng, hiệu năng, yêu cầu thiết kế, giao diện yêu cầu đặc biệt khác cho thiết kế viên Bên cạnh cịn xây dựng hệ thống đẹp mắt, thân thiện với người dùng Đối Tượng Và Phương Pháp Nghiên Cứu "Website bán hàng" xây dựng với mục đích phục vụ cho nhà bán hàng có website riêng biệt với thời gian xây dựng ngắn mà đảm bảo công việc cốt lõi bán hàng Nội Dung Nghiên Cứu Tìm hiểu cách làm website công nghệ HTML, CSS, Javascript, PHP, mySQL mơ hình MVC cách áp dụng thư viện Javascript để đơn giản hoá vấn đề Đồng thời sử dụng Figma để thiết kế UI/UX đánh mạnh vào giao diện trải nghiệm người dùng để tạo cảm giác đồng nhất, mượt mà, dễ sử dụng… Trang CHƯƠNG II CƠ SỞ LÝ THUYẾT Ngôn Ngữ Thiết Kế WebSite HTML khung xương website CSS lớp da thẩm mỹ website Javascript hệ thống thần kinh bắp website giúp cho thứ hoạt động Hình Cấu trúc website 1.1 HTML5 Là viết tắt từ Hypertext Markup Language, ngôn ngữ lập trình đánh dấu siêu văn dùng để xây dựng website HTML hiểu cấu trúc trang web, sử dụng thẻ nhãn để định dạng nội dung khác trang web GIAI ĐOẠN PHÁT TRIỂN CỦA HTML Năm Phiên 1989 Tim Berners-Lee giới thiệu World Wide Web … … 1995 HTML đời … … 2014 HTML5 đời W3C khuyên dùng 2016 HTML5.1 đời W3C khuyên dùng 2017 HTML5.2 đời W3C khuyên dùng Trang 1.2 CSS3 Là viết tắt Cascading Style Sheets, dùng để định dạng cách mà thẻ HTML hoạt động hình thiết bị, ví lớp áo trang web, điều khiển bố cục trang, thêm hiệu ứng hoạt ảnh cho trang web thêm sinh động HTML chưa sinh để định dạng trang web mà mơ tả trang web W3C tạo CSS để làm việc CSS sử dụng để xác định kiểu cho trang web bạn, bao gồm thiết kế, bố cục biến thể hiển thị cho thiết bị kích thước hình khác nhau, có cấu trúc đơn giản sử dụng từ tiếng anh để đặt tên cho thuộc tính CSS sử dụng viết trực tiếp xen lẫn vào mã HTML tham chiếu từ file css riêng biệt Hiện CSS thường viết riêng thành tập tin với mở rộng ".css” Chính mà trang web có sử dụng CSS mà HTML trở nên ngắn gọn GIAI ĐOẠN PHÁT TRIỂN CỦA CSS: Năm Phiên 1996 CSS1 giới thiệu thức W3C 1998 CSS2 đời cải tiến so với CSS1 1999 CSS3 đời phát triển tới Trang 1.3 JavaScript Là ngôn ngữ lập trình thơng dịch phát triển từ ý niệm nguyên mẫu Ngôn ngữ dùng rộng rãi cho trang web (phía người dùng) phía máy chủ (với Nodejs) Nó vốn phát triển Brendan Eich Hãng truyền thông Netscape với tên Mocha, sau đổi tên thành LiveScript, cuối thành JavaScript Giống Java, JavaScript có cú pháp tương tự C, gần với Self Java .js phần mở rộng thường dùng cho tập tin mã nguồn JavaScript GIAI ĐOẠN PHÁT TRIỂN JAVASCRIPT Năm Phiên 1995 Javascript tạo Brendan Eich 1997 Javascript trở thành chuẩn ECMA, phiên ECMAScript rời 1998 ECMAScript đời 1999 ECMAScript đời 2009 ECMAScript đời 2015 ECMAScript 2015 đời 2016 ECMAScript 2016 đời … … 2022 ECMAScript 2022 đời Trang Thư Viện Cho CSS Và Javascript 2.1 Bootstrap Là Frontend Framework để giúp xây dựng website nhanh tương thích nhiều thiết bị (laptop, điện thoại, ) Bootstrap chứa thiết kế HTML CSS Javascript để nhà phát triển nhanh chóng dễ dàng phát triển web thích ứng phù hợp với thiết bị, trình duyệt tính qn thiết kế đảm bảo GIAI ĐOẠN PHÁT TRIỂN BOOTSTRAP: Năm Phiên 2011 Ra đời với tên Twitter Blueprint Mark Otto Jacob Thornton 2012 Bootstrap đời 2013 Bootstrap đời 2014 Bootstrap đời 2021 Bootstrap đời ( Sử dụng ) Trang List Hình 33 Hiện sản phẩm chế độ List (3): Sắp xếp sản phẩm sau: Hình 34 Tính xếp sản phẩm Trang 40 (4): Sản phẩm xem (Khi người dùng đặt nhập xem sản phẩm thêm vào sản phẩm xem) Chú thích: (1): Phân trang để load sản phẩm tốt (có thể sử dụng mũi tên qua lại để phân trang) Trang 41 2.6 Trang đăng Nhập Hình 35 Trang đăng nhập Sử dụng JS validate làm cho xử lý liệu đầu vào nhanh chóng trước gửi lên server Trang 42 2.7 Trang đăng ký Hình 36 Trang đăng ký Giống đăng nhập, có JS validate xử lý liệu đầu vào trước fetch API Trang 43 2.9 Trang quản lý giỏ hàng Hình 38 Trang quản lý giỏ hàng Có thể thêm bớt hàng xố chúng, dọn tất giỏ hàng Trang 44 2.10 Trang tốn Hình 39 Trang tốn đơn hàng Chú thích: (1): Sử dụng sở liệu tỉnh thành Việt Nam, fetch liệu người dùng chọn thông tin họ khiến cho khơng có liệu sai sót trải nghiệm người dùng nâng cao 2.11 Trang cá nhân DashBoard Hình 40 Trang Dashboard Trang 45 Xem thơng tin đơn hàng Hình 41 Trang tra cứu tất đơn hàng Xem thơng tin đơn hàng Hình 42 Trang thông tin đơn hàng chi tiết Thay đổi thông tin cá nhân Hình 43 Trang thay đổi thơng tin cá nhân Trang 46 Thay đổi mật Hình 44 Trang thay đổi mật Trang 47 Trình Bày Giao Diện Trang Admin 3.1 Trang Dashboard Hình 45 Trang Admin Dashboard Chủ thích: (1): Sử dụng thư viện metisMenu để tạo menubar nhanh chóng (2): Các điều hướng trang quản lý admin (3): Thông báo thông tin bán hàng (4): Sử dụng thư viện apexchart để tạo biểu đồ đơn hàng giao (5): Tùy chỉnh theme cho trang Trang 48 Hình 46 Tùy chỉnh theme trang admin 3.2 Trang quản lý sản phẩm Hình 47 Trang quản lý sản phẩm Chú Thích: (1): Trang thêm sản phẩm Trang 49 Hình 48 Tính thêm sản phẩm [1]: Thả ảnh vào để thêm ảnh để upload [2]: Sử dụng tinyMCE để tạo editor ảnh (2): Tìm kiếm sản phẩm, gõ từ khóa Hình 49: Tính tìm kiếm sản phẩm Trang 50 3.3 Trang quản lý đơn hàng Hình 50 Trang quản lý đơn hàng Chú thích: Sử dụng datatable để hiển thị danh sách (1): Hiển thị max mục (2): Tìm kiếm đơn hàng (3): Phân trang cho danh sách (có thể sử dụng mũi tên qua lại) (4): Xem chi tiết đơn hàng cụ thể Trang 51 3.4 Trang quản lý người dùng Hình 51 Trang quản lý người dùng Chú thích: (1): Xuất thơng tin bảng danh sách người dùng ( tính datatable) (2): Tìm kiếm người dùng (3): Phân trang cho bảng liệu 10 item (4): Tạm khóa người dùng (5): Xem thơng tin chi tiết người dùng Chú thích: [1]: Form thay đổi thơng tin cá nhân người dùng [2]: Bảng thống kê trình mua sắm [3]: Danh sách đơn hàng mua Trang 52 CHƯƠNG VI KẾT LUẬN Kết Quả Đạt Được Xây dựng thành cơng mơ hình Website bán hàng mơ hình MVC với 3-4 tuần đạt tính mà web bán hàng có, với giao diện dễ sử dụng bắt mắt thao tác dễ dàng Tìm hiểu áp dụng thành công Bootstrap 5: cho giao diện website đồng trực quan thẩm mỹ Javascript Fetch API: sử dụng load để không cần phải load lại thành phần không cần thiết, tương tác song song với PHP MySQL: Sử dụng function, procedure, trigger để tương tác liệu dễ thông qua PHP PHP: Biết sử dụng PHP để tương tác với sở liệu Hiểu rõ mơ hình MVC dễ dàng phát triển web sau Đánh Giá Về Hệ Thống Ưu điểm: Tính Năng: Đầy đủ tính tương tác cho trang web bán hàng Giao diện: Đơn giản, thẩm mỹ, liền mạch không cần phải load lại trang trình sử dụng Hệ thống: Cấu trúc file viết dễ hiểu, logic, dễ cho việc Debug sau này, thêm Plugin, components cần thiết phát triển lên cao Hạn Chế: Đây dự án cá nhân, nên không tránh khỏi sai sót Logic quy tắc bán hàng thực tế Chuẩn Javascript sử dụng không đại, sử dụng nhiều plugin jquery gây chậm so với sử dụng Javascript Hướng Phát Triển Phần Mềm Tối ưu hoá sở liệu, nâng cấp chuẩn Javascript đại, sử dụng package tốt làm dự án án website bán hàng hồn chỉnh miễn phí tảng Internet Thêm nhiều tính cần thiết để quản lý dashboard, tăng trải nghiệm người dùng website bán hàng Trang 53 TÀI LIỆU THAM KHẢO [1] W3school : https://w3school.com [2] StackOverflow: https://stackoverflow.com [3] Wikipedia: https://vi.wikipedia.org [4] Mozilla Developer: https://developer.mozilla.org [5] Source (chủ sở hữu): https://github.com/zenfection/phpmvc_shop_order Trang 54 ... Đăng ký người dùng Xem sản phẩm Đăng nhập Đăng nhập Tìm kiếm sản phẩm Đăng xuất Đăng xuất Liên hệ Phân tích tổng quan Đổi thơng tin cá nhân Đăng ký Quản lý sản phẩm Đổi mật Lọc sản phẩm Quản lý. .. Trang 20 13 Use case quản lý đơn hàng Hình 19 Use case quản lý đơn hàng 14 Use case quản lý người dùng Hình 20 Use case quản lý người dùng Trang 21 15 Use case phản hồi liên hệ Hình 21 Use case phản... làm website bán hàng chuẩn SEO thật hoàn chỉnh nhiều thời gian yêu cầu tính Nắm bắt nhu cầu đó, ý tưởng làm "WebSite bán đồ ăn vặt" với công nghệ đơn giản giúp cho việc giới thiệu hàng nhà bn bán