Thiết kế website bán tranh ảnh trên nền tảng mã nguồn mở wordpress

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: Phạm Anh Đức Lớp: 519CNT - Khóa: 12 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ĨA LUẬN TỐT NGHIỆP Thiết kế Website bán tranh, ảnh tảng mã nguồn mở WordPress Sinh viên thực hiện: Phạm Anh Đức Lớp: 519CNT Giảng viên hướng dẫn: TS Nguyễn Đăng Minh Hà Nội, năm 2023 LỜI CẢM ƠN Lời đầu tiên, cho phép em gửi lời cảm ơn chân thành đến thầy TS.Nguyễn Đăng Minh người định hướng hướng dẫn em tận tình suốt trình nghiên cứu để em hồn thành khóa luận Tiếp theo em xin chân thành cảm ơn thầy, cô Khoa Công Nghệ thông tin & Điện tử viễn thông trường Đại Học Hịa Bình hết lịng giúp đỡ em suốt thời gian năm học vừa qua Cuối xin gửi lời cảm ơn tập thể 519CNT trao đổi, động viên, khuyến khích tơi trình thực đề tài Trong trình nghiên cứu đề tài, bên cạnh cố gắng hồn thành tốt cịn có sai sót khơng thể tránh khỏi Vì vậy, em mong nhận góp ý thầy bạn để khóa luận em hồn thiện Em xin chân thành cảm ơn! Hà Nội, ngày… tháng… năm 2023 Sinh viên Phạm Anh Đức MỤC LỤC Trang LỜI CẢM ƠN MỤC LỤC DANH MỤC HÌNH ẢNH LỜI MỞ ĐẦU CHƯƠNG I: TỔNG QUAN VỀ THƯƠNG MẠI ĐIỆN TỬ VÀ WEBSITE THƯƠNG MẠI ĐIỆN TỬ 1.1.Tổng quan Thương Mại Điện tử 1.1.1 Khái niệm Thương Mại Điện tử 1.1.2 Các hình thức Thương Mại Điện tử 1.1.3 Các chức Thương Mại Điện tử 1.1.4 Lợi ích Thương Mại Điện tử 1.2 Tổng quan Website Thương Mại Điện tử 10 1.2.1 Khái niệm Website Thương Mại Điện tử 10 1.2.2 Lợi ích Website Thương Mại Điện tử 11 1.2.3 Đặc điểm Website Thương Mại Điện tử 11 CHƯƠNG II: GIỚI THIỆU VỀ MÃ NGUỒN MỞ WORDPRESS VÀ PLUGIN WOOCOMMERCE 14 2.1 Tổng quan WordPress 14 2.1.1 Lịch sử 14 2.1.2 Khái niệm 14 2.1.3 Lý nên chọn WordPress 14 2.2 Cài đặt Localhost 17 2.2.1 Cài đặt Localhost XAMPP 17 2.3 Cài đặt WordPress 20 2.4 Cài đặt Theme 25 2.5 Plugin Woocommerce 25 2.5.1 Khái niệm Woocommerce 25 2.5.2 Cài đặt Woocommerce 26 2.5.3 Thiết lập WooCommerce WordPress 26 CHƯƠNG III: ỨNG DỤNG WOOCOMMERCE VÀ CÁC PLUGIN VÀO THIẾT KẾ WEBSITE BÁN TRANH, ẢNH TRÊN NỀN TẢNG MÃ NGUỒN MỞ WORDPRESS 30 3.1 Thêm sản phẩm 30 3.1.1 Thêm tiêu đề mô tả sản phẩm 30 3.1.2 Dữ liệu sản phẩm 30 3.1.3 Danh mục sản phẩm 33 3.1.4 từ khóa sản phẩm 34 3.1.5 Ảnh sản phẩm 34 3.1.6 Album ảnh sản phẩm 35 3.2 Chức giỏ hàng toán 36 3.2.1 Chức giỏ hàng 36 3.2.2 chức toán 36 3.3 Thêm viết vào Website 37 3.3.1 Tiêu đề nội dung viết 38 3.3.2 Trạng thái hiển thị 38 3.3.3 Đường dẫn tĩnh 39 3.3.4 Ảnh đại diện 40 3.4 Một số Plugin hỗ trợ 40 3.4.1 Buy now button for WooCommerce 40 3.4.2 Chaty 41 3.4.3 Call now button 42 3.5 Giao diện Website 43 KẾT LUẬN 47 TÀI LIỆU THAM KHẢO 48 DANH MỤC HÌNH ẢNH TT Trang Hình Cài đặt XAMPP 17 Hình 2 Chọn đường dẫn cho XAMPP 18 Hình Trình hướng dẫn cài đặt XAMPP 18 Hình Hoàn thành cài đặt XAMPP 19 Hình Bảng điều khiển XAMPP 19 Hình Giải nén thư mục WordPress tải 20 Hình Các thư mục file WordPress 21 Hình Nơi tạo database 22 Hình Setup ngơn ngữ cho WordPress 23 Hình 10 Điền thông tin tài khoản password cho WordPress 23 Hình 11 Điền thông tin cho Website 24 Hình 12 Giao diện mở đầu WordPress 24 Hình 13 Plugin Woocommerce 25 Hình 14 Cách thêm Plugin 26 Hình 15 Cài đặt Plugin Woocomerce 26 Hình 16 Thiết lập Woocomerce 27 Hình 17 Cài đặt trang Woocomerce 27 Hình 18 Cài đặt vị trí cửa hàng Woocomerce 28 Hình 19 Thiết lập toán Woocomerce 29 Hình 20 Hồn thành thiết lập Woocomerce 29 Hình Thêm sản phẩm 30 Hình Tiêu đề mơ tả chi tiết sản phẩm 30 Hình 3 Khung nhập liệu sản phẩm 31 Hình Thiết lập giao hàng sản phẩm 31 Hình Các sản phẩm kết nối 32 Hình Các thuộc tính sản phẩm 32 Hình Các biến thể cửa sản phẩm 33 Hình Phần nâng cao thêm sản phẩm 33 Hình Danh mục sản phẩm 34 Hình 10 Từ khoá sản phẩm 34 Hình 11 Từ khoá sản phẩm 35 Hình 12 Album ảnh sản phẩm 35 Hình 13 Tất sản phẩm 36 Hình 14 Giỏ hàng 36 Hình 15 Trang toán 37 Hình 16 Chi tiết đơn hàng 37 Hình 17 Thêm viết 38 Hình 18 Cơng cụ hỗ trợ mục thêm viết 38 Hình 19 Trạng thái hiển thị viết 39 Hình 20 Đường dẫn tĩnh viết 39 Hình 21 Ảnh đại diện viết 40 Hình 22 Tất viết 40 Hình 23 Plugin buy now button 41 Hình 24 Chaty 42 Hình 25 Biểu tượng Call now button 42 Hình 26 Trang chủ Website bán tranh ảnh 43 Hình 27 Các hình ảnh quảng bá thương hiệu cửa hàng 43 Hình 28 Phần liên hệ booking shop 44 Hình 29 Mơ tả qua thơng tin studio thành viên nhóm 44 Hình 30 Blog nơi viết khoảnh khắc chụp ảnh nghệ thuật 45 Hình 31 Giao diện bán tranh ảnh shop 45 Hình 32 Giao diện giỏ hàng 46 Hình 33 Giao diện toán cho khách hàng 46 LỜI MỞ ĐẦU Xã hội ngày phát triển nhiều mặt, kèm theo bùng nổ mạnh mẽ công nghệ thông tin Nhu cầu người ngày nâng cao Để đáp ứng cho nhu cầu người việc mua hàng hóa thơng minh thông qua Website bán hàng Chúng ta cần đâu cần có kết nối Internet mua hàng nơi với chế độ vận chuyển chuyên nghiệp tồn quốc Để đáp ứng điều cơng nghệ Website có nhiều cách để tạo nên Website bán hàng thơng minh Trong khơng thể khơng nói đến WordPress Đây cơng cụ phổ biến giới nói chung Việt Nam nói riêng Trong WordPress có Plugin tiếng viết từ lập trình viên thực thụ từ Wootheme Woocommerce Elementor Nó phản hồi tịch cực ngành cơng nghệ Website đặc biệt Website bán hàng tính đến thời điểm Với hỗ trợ đặc biệt Plugin Woocommerce Elementor việc tạo Website bán hàng Em chọn đề tài “Thiết kế Website bán tranh, ảnh tảng mã nguồn mở WorPress” Mặc dù cố gắng nỗ lực để hoàn thành đề tài, bên cạnh khơng thể tránh khỏi thiếu sót Mong nhận phản hồi tích cực từ phía thầy bạn Xin chân thành cảm ơn! CHƯƠNG I: TỔNG QUAN VỀ THƯƠNG MẠI ĐIỆN TỬ VÀ WEBSITE THƯƠNG MẠI ĐIỆN TỬ 1.1.Tổng quan Thương Mại Điện tử 1.1.1 Khái niệm Thương Mại Điện tử Thương Mại Điện tử, hay gọi e-commerce, e-comm hay EC, mua bán sản phẩm hay dịch vụ hệ thống điện tử Internet mạng máy tính Theo Tổ chức Thương mại giới (WTO), “Thương Mại Điện tử bao gồm việc sản xuất, quảng cáo, bán hàng phân phối sản phẩm mua bán toán mạng Internet, giao nhận cách hữu hình, sản phẩm giao nhận thơng tin số hố thơng qua mạng Internet” 1.1.2 Các hình thức Thương Mại Điện tử Tổng quan Thương Mại Điện tử, có lẽ hầu hết người nghĩ hình thức mua bán hàng hóa qua mạng internet Tuy nhiên, thị trường Thương Mại Điện tử phân thành hình thức khác phụ thuộc vào đối tượng tham gia Có loại hình Thương Mại Điện tử bản: Doanh nghiệp với Doanh nghiệp (B2B), Doanh nghiệp với Khách hàng (B2C), Khách hàng với Khách hàng (C2C), Khách hàng với Doanh nghiệp (C2B), Doanh nghiệp với phủ (B2A), Khách hàng với Chính phủ (C2A) -) Doanh nghiệp với Doanh nghiệp (B2B) Thương Mại Điện tử B2B đề cập đến tất giao dịch điện tử hàng hóa thực hai cơng ty Loại Thương Mại Điện tử thường giải thích mối quan hệ nhà sản xuất sản phẩm nhà phân phối sản phẩm đến tay người tiêu dùng -) Doanh nghiệp với Khách hàng (B2C) Đây hình thức Thương Mại Điện tử phổ biến nhất, thể mối quan hệ mua bán doanh nghiệp với người tiêu dùng Mua sắm dạng Thương Mại Điện tử giúp người dùng dễ dàng so sánh xem phản hồi nhận xét người dùng trước Đối với cơng ty, cho phép họ hiểu biết khách hàng góc độ cá nhân -) Khách hàng với Khách hàng (C2C) Loại Thương Mại Điện tử bao gồm tất giao dịch điện tử diễn người tiêu dùng Các giao dịch thường thực thông qua việc sử dụng mạng xã hội cá nhân facebook, instagram trang web sàn Thương Mại Điện tử tiki, shopee -) Khách hàng với Doanh nghiệp (C2B) Thương Mại Điện tử C2B diễn người tiêu dùng cung cấp dịch vụ sản phẩm họ cho công ty mua hàng Ví dụ nhà thiết kế đồ họa chỉnh logo cho công ty nhiếp ảnh gia chụp ảnh cho trang web Thương Mại Điện tử -) Doanh nghiệp với phủ (B2A) Hình thức Thương Mại Điện tử đề cập đến tất giao dịch công ty khu vực hành Loại hình liên quan đến nhiều dịch vụ, đặc biệt kể đến an sinh xã hội, việc làm văn pháp lý -) Khách hàng với Chính phủ (C2A) Một hình thức phổ biến khác Thương Mại Điện tử C2A, bao gồm tất giao dịch điện tử cá nhân khu vực hành Ví dụ điển hình việc khai nộp thuế thơng qua cổng thông tin điện tử Cơ quan thuế 1.1.3 Các chức Thương Mại Điện tử Thương Mại Điện tử có nhiều tính khác tùy theo loại tảng Thương Mại Điện tử sử dụng để xây dựng ví dụ shopify, magento, woocommerce,… tảng Thương Mại Điện tử phổ biến Tuy nhiên, tảng đem lại trải nghiệm chức giống Lấy Magento, tảng có đầy đủ chức đối thủ nặng ký tất tảng làm ví dụ Magento sở hữu tính sau, tính thiết yếu cần thiết tảng: • Quản lý sản phẩm • Quản lý tài khoản người dùng/ đối tác bán hàng • Liên kết cổng tốn • Quản lý kho hàng • Quản lý nhóm sản phẩm • Hệ thống Marketing (voucher/code giảm giá, email marketing, SEO,…) • Dịch vụ chăm sóc/ hỗ trợ khách hàng • Hỗ trợ đa ngôn ngữ/ đa đơn vị tiền tệ • Khả tích hợp với phần mềm thứ (một tích có tảng khác) • Tính thêm vào giỏ hàng 1.1.4 Lợi ích Thương Mại Điện tử - Mua sắm tiện lợi Thông thường cửa hàng truyền thống, người tiêu dùng mua hàng hóa khoảng thời gian mở cửa cố định ngày tuần, nên phải chờ đợi để lỡ ngày mua hàng, điều khiến họ giảm mong muốn Hình Danh mục sản phẩm 3.1.4 từ khóa sản phẩm Bên danh mục sản phẩm ( Product tags ) từ khóa sản phẩm: Hình 10 Từ khố sản phẩm Từ khoá sản phẩm xác định từ ngữ thể sản phẩm, từ giúp sản phẩm dễ dàng tiếp cận khách hàng cho tìm kiếm thông tin liên quan 3.1.5 Ảnh sản phẩm Ảnh sản phẩm ( Product image )là hình ảnh đại diện sản phẩm trang cửa hàng 34 Hình 11 Từ khoá sản phẩm 3.1.6 Album ảnh sản phẩm Album ảnh sản phẩm ( Product gallery ) cho phép đăng nhiều hình ảnh, video lên Giúp khách hàng nắm thông tin sản phẩm nhiều Hình 12 Album ảnh sản phẩm Khi điền đầy đủ thông tin sản phẩm, ấn Đăng ( update ) Khi đăng thành công, sản phẩm mục sản phẩm ( Products )-> tất sản phẩm ( All Products ) 35 Hình 13 Tất sản phẩm 3.2 Chức giỏ hàng toán 3.2.1 Chức giỏ hàng Thử thêm sản phẩm vào giỏ hàng Lúc thấy để thơng báo thêm sản phẩm vào giỏ hàng Sau nhấn vào giỏ hàng hiển thị này: Hình 14 Giỏ hàng 3.2.2 chức toán Sau thêm vào giỏ hàng, bấm vào tiến hành toán trang toán ( Place Order ) Website Tại có mục để khách hàng điền thơng tin: 36 Hình 15 Trang tốn Sau nhập đầy đủ thơng tin vào trang tốn, ta có chi tiết đơn hàng: Hình 16 Chi tiết đơn hàng 3.3 Thêm viết vào Website Để thêm viết vào Website, ta vào mục Bài viết ( Posts ) -> thêm viết ( Add new ) 37 Hình 17 Thêm viết 3.3.1 Tiêu đề nội dung viết Trong mục viết mới, mục thêm tiêu đề cho viết Tiêu đề phần quan trọng hàng đầu viết Phía tiêu đề nội dung viết, thêm nội dung công cụ hỗ trợ WordPress cách ấn vào nút “ + ” bên góc bên phải Hình 18 Cơng cụ hỗ trợ mục thêm viết 3.3.2 Trạng thái hiển thị 38 Hình 19 Trạng thái hiển thị viết Visibility ( hiển thị ): chọn trạng thái hiển thị viết Publish ( đăng ): chọn thời gian đăng cho viết Template ( mẫu ): chọn viết theo mẫu Post format ( định dạng viết ): chọn định dạng viết Author ( tác giả ): chọn tác giả cho viết 3.3.3 Đường dẫn tĩnh Hình 20 Đường dẫn tĩnh viết 39 Đường dẫn URL viết, tự thêm đường dẫn bỏ trống, WordPress tự thêm cho 3.3.4 Ảnh đại diện Hình 21 Ảnh đại diện viết Phần giúp thêm ảnh đại diện ( Freatured image ) cho viết, để thu hút ý khách hàng Khi điền đầy đủ thông tin sản phẩm, ấn Đăng ( Update ) Khi đăng thành công, sản phẩm mục viết ( Posts )-> tất viết ( All posts ) Hình 22 Tất viết 3.4 Một số Plugin hỗ trợ 3.4.1 Buy now button for WooCommerce Buy Now Button for WooCommerce Plugin cho phép thêm nút Buy now ( Mua ) khách hàng ấn vào tìm hiểu sản phẩm Khách hàng click vào nút buy 40 now chuyển đến trang tốn khơng cần thêm vào giỏ hàng tốn Hình 23 Plugin buy now button 3.4.2 Chaty Chaty Plugin trang web mà doanh nghiệp có Trang Facebook cài đặt trang web họ Với Plugin này, người truy cập trang web ta chat với doanh nghiệp thông qua Messenger cách nhấp vào logo Messenger hiển thị trang web 41 Hình 24 Chaty 3.4.3 Call now button Nhiều Website kinh doanh nhỏ dựa vào khách hàng để liên hệ với họ để biết báo giá, thông tin trước bán hàng hỗ trợ Đó lý ta nên thêm biểu mẫu liên hệ cho tất chủ sở hữu Website Hình 25 Biểu tượng Call now button 42 3.5 Giao diện Website - Header: phần chứa contact, blog, store, about us , gallery, giỏ hàng, phần tìm kiếm sản phẩm Hình 26 Trang chủ Website bán tranh ảnh - Content: bao gồm tranh mà người chụp chụp, nhằm mục đích quảng bá kỹ chụp ảnh nghệ thuật cửa hàng Bên cạnh cịn có chức khác sau: • Phần hình ảnh quảng bá cửa hàng Hình 27 Các hình ảnh quảng bá thương hiệu cửa hàng 43 • Phần liên hệ booking chụp ảnh nghệ thuật để tiện cho event (đám cưới, chụp ảnh team,….) Hình 28 Phần liên hệ booking shop • Thơng tin studio mơ tả chi tiết thơng tin nhóm thành viên nhóm Hình 29 Mơ tả qua thơng tin studio thành viên nhóm 44 • Blog nơi viết chi tiết (thời tiết, khoảnh khắc, ) chụp ảnh nghệ thuật Hình 30 Blog nơi viết khoảnh khắc chụp ảnh nghệ thuật • Phần cửa hàng nơi bán những tranh nghệ thuật dành cho người hiểu biết có đam mê u thích nghệ thuật Hình 31 Giao diện bán tranh ảnh shop 45 • Phần giỏ hàng cho phép khách hàng xem lại sản phẩm mua Cho biết giá tiền sản phẩm tổng số tiền tất sản phẩm mua Hình 32 Giao diện giỏ hàng • Đặt hàng tốn nơi cho phép khách hàng đặt mua sản phẩm Nơi giao dịch tiền người mua người trả Hình 33 Giao diện toán cho khách hàng 46 KẾT LUẬN Trên tồn nội dung khóa luận tốt nghiệp “Thiết kế Website bán tranh, ảnh tảng mã nguồn mở WordPress” làm WordPress Đề tài kết vận dụng lý thuyết WordPress, vào thực hành Website hoàn chỉnh với tính đa dạng, phong phú, mang đến tiện ích dễ sử dụng cho người dùng Mặc dù cố gắng trình nghiên cứu tài liệu đưa kết thực tế, kinh nghiệm kiến thức cịn nhiều hạn chế nên em khơng thể tránh khỏi thiếu xót Em mong nhận ý kiến đóng góp trao đổi thầy giáo bạn để hoàn thiện kiến thức thân Cuối lần em xin chân thành cảm ơn thầy Nguyễn Đăng Minh giúp đỡ tạo điền kiện để em hoàn thành khóa luận văn tốt nghiệp 47 TÀI LIỆU THAM KHẢO [1] Matthew MacDonald ( 2014 ) WordPress: The Missing Manual, Nhà xuất O’ Reylly Media [2] Rachel Mc Collin ( 2015 ).WordPress 4.0 Site Blueprins, nhà xuất Packt Publishing [3] George Plumley ( 2015 ) Teach yourself WordPress Visually, nhà xuất Visual [4] https://www.w3schools.com/ [5] [6] https://codex.wordpress.org/ https://www.youtube.com/ [7] https://www.google.com/ 48