Xây dựng ứng dụng thương mại điện tử bằng wordpress và woocommerce

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC TRƯỜNG ĐẠI HỌC VINH KHOA CÔNG NGHỆ THÔNG TIN PHÙNG CANH THÀNH BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Tên đồ án: Xây dựng ứng dụng thương mại điện tử Wordpress Woocommerce Nghệ An, tháng 01 năm 2016 Phùng Canh Thành – 52K1 - CNTT ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC TRƯỜNG ĐẠI HỌC VINH KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Tên đồ án: Xây dựng ứng dụng thương mại điện tử Wordpress Woocommerce Sinh viên thực : Phùng Canh thành Mã sinh viên : 1151070361 Lớp : 52K1-CNTT Giáo viên hướng dẫn: TS Trần Văn Cảnh Nghệ An, tháng 01 năm 2016 Phùng Canh Thành – 52K1 - CNTT ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC MỤC LỤC CHƢƠNG GIỚI THIỆU CHUNG 1.1 Đặt vấn đề toán .1 1.2 Giới thiệu Wordpress .2 1.2.1 Ưu điểm Wordpress 1.2.2 Khai thác mã nguồn Wordpress .3 1.3 Cách cài đặt Wordpress 1.4 Tìm hiểu Woocomerce 1.4.1 Giới thiệu chung .8 1.4.2 Các tính có Woocommerce 1.5 Cấu trúc CSDL Wordpress 1.5.1 Ý nghĩa bảng mysql sau 10 CHƢƠNG 2.THIẾT KẾ THEME TRÊN WORDPRESS 11 2.1 Xây dựng cấu trúc Theme 11 2.1.1 Cấu trúc Theme Wordpress 11 2.2 Viết Code cho File Functions.php .16 2.2.1 Thiết lập liệu quan trọng 16 2.2.2 Hàm thiết lập chức Theme 16 2.3 Viết Code cho Header Footer .19 2.3.1 Viết code cho file header.php 19 2.3.2 Viết code cho file footer.php 22 2.4 Viết Code cho File index.php 24 2.5 Viết Code cho File Content .27 2.5.1 Code cho class entry-thumbnail 27 2.5.2 Code cho entry-header 28 2.6 Viết Code cho Post Format .31 2.6.1 Viết code cho Format content-image.php 32 2.6.2 Viết code cho Format video 33 2.6.3 Viết code cho Format “link” 34 2.7 Viết Code cho File Single.php Page.php 36 Phùng Canh Thành – 52K1 - CNTT ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC 2.8 Viết Code cho trang lưu trữ, trang tìm kiếm 404 38 CHƯƠNG THIẾT KẾ MODULE BÁN HÀNG BẰNG WOOCOMMERCE 41 3.1 Các bước cài đặt Woocommerce .41 3.2 Các tùy chọn Woocommerce 45 3.2.1 Sản phẩm, chuyên mục sản phẩm trang 45 3.2.2 Tùy Chỉnh Woocommerce .49 3.2.3 Đơn Hàng .50 3.2.4 Các ưu đãi .51 3.2.5 Báo cáo 51 3.2.6 Tình trạng hệ thống 52 3.2.7 Tiện ích 53 3.3 Viết Code cho Plugin Woocommerce .53 3.3.1 Code cho trang sản phẩm .54 3.3.2 Code cho trang single-product .57 3.3.3 Code trang mua hàng 60 3.3.4 Code trang toán 64 3.3.5 Trang chủ 65 CHƢƠNG ĐÁNH GIÁ VÀ KẾT LUẬN 66 4.1 Kết thu .66 4.2 Hướng phát triển đề tài 66 KẾT LUẬN 67 TÀI LIỆU THAM KHẢO 68 Phùng Canh Thành – 52K1 - CNTT ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC LỜI CẢM ƠN Để hoàn thành đồ án này, em xin gửi lời cảm ơn sâu sắc tới thầy, cô giáo Khoa Công Nghệ Thông Tin - Trƣờng Đại học Vinh trực tiếp giảng dạy cung cấp cho em kiến thức quý báu để em tiếp cận tìm hiểu cơng nghệ lĩnh vực Đặc biệt em xin chân thành cảm ơn thầy giáo Trần Văn Cảnh – Giảng viên Khoa Cơng Nghệ Thơng Tin tận tình hướng dẫn em tạo điều kiện tài liệu kiến thức để em hồn thành đồ án Em mong đón nhận đánh giá, bổ sung lời bảo thầy giúp em tiếp tục nghiên cứu kĩ lĩnh vực Em xin chân thành cảm ơn! Vinh, tháng ngày 22/12/2015 Sinh viên Phùng Canh Thành Phùng Canh Thành – 52K1 - CNTT ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƢƠNG GIỚI THIỆU CHUNG 1.1 Đặt vấn đề toán Xu hướng kinh doanh qua mạng áp dụng phổ biến phạm vi tồn cầu có ưu điểm vượt trội so với phương thức kinh doanh truyền thống Ví dụ, việc tổ chức bán hàng qua mạng tiết kiệm chi phí thuê mặt không hạn chế khoảng cách địa lý, dù khách hàng đâu mua sắm Khách hàng chủ động thời gian mua sắm kinh doanh qua mạng khơng giới hạn thời gian Có thể liệt kê số ưu điểm khách hàng mua sắm trực tuyến sau: - Linh hoạt mua sắm: Vì cửa hàng trực tuyến nên khơng có ngày nghỉ, đóng cửa hay vấn đề khác Khách hàng chủ động thời điểm mua sắm Không phụ thuộc vào mở cửa trung tâm mua sắm - Tiết kiệm thời gian: Khách hàng không cần phải đến tận nơi mua hàng, mua hàng online, khách hàng cần ngồi nhà vào mạng để mua hàng, mua xong nhân viên nhanh chóng giao hàng cho khách hàng tận nơi - Dễ dàng so sánh giả chất lượng sản phẩm: Khi đến tận nơi mua hàng, khách hàng phải đến nơi để xem, so sánh biết giá Với mua hàng trực tuyến, để biết xác đồ cần mua, khách hàng tìm số website diễn đàn, khách hàng dễ dàng nắm mức giá tốt cho đồ cần mua tiện lợi - Tránh phiền phức: Khi mua hàng trực tiếp khách hàng phải đến tận nơi gặp phải cảnh kẹt xe, khói bụi, nắng nóng, cảnh chen lấn xếp hàng dài vào cao điểm để toán hay mua sắm Với mua hàng trực tiếp, khách hàng thoát khỏi cảnh phiền phức Ở nước, có nhiều đơn vị kinh doanh doanh nghiệp thành công việc tổ chức kinh doanh, bán hàng qua mạng Một yếu tố ảnh hưởng đến việc thành công kinh doanh mạng hệ thống phần mềm hỗ trợ, có module bán hàng hay cịn gọi module hỗ trợ online shopping Đây module cho phép người bán hàng tổ chức giới thiệu sản phẩm kèm theo thông tin Phùng Canh Thành – 52K1 - CNTT ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC tiết sản phẩm, mua hàng mà đến tận cửa hàng Thay khách hàng phải đến tận nơi để mua hàng mua hàng online khách hàng cần ngồi nhà lên mạng tìm hàng cần để mua sau dịch vu giao hàng giao hàng tận nơi cho khách hàng Có nhiều giải pháp để xây dựng module bán hàng, ví dụ tự phát triển, sử dụng giải pháp từ gói mã nguồn mở Vì tính chất quan trọng module này, phạm vi đồ án lựa chọn tốn tìm hiểu phát triển module bán hàng mạng giải pháp sử dụng kết hợp hai sản phẩm WordPress Woocomerce 1.2 Giới thiệu Wordpress WordPress phần mềm mã nguồn mở để hỗ trợ tạo blog cá nhân WordPress viết ngơn ngữ lập trình PHP sử dụng hệ quản trị cở sở liệu MYSQL Wordpress thức cơng bố vào ngày 27/8/2003 tác giả Matt Mullenweg Mie Little Hiện WordPress sở hữu phát triển cơng ty Automattic có trụ sở San Francisco, California thuộc hợp chủng quốc Hoa Kỳ WordPress nhiều người ủng hộ biết đến dễ sử dụng có nhiều tính hữu ích Qua thời gian, số lượng người sử dụng số lương lập trình viên phát triển WordPress tăng lên Từ Wordpress có thêm nhiều tính Đến nay, WordPress hệ quản trị nội dung (CMS – Content Management System) vượt trội để hỗ trợ người dùng tạo nhiều loại website blog, website tin tức, giới thiệu doanh nghiệp, thương mại điện tử WordPress tạo website đặt phịng khách sạn, đăng dự án bấn động sản, Hầu website vừa nhỏ triển khai tảng WordPress 1.2.1 Ƣu điểm Wordpress Dễ sử dụng: Wordpress phát triển nhằm phục vụ đối tượng người dùng phổ thơng, khơng có nhiều kiến thức lập trình Các thao tác đơn giản, giao diện trực quan nắm rõ cấu trúc quản lý website wordpress thời gian ngắn Về cách cài đặt, tự cài đặt web WordPress máy chủ riêng vận hành qua thời gian ngắn Phùng Canh Thành – 52K1 - CNTT ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Cộng đồng hỗ trợ đông đảo: Là phần mềm mã nguồn mở CMS phổ biến giới, có khó khăn cộng đồng người sử dụng wordpress hỗ trợ khó khăn gặp phải q trình sử dụng Nếu có khả Tiếng Anh tốt, dễ dàng tìm câu trả lời cho vấn để gặp phải Google Nhiều gói giao diện có sẵn (được gọi Theme): Hiện wordpress có nhiều Theme miễn phí khác để thay đổi giao diện website mà khơng cần quan tâm việc để thiết kế Theme Còn muốn website đẹp chun nghiệp mua Theme trả phí Nhiều plugin hỗ trợ: Plugin nghĩa trình cắm thêm vào website để bổ sung chức cần thiết cho website Ví dụ mặc định sau cài website lên, khơng có chức thị viết liên quan viết, với nhiều plugin miễn phí hỗ trợ dễ dàng cài thêm plugin miễn phí để website có chức Tương tự với Theme Cũng có nhiều plugin trả phí mang tính độc đáo có ích vào website Dễ phát triển cho lập trình viên: Nếu có am hiểu việc làm website HTML, CSS, PHP dễ dàng mở rộng website với nhiều tính vơ có ích Cách phải triển cụng đơn giản WordPress phần mềm mã nguồn mở mà dễ dàng hiểu cách hoạt động phải triển thêm tính Có thể làm nhiều loại website: Dùng Wordpress khơng có nghĩa làm blog cá nhân, mà biến website thành trang bán hàng, website giới thiệu cơng ty, tờ tạp chí online việc sử dụng kết hợp Theme plugin với Wordpress dành cho người lập trình người lập trình chuyên nghiệp: Nếu người khơng biết lập trình dùng WordPress cách sử dụng tính có sẵn, thư viện giao diện phong phú plugin hỗ trợ đủ để làm website 1.2.2 Khai thác mã nguồn Wordpress Có thể download phiên Wordpress địa https://wordpress.org/download/ hình 1.1 Phùng Canh Thành – 52K1 - CNTT ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Hình 1.1 Trang để tải Wordpress Chú ý tệp download dạng nén ZIP, cần phải giải nén để làm việc với mã nguồn Theo chế độ mặc định, Wordpress giải nén thư mục có tên wordpress Có thể thư mục Wordpress đặt thư mục khác tên wordpress-x (x số phiên bản), có thư mục có tên “wordpress” Hình 1.2 Hình 1.2 Thư mục sau giải nén mã nguồn 1.3 Cách cài đặt Wordpress Một số phần mềm làm Webserver sử dụng để làm host chứa Wordpress Wamp server, Xampp, Apache,… Trong đồ án này, chọn Xampp làm Webserver Ưu điểm Xampp thuê host, tạo Sever local để làm website, cập nhật phiên nhanh đặc biệt Xampp có tích hợp hệ quản trị CSDL MySQL dùng Wordpress Sau cài đặt thành công Xampp, cần tạo CSDL MySQL cho Wordpress Các bước cài đặt chi tiết sau: Phùng Canh Thành – 52K1 - CNTT ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Xem thƣ mục mã nguồn Trong thư mục mã nguồn wordpress (hình 1.3) có số thư mục tệp cần quan tâm như: wp-admin, wp-includes, wp-content, index.php, wp-configsanple.php, Tất tập tin thư mục gọi mã nguồn Wordpress hình 1.3 Hình 1.3 Thư mục mã nguồn Đƣa mã nguồn Wordpress vào localhost Copy toàn file thư mục wordpress vào localhost webserver (Ví dụ C:\Xampp\htdocs\wordpress) Chỉ copy file thư mục mã nguồn, không copy thư mục wordpress Và vậy, URL localhost webside là: http://localhost/wordpress Tạo database Wordpress sử dụng MySQL làm hệ quản trị sở liệu Trước cài đặt wordpress cần tạo CSDL cho Để tạo CSDL cần truy cập vào đường dẫn http://localhost/phpmyadmin/ tạo database hình 1.4 Phùng Canh Thành – 52K1 - CNTT ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Trước tiên, copy thư mục template Woocomerce thư mục plugin vào thư mục Theme đổi tên template thành woocomerce hình đây: Copy thư mục templates từ plugin sang theme đổi tên thành woocommerce Lý phải copy template vào thư mục Theme sửa template thư mục plugin cập nhật plugin tùy chỉnh bị phải copy vào thư mục Theme để cập nhật plugin tùy chỉnh khơng bị Muốn tùy chỉnh plugin phải tắt css có sẵn Woocomerce để dễ dàng css cho thành phần, viết vào file functions đây: add_filter( 'woocommerce_enqueue_styles', ' return_empty_array' ); 3.3.1 Code cho trang sản phẩm Trang để hiển thị tất sản phẩm có cửa hàng Trang hiển thị sản phẩm trang archive-product.php thư mục woocomerce vừa tạo Gọi header footer cho trang sản phẩm Sau thêm hàm if để kiểm tra xem có sản phẩm chưa Nếu có cho hiển sản phẩm sidebar Phùng Canh Thành – 52K1 - CNTT 54 ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Chia cột để hiển thị sản phẩm sidebar, sử dụng bootstrap chia thành 12 phần Sản phẩm chiếm phần sidebar chiếm phần: //phần để gọi sidebar //phần để gọi sản phẩm Để gọi sidebar ta sử dụng hook: Trên sản phẩm hiển thị tổng cộng sản phẩm kiểu xếp sản phẩm: Để hiển thị sản phẩm ta sử dụng vòng lặp để lấy tất sản phẩm hàm kiểm tra có sản phẩm chưa Và gọi trang content-product.php với hàm để hiển thị sản phẩm: Cuối hàm để thị phân trang Nếu khơng có sản phẩm hiển thị trang no-products-found.php với hàm: Code cho sản phẩm trang content-product.php: Chia thành 12 cột sản phẩm chiếm cột: Sau thêm lớp để hiển thị ảnh đại diện cho sản phẩm Trong thêm hàm để hiển thị thêm lớp để hiển thị xem nhanh Hiển thị ảnh cho sản phẩm