Đề tài THIẾT KẾ WEBSITE BÁN HÀNG TRỰC TUYẾN

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CẦN THƠ KHOA CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG NIÊN LUẬN CƠ SỞ NGÀNH CÔNG NGHỆ THÔNG TIN Đề tài THIẾT KẾ WEBSITE BÁN HÀNG TRỰC TUYẾN Sinh viên: Lê Tuấn Kiệt Mã số: B1909935 Khóa: K45 Cần Thơ, 2021-2022 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Cần Thơ, ngày tháng năm 2022 Giảng viên hướng dẫn TS Phạm Thế Phi LỜI CẢM ƠN Lời đầu tiên, em xin gửi lời cảm ơn chân thành đến TS.Phạm Thế Phi Trong trình học tập làm niên luận sở ngành Công nghệ thông tin, em nhận quan tâm giúp đỡ, hướng dẫn tận tình tâm huyết thầy Thầy giúp em tích lũy thêm nhiều kiến thức, học hỏi thêm nhiều kỹ lập trình trình bày báo cáo Kiến thức vô hạn mà tiếp nhận kiến thức thân người tồn hạn chế định Do đó, q trình hồn thành Niên luận sở chắn không tránh khỏi thiếu sót, hạn chế mà em chưa đạt Em mong góp ý từ thầy để Niên luận sở em hồn thiện, chỉnh chu Kính chúc thầy sức khoẻ, hạnh phúc thành công đường nghiệp giảng dạy Mục Lục: BỘ GIÁO DỤC VÀ ĐÀO TẠO NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Chương I GIỚI THIỆU ĐẶT VẤN ĐỀ MỤC TIÊU ĐỀ TÀI ĐỐI TƯỢNG VÀ PHƯƠNG PHÁP NGHIÊN CỨU NỘI DUNG NGHIÊN CỨU 4 4 Chương II CƠ SỞ LÝ THUYẾT Ngôn Ngữ Lập trình WebSite HTML5 CSS3 JavaScript Thư Viện Cho CSS Javascript Bootstrap jQuery Ngơn Ngữ Lập Trình Backend PHP MySQL Database 5 6 8 10 11 Chương III ĐẶC TẢ YÊU CẦU 1.Đặc tả yêu cầu chức hệ thống 1.2 Mơ hình Use case tổng qt đặc tả hệ thống 1.3 Mơ hình Use case cụ thể đặc tả hệ thống 13 13 14 15 Chương IV THIẾT KẾ GIẢI PHÁP 21 Chương V CÀI ĐẶT GIẢI PHÁP 25 Chương VI KẾT LUẬN Kết đạt Đánh giá hệ thống Hướng phát triển phần mềm 37 37 37 37 TÀI LIỆU THAM KHẢO 38 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 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 yêu cầu thời gian có hạn MỤC TIÊU ĐỀ TÀ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 Đồng thời đánh mạnh vào phần UI/UX để tạo cảm giác nâng cao trải nghiệm người dùng Chương II CƠ SỞ LÝ THUYẾT Ngôn Ngữ Lập trình WebSite 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 ⇒ File có hậu tố html Giai đoạn phát triển HTML: Năm Phiên 1989 Tim Berners-Lee giới thiệu World Wide Web 1991 Tim Berners-Lee giới thiệu HTML 1993 Dave Raggett soạn thảo HTML+ 1995 HTML đời 1997 HTML3.2 đời W3C khuyên dùng 1999 HTML4.1 đời W3C khuyên dùng 2000 XHTML 1.0 đời W3C khuyên dùng 2008 WHATWG khởi động dự án HTML5 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 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 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 HTML chưa sinh để định dạng trang web mà mơ tả trang web W3C tạo CSS để làm việc ⇒ File có hậu tố css Giai đoạn phát triển 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 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 ⇒ File có hậu tố js 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 2017 ECMAScript 2017 đời 2018 ECMAScript 2018 đời ⇒ Khơng có phiên ES$ Thư Viện Cho CSS Javascript 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 jQuery Là thư viện phổ biến Javascript đơn giản hoá việc lập trình Javascript nhiều jQuery thực nhiều tác vụ phổ biến đòi hỏi nhiều dòng code JavaScript để hồn thành gói chúng thành phương thức mà bạn cần gọi chúng Hoạt động tốt với tảng trang trình duyệt IE, Firefox, Chrome… công ty lớn sử dụng Google, Microsoft, IBM, Netflix… Thư viện jQuery chứa: ● Thao tác HTML/DOM ● Thao tác CSS ● Phương thức HTML event ● Hiệu ứng hoạt ảnh chuyển cảnh ● AJAX ● Tiện ích Giai đoạn phát triển jQuery Năm Phiên 2006 jQuery đời … … 2013 jQuery đời … … 2016 jQuery đời … … Hiện jQuery 3.6 đời image varchar(255) discount decimal(10,2) quantity int id_category char(25) Chú thích: - x x Bảng tb_cart Kiểu liệu username varchar(255) id_product int amount int - (tb_category) ràng buộc khóa ngoại lấy từ bảng tb_category id_product đặt auto_increment Thuộc tính Chú thích: x Khố Khố phụ Not Null (tb_user) x (tb_product ) x x Ràng buộc khóa ngoại lấy từ bảng tb_user tb_product Đây thực thể yếu Bảng tb_order: Thuộc tính Kiểu liệu Khố Khố phụ id_order char(10) username varchar(255) name_customer varchar(255) x phone_customer varchar(255) x address_customer varchar(255) x email_customer varchar(255) x city_customer varchar(50) x province_customer varchar(50) x x Not Null x (tb_user) x 23 status varchar(50) x order_date date x process_date date shipped_date date total_money float Chú thích: - ràng buộc khóa ngoại từ bảng tb_user status có giá trị bao gồm: ‘pending’: đặt hàng, chờ xử lý ‘shipping’: xử lý, giao hàng ‘delivered’: giao hàng ‘canceled’: huỷ hàng Bảng tb_order_details Thuộc tính Kiểu liệu id_order char(10) id_product int amount int Chú thích: Khố Khố phụ Not Null (tb_order) x (tb_product) x x Ràng buộc khóa ngoại lấy từ bảng tb_order tb_product Đây thực thể yếu Chương V CÀI ĐẶT GIẢI PHÁP Các thư viện Javascript cần dùng: - AOS: https://michalsnik.github.io/aos/ 24 - chartJS: https://www.chartjs.org/ - imageuloadify: https://www.jqueryscript.net/form/Drag-And-DropFile-Uploader-With-Preview-Imageuploadify.html Đầu tiên chúng sơ lược cấu trúc giao diện website Cửa sổ trang có: ● Header ● Footer - Home (Trang Chủ) 25 - Home (Trang Chủ) 26 - About (Giới thiệu) - Shop 27 28 - Tìm kiếm sản phẩm - Liên hệ - Đăng Nhập 29 - Đăng Ký - Thêm hàng 30 - Quản lý giỏ hàng - Thanh Tốn - DashBoard 31 - Xem thơng tin đơn hàng - Xem thông tin đơn hàng 32 - Thay đổi thông tin cá nhân - Thay đổi mật Trang Admin 33 Trang Dashboard - Trang quản lý sản phẩm - Tìm kiếm sản phẩm 34 - Thêm sản phẩm - Quản lý đơn hàng - Tìm kiếm đơn hàng sdt - Thay đổi thông tin đơn hàng 35 Chương VI KẾT LUẬN Kết đạt Xây dựng thành cơng mơ hình Website bán hàng 7-10 ngày đạt tất tính mà web bán hàng có 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ỹ ● Jquery Ajax: sử dụng Ajax 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 Đánh giá 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ế ● Những công nghệ sử dụng không đại so với thực tế Hướng phát triển phần mềm Kết hợp với Firebase Github Action, 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 36 TÀI LIỆU THAM KHẢO [1] W3school : https://w3school.com [2] StackOverflow: https://stackoverflow.com [3] Mã Nguồn Source (chủ sở hữu) : https://github.com/zenfection/php_shop_order [4] Wikipedia: https://vi.wikipedia.org 37