Ứng dụng phần mềm mã nguồn mở wordpress và một số plugin vào thiết kế website bán hàng

TRƯỜNG ĐẠI HỌC HỊA BÌNH KHOA CƠNG NGHỆ THƠNG TIN – ĐIỆN TỬ VIỄN THƠNG KHĨA LUẬN TỐT NGHIỆP Chun ngành: Công nghệ Thông tin Sinh viên thực hiện: Cầm Bá Thắng Lớp: 519CNT Hà Nội, năm 2023 TRƯỜNG ĐẠI HỌC HỊA BÌNH KHOA CƠNG NGHỆ THƠNG TIN – ĐIỆN TỬ VIỄN THƠNG KHỐ LUẬN TỐT NGHIỆP ĐỀ TÀI : ỨNG DỤNG PHẦN MỀM MÃ NGUỒN MỞ WORDPRESS VÀ MỘT SỐ PLUGIN VÀO THIẾT KẾ WEBSITE BÁN HÀNG Người thực Cầm Bá Thắng GV Hướng dẫn : TS Nguyễn Đăng Minh Lớp : 519CNT Mã sinh viên : 519CNT032 Niên khóa : 2019 - 2023 Hà Nội, tháng 06 năm 2023 LỜI CÁM ƠN Thầy Nguyễn Đăng Minh, Em xin gửi lời cảm ơn chân thành đến Thầy với lòng biết ơn sâu sắc Trong suốt thời gian học tập hướng dẫn Thầy, em trải qua trải nghiệm học hỏi quý báu Thầy giảng viên tận tâm giàu kiến thức Thầy không truyền đạt kiến thức chuyên mơn sắc bén, mà cịn đồng hành hỗ trợ chúng em suốt trình học tập Thầy tạo điều kiện tốt để chúng em phát triển rèn luyện kỹ cần thiết Nhờ nhiệt huyết tận tâm Thầy, em có khám phá hiểu biết sâu sắc lĩnh vực mà Thầy giảng dạy Thầy không giúp em nắm vững kiến thức mà cịn khuyến khích em phát triển tư sáng tạo khả giải vấn đề Em biết ơn Thầy tình yêu thương quan tâm mà Thầy dành cho sinh viên Thầy lắng nghe, thấu hiểu tạo mơi trường học tập tích cực Những lời khun động viên Thầy giúp em vượt qua khó khăn phấn đấu Cuối cùng, em xin gửi lời cảm ơn sâu sắc tới Thầy Nguyễn Đăng Minh Những giá trị kỹ mà em học từ Thầy cánh cửa mở cho thành công tương lai Em trân trọng áp dụng điều Thầy truyền đạt, ln tự hào có Thầy phần hành trình học tập Chân thành cảm ơn Thầy ! Trân trọng, Hà Nội, Ngày 13 Tháng 06 Năm 2023 Người thực Cầm Bá Thắng LỜI MỞ ĐẦU Trong thời đại công nghệ số hóa, cơng nghệ thơng tin trở thành trái tim sống đại Nó thấm qua khía cạnh xã hội mang lại tiện ích vượt trội, hội tiến đáng kinh ngạc Công nghệ thông tin thay đổi cách làm việc, giao tiếp, mua sắm, giải trí hầu hết khía cạnh khác sống Nó giúp thu hẹp khoảng cách gắn kết người toàn cầu, tạo kết nối giao tiếp dễ dàng, mở không gian cho sáng tạo phát triển Với cơng nghệ thơng tin, truy cập thông tin từ khắp nơi giới vài cú nhấp chuột Chúng ta làm việc từ xa, học tập trực tuyến, mua sắm trực tuyến tận hưởng giải trí khơng giới hạn Cơng nghệ thông tin làm thay đổi cách sống làm việc Tuy nhiên, phủ nhận công nghệ thông tin mang lại nhiều lợi ích vượt trội cho xã hội Nó tạo đột phá y tế, giáo dục, kinh doanh, nghệ thuật nhiều lĩnh vực khác Công nghệ thông tin không công cụ, mà lực lượng thay đổi cách thức tương tác với giới xung quanh Với tiến không ngừng công nghệ thông tin, đứng trước hội thách thức Sự sáng tạo khả thích ứng yếu tố quan trọng để tận dụng tối đa tiềm mà công nghệ thông tin mang lại Đa số có nhiều cơng cụ hay phần mền để tạo nên Website Phần mềm mã nguồn mở WordPress số Với hàng triệu trang web sử dụng WordPress, trở thành tảng tuyệt vời cho việc xây dựng quản lý trang web cách dễ dàng hiệu WordPress cung cấp giao diện người dùng thân thiện linh hoạt, cho phép người dùng tạo quản lý trang web mà không cần kiến thức kỹ thuật sâu Với tính viết bài, tạo trang, quản lý danh mục bình luận, WordPress cơng cụ lý tưởng cho trang web cá nhân, blog, trang web tin tức, cửa hàng trực tuyến nhiều loại trang web khác Vậy nên, lí để em chọn đề tài “ Tìm hiểu Workpress xây dựng Website Thương Mại Điện Tử ” để sâu tìm hiểu ứng dụng vào sống thời đại 4.0 MỤC LỤC LỜI CÁM ƠN LỜI MỞ ĐẦU DANH MỤC HÌNH ẢNH DANH MỤC TỪ VIẾT TẮT CHƯƠNG I TỔNG QUAN VỀ WEBSITE TRÊN MÃ NGUỒN MỞ 1.1 Giới thiệu Phần mềm mã nguồn mở 1.1.1 Sự đời phát triển phần mềm nguồn mở 1.1.2 Lợi ích Mã nguồn mở 1.1.3 Ứng dụng mã nguồn mở : 1.2 Lịch sử hình thành phát triển WordPress 1.2.1 Giới thiệu định nghĩa WordPress 1.2.2 Ứng dụng WordPress 1.2.3 Ưu điểm nhược điểm WordPress 1.2.5 Các cập nhật WordPress 1.3 Lịch sử hình thành XAMPP 10 1.3.1 Giới thiệu XAMPP 11 1.3.2 Ứng dụng XAMPP 12 1.3.3 Ưu điểm Nhược điểm XAMPP 12 1.3.4 Cài đặt XAMPP 13 1.3.5 Dowload cài đặt WordPress 17 1.4 Plugin WordPress ? 24 1.4.1 Cách cài plugin WordPress 25 1.4.2 Một số WordPress plugin cần có cho website 27 CHƯƠNG II GIỚI THIỆU, PHÂN TÍCH HỆ THỐNG CỦA WEBSITE 35 2.1 Giới thiệu dự án, website bán hàng 35 2.2 Những đối tượng nhắm đến 36 2.3 Phân tích tổng quan website bán hàng 36 CHƯƠNG III THIẾT KẾ WEBSITE BÁN HÀNG TRÊN WORDPRESS 38 3.1 Sử dụng Elementor để tùy chỉnh 38 3.2 Sử dụng Customize để tùy chỉnh 38 3.3 Thêm, sửa, xóa sản phẩm Website 39 3.3.1 Thêm sản phẩm 41 3.3.2 Sửa sản phẩm 43 3.3.3 Xóa sản phẩm 43 3.4 Các chức có Website 44 3.4.1 Chức trang Menu 44 3.5 Thành viên cho website phân quyền 53 3.5.1 Phân quyền thành viên website WordPress 54 3.5.2 Sửa, xóa thành viên website 55 KẾT LUẬN 56 DANH MỤC HÌNH ẢNH Hình 1.1 : Trang website XAMPP 14 Hình 1.2 : Dowload XAMPP 14 Hình 1.3 : Setup Xampp 15 Hình 1.4 : Chọn Components 15 Hình 1.5 : Chọn ngơn ngữ 16 Hình 1.6 : Đã cài xong XAMPP 16 Hình 1.7 : Bật lên sử dụng 17 Hình 1.8 : Dowload WordPress 18 Hình 1.9 : Bên thư mục tải WordPress 18 Hình 1.10 : Tạo thư mục 19 Hình 1.11 Tạo Database 20 Hình 1.12 : Tạo CSDL 20 Hình 1.13 : Cài WordPress 21 Hình 1.14 : Điền thơng tin vào để cài đặt 22 Hình 1.15 : Bắt đầu cài đặt 22 Hình 1.16 : Bắt đầu cài đặt 23 Hình 1.17 : Cài đặt thành công 23 Hình 1.18 : Đăng nhập vào WordPress 24 Hình 1.19 : Cài plugin 26 Hình 1.20 : Tìm kiếm plugin 26 Hình 1.21 : Cài đặt plugin 27 Hình 1.22 : Kích hoạt plugin 27 Hình 1.23 : Trang Elementor 29 Hình 1.24 : Trang chủ WooCommerce 30 Hình 1.25 : Trang chủ Starter Templates 31 Hình 1.26 : chọn Page Buider 32 Hình 1.27 : Chọn trang Starter Templates 32 Hình 1.28 : Chọn bỏ qua tiếp tục 33 Hình 1.29 : Chọn để chỉnh sửa trang 33 Hình 1.30 : Đã xong bắt đầu vào chỉnh sửa 34 Hình 1.31 : Chọn sửa chữa 34 Hình 1.32 : Sửa chữa trang Elementor 35 Hình 3.1 : Chỉnh sửa trang Elementor 39 Hình 3.2 : Chỉnh sửa trang Customize 40 Hình 3.3 : Vào trang sản phẩm 41 Hình 3.4 : Trang sản phẩm trang web 42 Hình 3.5 : Thêm sản phẩm cho website 42 Hình 3.6 : Chọn hình ảnh cho sản phẩm 43 Hình : Ấn cập nhật để thêm sản phẩm 43 Hình 3.8 : Sửa sản phẩm trang website 44 Hình 3.9 : Xóa sản phẩm website 45 Hình 3.10 : Menu website 45 Hình 3.11 : Logo website 46 Hình 12 : Trang chủ website 47 Hình 3.13 : Trang shop website 48 Hình 3.14 : Trang liên hệ 49 Hình 3.15 : Câu hỏi thường gặp 49 Hình 3.16 : Trang About Us website 51 Hình 3.17 : Giỏ hàng website 52 Hình 3.18 : Xem giỏ hàng website 53 Hình 3.19 : Tiến hành tốn 53 Hình 3.20 : Người dùng đăng nhập thành công 54 Hình 3.21 : Thêm thành viên cho website 55 Hình 3.22 : Phân quyền cho thành viên 56 Hình 3.23 : Người dùng website 56 DANH MỤC TỪ VIẾT TẮT Từ viết tắt Tên đầy đủ Ý nghĩa F/OSS,FOSS Free and Open - Source Software Phần mềm tự Phần mềm mã nguồn mở Giấy phép phần mềm tự phổ biến Hệ quản trị đào tạo học tập Phần mềm quản lý, sáng tạo, chỉnh sửa nội dung số Phần mềm tạo lập giao diện người dùng GNU GPL LMS CMS MVC GNU General Public License Learning Management System Content Management System Model-View-Controller Shop : click vào phần danh mục sản phẩm có website lên Hình 3.13 : Trang shop website Tìm kiếm sản phẩm : Chúng ta tìm kiếm sản phẩm theo tên Tìm kiếm theo giá tiền : Có thể tùy chỉnh giá tiền lên xuống hiển thị kết giá tiền Tìm kiếm theo thứ tự : tìm sản phẩm sản phẩm đánh giá cao, sản phẩm phổ biến, sản phẩm nhất, Danh mục sản phẩm : Khi click vào phần danh mục sản phẩm : Rau củ, thực phẩm, hoa sản phẩm có danh mục Sản phẩm sale : sản phẩm sale đề xuất lên bên trái trang Shop đầu sản phẩm khuyến chữ sale Liên hệ : Trang hiển thị địa cửa hàng, số điện thoại liên hệ, Email chủ cửa hàng 48 Hình 3.14 : Trang liên hệ Câu hỏi thường gặp : phần hiển thị trang liên hệ, hiển thị câu hỏi mà khách hàng thắc mắc giải đáp thắc mắc cho khách hàng Hình 3.15 : Câu hỏi thường gặp About Us : Về chúng tơi hiển thị thành tích mà cừa hàng đạt số lượng người tiêu dùng số lượng đánh giá sản phẩm có, giấy chứng nhận lời khen từ danh nhân thành đạt 49 50 Hình 3.16 : Trang About Us website Giỏ hàng : Sản phẩm mà người dùng mua hiển thị giỏ hàng, khách hàng có tốn người dùng bỏ sản phẩm cách ấn dấu “X”, 51 Hình 3.17 : Giỏ hàng website Xem giỏ hàng : Khi người dùng click vào phần xem giỏ hàng chuyển đến trang thống kê số tiền, sau chốt sản phẩm cần mua tiến hành tốn 52 Hình 3.18 : Xem giỏ hàng website Tiến hành toán : Trang tiến hành toán website có : Hình 3.19 : Tiến hành tốn 53 phần thơng tin “Bắt buộc” khơng có thơng tin tên, địa chỉ, số điện thoại báo lỗi khơng thể đặt hàng, hiển thị dơn hàng bạn có đồ số tiền đơn hàng bạn đặt Người dùng đăng nhập : Khi người dùng cần đăng nhập để đặt hàng click vào biểu tượng Avatar góc phải website Hình 3.20 : Người dùng đăng nhập thành công Khi người dùng đăng nhập thành công lên đăng nhập thành công thông tin đơn hàng, địa chỉ, thông tin người dùng, 3.5 Thành viên cho website phân quyền Thành viên (hay gọi người dùng, tiếng Anh gọi User) website người có quyền hạn định website Thành viên bao gồm có bạn – người chủ sở hữu, thành viên khác nhân viên bạn, khách hàng bạn,… Thêm thành viên việc làm mà bạn, người chủ sở hữu website, cần phải biết để quản trị trang web cách hiệu Khi thêm thành viên mới, bạn phân quyền Vai trị (Role) để thành viên có quyền hạn làm cơng việc website 54 Hình 3.21 : Thêm thành viên cho website 3.5.1 Phân quyền thành viên website WordPress Các thành viên mặc định website WordPress vai trò thành viên sau: Quản lý : Đây quyền lớn website wordpress bạn: tồn quyền kiểm sốt website Biên tập viên : Đây quyền quản lý xuất tất viết website, bao gồm viết thân, người dùng khác quản lý Tác giả : Quyền quản lý xuất viết họ Cộng tác viên : Quyền giúp quản lý viết họ khơng có khả xuất Thành viên đăng ký : Chỉ cho phép chỉnh sửa trang thơng tin nhân họ 55 Ngồi cịn số nhóm người dùng khác như: SEO Editor, SEO Manager, Quản lý cửa hàng, Khách Hàng, Hình 3.22 : Phân quyền cho thành viên 3.5.2 Sửa, xóa thành viên website Sửa xóa thành viên WordPress vô đơn giản, Để chỉnh sửa thông tin thành viên, giao diện quản trị website, bạn vào mục Thành viên → Tất người dùng → Chọn tên Thành viên chọn Chỉnh sửa xóa người dùng sau ấn cập nhật Hình 3.23 : Người dùng website 56 KẾT LUẬN Những thuận lợi thực khóa luận tốt nghiệp : Dễ sử dụng: WordPress có giao diện người dùng thân thiện dễ sử dụng Người dùng khơng cần có kiến thức lập trình phức tạp để xây dựng quản lý trang web WordPress Hàng ngàn giao diện plugin: WordPress cung cấp cửa hàng giao diện plugin phong phú, cho phép bạn tùy chỉnh mở rộng chức trang web theo ý muốn Tích hợp tương thích: WordPress có khả tích hợp tốt với nhiều dịch vụ ứng dụng bên ngồi Google Analytics, cơng cụ tìm kiếm, tích hợp mạng xã hội nhiều Cộng đồng lớn hỗ trợ: WordPress có cộng đồng lớn với người dùng nhà phát triển toàn giới Bạn tìm kiếm hỗ trợ, tài liệu giải pháp cho vấn đề liên quan đến WordPress cách dễ dàng Tính linh hoạt mở rộng: WordPress cho phép bạn tùy chỉnh mở rộng trang web theo nhu cầu cụ thể bạn Bạn thay đổi giao diện, thêm tính mở rộng trang web theo mong muốn Những khó khăn thực khóa luận tốt nghiệp : Khi thực khóa luận tốt nghiệp em có khó khăn mắc phải sau : Bảo mật: Một điểm yếu WordPress vấn đề bảo mật Vì tảng WordPress phổ biến, trở thành mục tiêu công lỗ hổng bảo mật Việc trì cập nhật bảo mật thường xuyên quan trọng 57 Tính tương thích: Một số plugin giao diện khơng tương thích với nhau, gây xung đột làm ảnh hưởng đến hiệu suất trang web Việc kiểm tra đảm bảo tính tương thích cần thiết Hiệu suất tốc độ tải trang: Một số plugin giao diện làm giảm hiệu suất tốc độ tải trang trang web Cần tối ưu hóa quản lý tải trang để đảm bảo trải nghiệm người dùng tốt Giới hạn tính năng: Một số tính đặc biệt u cầu tùy chỉnh phức tạp sử dụng mã nguồn mở rộng Trong số trường hợp, việc thực tính đặc biệt gặp khó khăn WordPress so với việc phát triển trang web từ đầu Kết luận Trong khóa luận này, em thực nghiên cứu triển khai trang web bán hàng sử dụng tảng WordPress Mục tiêu dự án xây dựng giao diện trực tuyến thuận tiện hiệu để bán sản phẩm dịch vụ doanh nghiệp Em chọn WordPress làm tảng cho dự án tính linh hoạt dễ sử dụng Giao diện người dùng thân thiện khả tùy chỉnh cao giúp em xây dựng trang web bán hàng với thiết kế đẹp mắt dễ dàng điều hướng Trong trình triển khai, em sử dụng plugin hỗ trợ để tăng cường tính trang web Em tích hợp plugin giỏ hàng, tốn trực tuyến quản lý đơn hàng để tối ưu quy trình mua hàng cho người dùng Bên cạnh đó, plugin SEO tối ưu hóa tốc độ giúp cải thiện hiệu suất định vị trang web tốt cơng cụ tìm kiếm Trang web bán hàng em tích hợp tính hữu ích tìm kiếm sản phẩm, danh mục sản phẩm lọc để người dùng dễ dàng tìm kiếm lựa chọn sản phẩm theo nhu cầu Giao diện đáp ứng tương thích với thiết bị di động cung cấp trải nghiệm người dùng tốt tảng 58 Em tập trung vào việc tối ưu hóa trang web để giảm thời gian tải trang tăng tốc độ truy cập Điều giúp cải thiện trải nghiệm người dùng giữ cho khách hàng quay lại trang web cách thường xuyên Tuy nhiên, trình triển khai, em đối mặt với số thách thức Việc tùy chỉnh giao diện tích hợp plugin gặp khó khăn đơi gây xung đột tối ưu hóa khơng hiệu Để giải vấn đề này, phải tìm hiểu thử nghiệm nhiều giải pháp để đạt kết tốt Tổng kết lại, qua dự án này, em thành công việc xây dựng trang web bán hàng sử dụng WordPress Trang web em đáp ứng yêu cầu doanh nghiệp mang lại trải nghiệm mua sắm thuận tiện cho người dùng Việc sử dụng plugin hỗ trợ tối ưu hóa trang web giúp em nâng cao hiệu suất định vị trang web thị trường 59 NHẬN XÉT ( Của giáo viên hướng dẫn ) , ngày tháng năm 60 XÁC NHẬN NHẬN XÉT ( Của giáo viên phản biện ) , ngày tháng năm 61 XÁC NHẬN 62