Bài tập thực hành thương mạng điện tử xây dựng website bằng wordpress

TRƯỜNG ĐẠI HỌC CƠNG NGHIỆP TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THÔNG TIN  BÀI TẬP THỰC HÀNH Xây dựng website wordpress TÀI LIỆU LƯU HÀNH NỘI BỘ’ NĂM 2020 NỘI DUNG Tuần Cài đặt Wordpress Tuần Một số tính wordpress 11 Tuần Backup Restored 22 Tuần Tạo trang chủ MENU 27 Tuần Tạo viết 30 Tuần Quản lý sản phẩm 34 Tuần Quản lý đơn hàng 38 Tuần Việt hóa – chỉnh css website 43 Tuần Layout website 46 Tuần 10 Báo cáo tập thực hành 49 TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ TUẦN CÀI ĐẶT WORDPRESS 1.1 Cài đặt local 1.1.1 Cài đặt mơi trường chạy wordpress máy tính Cài đặt Wampp (hoặc xampp) Sau cài đặt xong, vào file httpd.conf đổi cổng kết nối sang cổng khác cổng 80 (gợi ý đổi thành 8080) 02 vị trí sau: KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ Sau cài đặt xong, khởi động môi trường Bật ứng dụng Apache MySql Xem trang web localhost theo đường dẫn: http://localhost:8080 KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ 1.1.2 Cài đặt wordpress Tải wordpress phiên Giải nén vào thư mục C:\xampp\htdocs (hoặc wampp\www), đặt tên website Tạo CSLD cho website, đặt tên tương ứng (dễ nhớ); Có thể tạo tài khoản quản trị CSDL, sau phân quyền cho tài khoản tạo quyền quản lý CSDL Mở trình duyệt, gõ vào đường dẫn http://localhost:8080/mrq (mrq = tên thư mục đặt lúc giải nén wordpress tương ứng) KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ Chọn ngôn ngữ cho wordpress (Tiếng Anh Tiếng Việt) KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ Khai báo thông tin sau: Chú ý: database tên database tạo bước trên; localhost, User Name database mặc định root, mật mặc định để trống (hoặc dùng tên user mật tạo bước trên) Database Host localhost Table Prefix nghĩa tiền tố database chứa liệu WordPress, mặc định wp_, đổi thành phải bắt buộc có _ đằng sau Khai báo thông tin tên website, tên người dùng mật KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ Giao diện trang web vừa cài đặt xong wordpress Giao diện admin dùng để quản trị web KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ 1.2 Triển khai wordpress hosting 1.2.1 Đăng ký hosting – domain Truy cập vào https://www.hostinger.vn/free-hosting để đăng ký hosting free; Nhập thông tin theo yêu cầu Kiểm tra mail để xác nhận việc đăng ký hosting KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ Xác nhận email thành công Chọn mục đích sử dụng website Chọn kinh nghiệm thiết kế web thân KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ 6.2 Thêm nhiều model cho 01 sản phẩm Bước 01: Thêm sản phẩm (Tên sản phẩm, mô tả, categories…) Bước 02: Thêm thuộc tính (attribute) cho sản phẩm Bước 03: Chọn liệu sản phẩm (Product data) Variable product Bước 04: Thêm biến (varible) cho sản phẩm Bước 05: Thêm liệu cần thiết cho sản phẩm (hình ảnh, đơn giá…) KHOA CƠNG NGHỆ THƠNG TIN 36 BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ 6.3 Bố cục trang hiển thị product categories Truy cập vào trang hiển thị product categories theo đường dẫn: Flatsome >> Theme Options >> Shop (WooCommerce) >> Product Catalog Chỉnh bố cục trang product catalog: Điều chỉnh bố cục trang product catalog Điều chỉnh số lượng product hiển thị Điều chỉnh bố cục hiển thị nội dung 6.4 Thực hành Nhập sản phẩm website Chỉnh layout trang product catalog, trang product KHOA CÔNG NGHỆ THÔNG TIN 37 BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ TUẦN QUẢN LÝ ĐƠN HÀNG 7.1 Cấu hình WooCommerce 7.1.1 Cài đặt bổ sung page bị thiếu WooCommerce - Kiểm tra tồn page mặc định WooCommerce o Cách 1: Vào Pages >> All pages, kiểm tra xem page mặc định (Cart, Checkout,…) cài đặt có tồn khơng o Cách 2: Vào WooCommerce >> Status >> System status >> WooCommerce pages - Bổ sung page bị thiếu Vào WooCommerce >> Status >> Tools >> Create default WooCommerce pages >> Create pages 7.1.2 Thiết lập thông số cần thiết Vào WooCommerce >> Settings >> General để thiết lập thông số cần thiết như: - Địa chỉ, Thành phố, Postcode / Zip (Tp.HCM 700000) - Thiết lập khu vực mua bán, giao hàng KHOA CÔNG NGHỆ THÔNG TIN 38 BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM - BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ Thiết lập đơn vị tiền tệ 7.2 Thiết lập toán online Vào WooCommerce >> Settings >> Payments để thiết lập tốn online 7.2.1 Thanh tốn trực tiếp KHOA CƠNG NGHỆ THÔNG TIN 39 BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ 7.2.2 Thanh tốn thơng qua chuyển khoản 7.3 Tạo đơn hàng thực toán Bước 1: Chọn sản phẩm muốn mua, click Add to cart (Thêm vào giỏ hàng) để chọn mua sản phẩm KHOA CÔNG NGHỆ THÔNG TIN 40 BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ Bước 2: Xem thông tin giỏ hàng Bước 3: Kiểm tra giỏ hàng Bước 4: Nhập thơng tin người nhận hàng, chọn phương thức tốn KHOA CÔNG NGHỆ THÔNG TIN 41 BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ Hiển thị thông báo đặt hàng thành công 7.4 Quản lý đơn hàng Kiểm tra đơn hàng đặt: WooCommerce >> Orders Hiển thị danh sách đơn hàng đặt: Thông tin chi tiết đơn hàng (1) Chuyển trạng thái đơn hàng (2) Hành động thực với đơn hàng 7.5 Thực hành Thực cài đặt, thiết lập thơng số WooCommerce Tìm hiểu cách tốn khác 02 cách trình bày Tiến hành đặt hàng quản lý đơn hàng đặt KHOA CÔNG NGHỆ THÔNG TIN 42 BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ TUẦN VIỆT HĨA – CHỈNH CSS WEBSITE 8.1 Việt hóa website Bước 1: Cài đặt active plugin LOCO TRANSLATE Bước 2: Thiết lập ngôn ngữ Tiếng Việt cho website Vào Settings >> General: - Site Language: Chọn tiếng Việt - Time zone : UTC +7 - Date Format: d/m/Y - Time Format: g:i A Bước 3: Tiến hành Việt hóa website Vào Loco Translate >> Theme >> Tên Theme (ở Flatsome) KHOA CÔNG NGHỆ THÔNG TIN 43 BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ Chọn New language Sau chọn Tiếng Việt Bước 4: Dịch bổ sung từ bị khuyết 8.2 Chỉnh CSS website Bước 1: Cài đặt kích hoạt plugin Yellow-Pencil Bước 2: Vào trang muốn chỉnh sửa CSS, chọn Edit With Yellow Pencil Bước 3: Chọn Global Customize để chỉnh CSS cho tất trang Bước 4: Tùy chỉnh CSS theo ý thích Nhấn Save sau chỉnh xong KHOA CƠNG NGHỆ THÔNG TIN 44 BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ Bước 5: Chọn phần CSS Editor để copy định dạng vừa chỉnh Bước 6: Vào Themes Option >> Additional CSS, dán đoạn code vừa copy vào Bước 7: Vào Plugin, thực Deactive plugin Yellow-Pencil Sau quay website để kiểm tra chỉnh sửa Lưu ý: Chỉnh plugin deactive hết css chỉnh, nên phải thực việc copy CSS chỉnh (ở bước 6) 8.3 Thực hành Tiến hành Việt hóa website Chỉnh CSS phần cần thiết website để đạt giao diện mong muốn KHOA CÔNG NGHỆ THÔNG TIN 45 BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ TUẦN LAYOUT WEBSITE 9.1 Bố trí trang chủ website Vào Pages >> All pages >> Trang chủ >> Edit with UX Builder Có thể thêm nhiều thành phần vào trang chủ cách thêm thủ cơng (add element) thêm từ template có sẵn 9.1.1 Thêm slider (thủ công) Chọn Add Element >> Slider >> Add image Thêm tất hình vào slider KHOA CÔNG NGHỆ THÔNG TIN 46 BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ 9.1.2 Thêm category (template) Chọn mẫu template muốn sử dụng, click import Thay đổi hình ảnh hiển thị Giao diện website hiển thị sau KHOA CÔNG NGHỆ THÔNG TIN 47 BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ 9.2 Thông tin liên hệ - Tạo trang liên hệ với thông tin website địa chỉ, số điện thoại liên lạc, email… - Tạo trang tiêu chuẩn giao nhận hàng - Tạo thêm thông tin liên lạc cách sử dụng plugin website hỗ trợ thực gọi (Hotline Phone Ring), chat with me (tawk.to), zalo (Social Plugins Zalo) 9.3 Thực hành Layout website theo phong cách cá nhân Bổ sung thông tin liên hệ website KHOA CÔNG NGHỆ THÔNG TIN 48 BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM TUẦN 10 - BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ BÁO CÁO BÀI TẬP THỰC HÀNH Sinh viên sử dụng wordpress thực xây dựng website thương mại điện tử với nội dung hướng dẫn q trình thực hành Một số nội dung cần phải có cho website: Giao diện: Gắn với chủ đề chọn Có thuyết minh cho phần Sản phẩm: từ 20 sản phẩm trở lên / danh mục – Gồm hình ảnh; mơ tả; giá phân chia thành danh mục – nhóm danh mục Tin tức: tin liên quan; hướng dẫn sử dụng, Giỏ hàng + toán Liên hệ - Khuyến khích sinh viên nghiên cứu, tìm hiểu thêm nội dung phần hướng dẫn - Tiêu chí chấm điểm xem phiếu chấm (trang sau) - Nộp File thuyết minh đề tài - .PPT Đường link web KHOA CÔNG NGHỆ THÔNG TIN 49 BỘ MÔN HỆ THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP THÀNH PHỐ HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN PHIẾU CHẤM THỰC HÀNH Môn học : Nhập môn thương mại điện tử Năm học: Học kỳ: Lớp/Lớp học phần: CDCNTTxxx / 0203002714xx Họ tên sinh viên ………………….…………………; MSSV:…………………; Tiêu chí đánh giá Điểm tối đa Trang web có giao diện đẹp, quán, màu sắc hài hòa STT Điểm đạt Ghi Thiết kế (4đ) Layout trang chủ tối thiểu thành phần sau: Header (logo + banner) Menu Chỉnh sửa code (CSS) Footer 04 nội dung hiển thị khác Mỗi thành phần 0.25đ Chức (5đ) Trang tin tức 0.5 Hiển thị danh sách product theo categories 0.5 Tối thiểu 20 products/category; 0.5 Tổi thiểu 05 category 0.5 Hiển thị chi tiết sản phẩm 0.5 Có nhiều model 01 sản phẩm (size, màu, ngôn ngữ, v.v…) 0.5 10 Đặt hàng 0.5 11 Quản lý đơn đặt hàng 0.5 12 Thông tin liên hệ (gọi điện, chat with me, zalo v.v…) 01 cách liên lạc 0.5đ GV chấm điểm dựa mức độ nghiên cứu sinh viên Nghiên cứu (1đ) 13 Các chức khác sinh viên thêm vào 14 Sử dụng thêm plugin khác plugin có hướng dẫn 15 Triển khai website lên host TỔNG ĐIỂM 10 Nhận xét: Tp Hồ Chí Minh, ngày … tháng … năm …… Người đánh giá KHOA CÔNG NGHỆ THÔNG TIN 50 BỘ MÔN HỆ THỐNG THÔNG TIN ... TP.HCM TUẦN 10 - BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ BÁO CÁO BÀI TẬP THỰC HÀNH Sinh viên sử dụng wordpress thực xây dựng website thương mại điện tử với nội dung hướng dẫn trình thực hành Một số nội... css website 43 Tuần Layout website 46 Tuần 10 Báo cáo tập thực hành 49 TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ TUẦN CÀI ĐẶT WORDPRESS. .. THỐNG THÔNG TIN TRƯỜNG ĐH CÔNG NGHIỆP TP.HCM BÀI TẬP THỰC HÀNH THƯƠNG MẠI ĐIỆN TỬ Tiến hành restore website Hồn tất q trình restore 3.4 Thực hành Tiến hành backup, xóa số page, post sau restore