Xây dựng website bán hàng trực tuyến

( TRƯỜNG ĐẠI HỌC HÙNG VƯƠNG KHOA: KỸ THUẬT - CÔNG NGHỆ - NGUYỄN ĐỨC HOÀNG XÂY DỰNG WEBSITE BÁN HÀNG TRỰC TUYẾN KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC Ngành: Công Nghệ Thông Tin NGƯỜI HƯỚNG DẪN: - ThS Đinh Thái Sơn - ThS Thiều Thị Tài Phú Thọ, 2019 LỜI CẢM ƠN Để khóa luận đạt kết tốt đẹp, em nhận hỗ trợ, giúp đỡ nhiều cá nhân thầy giáo ThS Đinh Thái Sơn cô giáo ThS Thiều Thị Tài tận tình hướng dẫn góp ý để em hồn thành tốt đề tài khố luận “Xây dựng Website bán hàng trực tuyến” Em xin chân thành cảm ơn ban lãnh đạo khoa, thầy cô giáo khoa Kỹ thuật - Công nghệ trường Đại học Hùng Vương đưa ý kiến giúp đỡ, tạo điều kiện thuận lợi cho em hoàn thành đề tài Do kiến thức kinh nghiệm thực tiễn hạn chế, q trình hồn thành khóa luận khó tránh khỏi sai xót, mong thầy đóng góp ý kiến để khóa luận em hồn thiện Em xin chân thành cảm ơn! Sinh viên thực Nguyễn Đức Hoàng MỤC LỤC LỜI CẢM ƠN DANH MỤC CÁC CHỮ VIẾT TẮT DANH MỤC HÌNH ẢNH A MỞ ĐẦU Tính cấp thiết đề tài Mục tiêu nghiên cứu đề tài Đối tượng phạm vi nghiên cứu 3.1 Đối tượng nghiên cứu 3.2 Phạm vi nghiên cứu Phương pháp nghiên cứu Ý nghĩa khoa học thực tiễn Bố cục đề tài B NỘI DUNG VÀ KẾT QUẢ NGHIÊN CỨU CHƯƠNG 1: TỔNG QUAN VỀ VẤN ĐỀ NGHIÊN CỨU VÀ NỀN TẢNG XÂY DỰNG HỆ THỐNG 1.1 Khái quát cửa hàng 1.1.1 Cửa hàng chuyên tư vấn thiết kế thi công nội thất tủ bếp Domino 1.1.2 Giới thiệu cửa hàng 1.2 Tổng quan thương mại điện tử 1.2.1 Khái niệm thương mại điện tử 1.2.2 Lợi ích việc sử dụng thương mại điện tử 1.3 Giới thiệu ngơn ngữ lập trình PHP hệ quản trị sở liệu MySQL 1.3.1 Giới thiệu ngôn ngữ PHP môi trường lập trình website 1.3.2 Giới thiệu hệ quản trị sở liệu MySQL 1.4 Giới thiệu framework Jquery Bootstrap 11 1.4.1 Giới thiệu framework Jquery cách sử dụng 11 1.4.2 Giới thiệu framework Bootstrap cách sử dụng 14 CHƯƠNG 2: MÃ NGUỒN MỞ WORDPRESS, HOST VÀ DOMAIN 17 2.1 Tổng quan Wordpress 17 2.1.1 Mã nguồn mở Wordpress gì? 17 2.1.2 Tại lại dùng mã nguồn mở Wordpress 18 2.1.3 Những nét bật Wordpress 19 2.2 Giới thiệu Domain Host 21 2.2.1 Tên miền – Domain gì? 21 2.2.2 Hosting hay Web hosting gì? 22 2.2.3 Vậy Domain web hosting liên hệ với nào? 22 2.2.4 Làm để thiết lập trang web từ domain hosting 23 CHƯƠNG 3: PHÂN TÍCH VÀ XÂY DỰNG WEBSITE BÁN HÀNG TRỰC TUYẾN CHO CỬA HÀNG TỦ BẾP DOMINO 24 3.1 Phân tích thiết kế hệ thống 24 3.2 Cài đặt hệ thống 25 3.2.1 Yêu cầu cài đặt 25 3.2.2 Chuẩn bị Text Editor IDE để lập trình 26 3.3 Cài đặt Wordpress 27 3.4.Sử dụng child theme với theme có sẵn wordpress 31 3.4.1 Child theme gì? 31 3.4.2 Cách child theme hoạt động 31 3.4.3.Tạo Child Theme 32 3.5.Thêm CSS JS vào theme 33 3.6 Sử dụng Plugin Advanced Custom Field 33 3.7 Gọi field theme 38 3.8 Xây dựng website bán hàng trực tuyến cho cửa hàng tủ bếp Domino 42 3.8.1 Các giao diện website 42 3.8.2 Sử dụng admin để thay đổi nội dung trang liên hệ 51 3.8.3 Sử dụng admin để thêm, sửa xóa sản phẩm 51 3.9 Upload wordpress từ localhost lên hosting 54 3.9.1 Xuất liệu từ local 54 3.9.2 Sử dụng FileZilla up load file lên Host 56 3.10 Trỏ tên miền hosting 59 C KẾT LUẬN CHUNG 61 D TÀI LIỆU THAM KHẢO 62 DANH MỤC CÁC CHỮ VIẾT TẮT Tên viết tắt STT Ý nghĩa FTP: File Transfer Protocol Giao thức truyền tập tin TMĐT Thương Mại Điện Tử UNIX Một hệ điều hành máy tính Là khung cung cấp Framework chức năng, giải pháp cài đặt sẵn giúp tiết kiệm thời gian trình phát triển ứng dụng PHP: Hypertext Preprocessor Một ngơn ngữ lập trình kịch MySQL Một hệ quản trị sở liệu CSDL Cơ sở liệu HTML (HyperText Markup Language) Là ngôn ngữ đánh dấu siêu văn Được dùng để miêu tả cách trình CSS bày tài liệu viết ngôn ngữ HTML Là mạng phân phối theo địa lý 10 CDN (Content delivery network) máy chủ proxy trung tâm liệu 11 CMS (Content Management System) Hệ quản trị nội dung 12 Domain Tên miền 13 Import Nhập Cơ sở liệu DANH MỤC HÌNH ẢNH Hình ảnh 3.1: Sơ đồ phân tích thiết kế trang web tubepdomino.vn 24 Hình ảnh 3.2: Text Editor Notepad++ 26 Hình ảnh 3.3: Thư mục wordpress sau giải nén 27 Hình ảnh 3.4: Các tập tin sau giải nén 28 Hình ảnh 3.5: Lựa chọn ngơn ngữ cài đặt 29 Hình ảnh 3.6: Giao diện sau chọn ngơn ngữ 29 Hình ảnh 3.7: Chạy cài đặt wordpress 30 Hình ảnh 3.8: Cài đặt thành cơng 30 Hình ảnh 3.9: Thư mục mẹ thư mục child theme 32 Hình ảnh 3.10: Child theme hiển thị admin 33 Hình ảnh 3.11:Plugin Advanced Custom Field 34 Hình ảnh 3.12: Giao diện plugin Advanced Custom Field 35 Hình ảnh 3.13: Add Field để thêm field 35 Hình ảnh 3.14: Các trường field plugin 36 Hình ảnh 3.15: Điền thơng tin cho field 37 Hình ảnh 3.16: Lựa chọn nơi field xuất 37 Hình ảnh 3.17: Phần Options Custom Field 38 Hình ảnh 3.18: Chọn Home Page để tùy biến nội dung field 39 Hình ảnh 3.19: Điền thông tin lên custom field tạo 39 Hình ảnh 3.20: Thơng tin custom field hiển thị trang chủ 41 Hình ảnh 3.21: Header trang chủ 42 Hình ảnh 3.22: Body trang chủ 43 Hình ảnh 3.23: Hình ảnh dự án trang chủ 43 Hình ảnh 3.24: Hình ảnh showroom trang chủ 44 Hình ảnh 3.25: Footer trang chủ 44 Hình ảnh 3.26: Thơng tin hiển thị trang liên hệ 45 Hình ảnh 3.27: Địa cửa hàng 45 Hình ảnh 3.28: Footer trang liên hệ 46 Hình ảnh 3.29: Những mẫu dự án mà cửa hàng thực 46 Hình ảnh 3.30: Những mẫu dự án mà cửa hàng thực 47 Hình ảnh 3.31: Những mẫu tủ bếp trang đặt hàng 47 Hình ảnh 3.32: Các hình ảnh thơng tin mẫu sản phẩm 48 Hình ảnh 3.33: Thơng tin form đặt hàng 48 Hình ảnh 3.34: Đăng nhập vào admin 49 Hình ảnh 3.35: Giao diện trang admin 49 Hình ảnh 3.36: Các trang có Pages 50 Hình ảnh 3.37: Chỉnh sửa nội dung trang chủ 50 Hình ảnh 3.38: Truy cập trang liên hệ 51 Hình ảnh 3.39: Thay đổi nội dung trang liên hệ 51 Hình ảnh 3.40: Vào add new để thêm sản phẩm 52 Hình ảnh 3.41: Thêm ảnh thông tin cho sản phẩm 52 Hình ảnh 3.42: Thêm thơng tin chi tiết cho sản phẩm 53 Hình ảnh 3.43: Đăng sản phẩm 53 Hình ảnh 3.44: Nút sửa xóa sản phẩm 53 Hình ảnh 3.45: Xuất liệu phpMyAdmin 54 Hình ảnh 3.46: Cpanel web hosting 55 Hình ảnh 3.47: Nhập liệu host 55 Hình ảnh 3.48: Nhập database vào mysql manager 55 Hình ảnh 3.49:Thanh Quick Connect FileZilla 56 Hình ảnh 3.50: Bảng điều khiển tệp host 57 Hình ảnh 3.51: Bảng điều khiển tệp máy tính 57 Hình ảnh 3.52: Upload file từ máy tính lên Host 57 Hình ảnh 3.53: Trang đăng ký tên miền 59 Hình ảnh 3.54: Phần quản lý DNS 60 Hình ảnh 3.55: Danh sách IP trỏ đến 60 A MỞ ĐẦU Tính cấp thiết đề tài Trong thời đại ngày nay, hầu hết hoạt động kinh tế, trị, xã hội đuợc đăng tải mạng Internet Do vậy, công ty hay thương hiệu muốn khẳng định thương hiệu cách đơn giản đỡ tốn thật hiệu tạo cho cơng ty hay thương hiệu Website để quảng bá công ty đến tất người Tận dụng môi trường internet, xu hướng phát triển phần mềm xây dựng ứng dụng có khả chia sẻ cao, vận hành không phụ thuộc vào vị trí địa lý hệ điều hành Như ta thấy thị trường việc cạnh tranh kinh doanh ngày trở nên liệt hầu hết nhà kinh doanh, công ty lớn tâm đến việc làm thoả mãn khách hàng cách tốt So với kinh doanh truyền thống Thương mại điện tử chi phí thấp hơn, hiệu đạt cao Hơn nữa, với lợi công nghệ Internet nên việc truyền tải thơng tin sản phẩm nhanh chóng, thuận tiện Do đó, việc “Xây dựng website bán hàng trực tuyến” thiếu doanh nghiệp, cửa hàng vừa nhỏ Vì vậy, em lựa chọn đề tài tốt nghiệp “Xây dựng website bán hàng trực tuyến” cho cửa hàng tủ bếp Domino địa đường Nguyễn Du, phường Nông Trang, thành phố Việt Trì Việc xây dựng website giúp khách hàng muốn mua hay lắp đặt hệ thống tủ bếp tiếp cận cách trực tiếp với sản phẩm cửa hàng Mục tiêu nghiên cứu đề tài Xây dựng thành công website bán hàng cho cửa hàng tủ bếp Domino Đối tượng phạm vi nghiên cứu 3.1 Đối tượng nghiên cứu - Ngôn ngữ server PHP - Ngôn ngữ xây dựng front-end cho website như: HTML, CSS, JavsScript Hình ảnh 3.32: Các hình ảnh thông tin mẫu sản phẩm  Giao diện form đặt hàng: Hình ảnh 3.33: Thơng tin form đặt hàng 48 3.2.2 Giao diện trang admin Website  Form đăng nhập để vào admin wordpress Hình ảnh 3.34: Đăng nhập vào admin  Giao diện trang admin website Hình ảnh 3.35: Giao diện trang admin 49 3.2.2.1 Sử dụng admin để thay đổi nội dung trang chủ Để thay đổi nội dung trang hình ảnh, thơng tin nội dung trang cho ta truy cập vào phần Pages Hình ảnh 3.36: Các trang có Pages Hình ảnh 3.37: Chỉnh sửa nội dung trang chủ 50 3.8.2 Sử dụng admin để thay đổi nội dung trang liên hệ - Để thay đổi nội dung trang liên hệ ta vào phần Pages chọn trang Liên Hệ Hình ảnh 3.38: Truy cập trang liên hệ Hình ảnh 3.39: Thay đổi nội dung trang liên hệ Với trang khác có trên trang ta làm tương tự 3.8.3 Sử dụng admin để thêm, sửa xóa sản phẩm Khác với trang liên hệ hay dự án trang với thông tin cố định ta sử dụng Page để tạo trang Thì để tạo sản phẩm tạo custom post type để 51 chứa sản phẩm đây, ta sử dụng custom post type có khả phân loại phân cấp mà Pages khơng có Hình ảnh 3.40: Vào add new để thêm sản phẩm Hình ảnh 3.41: Thêm ảnh thơng tin cho sản phẩm 52 Hình ảnh 3.42: Thêm thông tin chi tiết cho sản phẩm Sau ghi đầy đủ thông tin sản phẩm ta chọn update Hình ảnh 3.43: Đăng sản phẩm Tương tự để sửa sản phẩm ta ấn Edit, xóa sản phẩm ấn vào Trash Hình ảnh 3.44: Nút sửa xóa sản phẩm 53 3.9 Upload wordpress từ localhost lên hosting 3.9.1 Xuất liệu từ local Bước 1: Xuất CSDL sang file sql Bạn truy cập vào http://localhost/phpmyadmin, sau chọn CSDL bạn bấm vào menu export, sau bấm GO để xuất CSDL file sql Trong trường hợp CSDL lớn bạn nên nén lại dạng gzip để upload lên hosting Nếu CSDL bạn lên đến vài GB bạn gửi cho nhà cung cấp dịch vụ hosting họ import giúp bạn Hình ảnh 3.45: Xuất liệu phpMyAdmin Bước 2: Import CSDL vào hosting Bạn truy cập vào Cpanel web hosting bấm vào mục MySQL Databases để tạo CSDL user quản lý CSDL 54 Hình ảnh 3.46: Cpanel web hosting Bước 3: Nhập liệu vào phpMyadmin file ta vừa xuất từ local Hình ảnh 3.47: Nhập liệu host Bước 4: Nhập Database ta vừa tạo vào MySQL Manager Hình ảnh 3.48: Nhập database vào mysql manager 55 3.9.2 Sử dụng FileZilla up load file lên Host FileZilla Client chương trình hỗ trợ truyền tải tập liệu máy tính cá nhân máy chủ web thơng qua mạng Internet sử dụng giao thức FTP (File Transfer Protocol) FileZilla hỗ trợ việc truyền tải tập tin lớn, phục hồi lại từ điểm đứt gãy gặp cố, giữ tập tin an toàn cho phép tìm kiếm chỉnh sửa tập tin từ xa Phần mềm làm việc với giao thức FTP, FTP SSL/TLS SFTP Sử dụng Quick Connect kết nối đến máy chủ FTP Để kết nối đến máy chủ FTP bạn cần điền đầy đủ thông tin vào Quick Connect bao gồm Host, User name, Pass word, Port Nếu loại máy chủ đặc biệt máy chủ SFTP bạn cần thêm giao thức phía trước địa chỉ, vi dụ máy chủ SFTP địa bắt đầu với ‘SFTP: //’ Nhập cổng (Port) máy chủ vào mục Port khơng phải cổng mặc định (21 với FTP 22 với SFTP) Sau điền đầy đủ thông tin bạn ấn Enter ấn vào nút Quick Connect để kết nối đến máy chủ Hình ảnh 3.49:Thanh Quick Connect FileZilla Điều hướng máy chủ Sau kết nối thành công bạn thấy liệu Host xuất bên phía tay phải bảng điều khiển Tên thư mục xuất phía bên cịn thư mục bao gồm thư mục nằm Host xuất phía Để truy cập thư mục Host bạn làm theo cách: - Gõ tên thư mục vào ô Remote Site nhấn Enter 56 - Nhấp vào thư mục thư mục Double-click vào thư mục cần thay đổi Việc quản lý thư mục Filezlla giống máy tính thơng thường Hình ảnh 3.50: Bảng điều khiển tệp host Điều hướng máy tính bạn Điều hướng máy tính hoạt động gần giống với điều hướng máy chủ, thư mục máy tính thư mục local nằm phía tay trái của sổ làm việc Hình ảnh 3.51: Bảng điều khiển tệp máy tính Chuyển file từ máy tính qua host Để chuyển file wordpress từ máy tính sang file host bạn cần vào thư mục wordpress bơi đen tồn thư copy paste sang thư mục public_html Thư mục public_html thư mục chứa tồn liệu hosting Hình ảnh 3.52: Upload file từ máy tính lên Host 57 Thay đổi thơng tin cấu hình kết nối đến CSDL Trên FileZilla panel bên phải bạn tìm đến file wp-config.php thay đổi thông số theo thông tin tài khoản CSDL mà bạn tạo define('DB_NAME', 'hoangnd_kitchen); /** MySQL database username */ define('DB_USER', 'admin'); /** MySQL database password */ define('DB_PASSWORD', '123456789'); /** MySQL hostname */ define('DB_HOST', 'localhost'); Ở bạn cần thay đổi lại tên CSDL, user truy cập CSDL, mật user quản lý CSDL DB_HOST bạn để localhost, thơng số thay đổi tùy theo nhà cung cấp dịch vụ khác Thay đổi lại đường dẫn file htaccess Đây bước mà đôi lúc ta dễ bỏ qua Nếu bạn cài đặt Wordpress thư mục bên htdocs file htaccess bạn có nội dung sau: # BEGIN WordPress RewriteEngine On RewriteBase /wordpres/ RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule /wordpress/index.php [L] # END WordPress Sau upload lên hosting bạn cần phải thay đổi lại RewriteBase /wordpress sang RewriteBase / Nếu bạn bỏ qua bước bạn gặp phải lỗi 500 internal server chạy wordpress 7.Cập nhật Permalink 58 Bạn truy cập vào Wordpress Admin bấm vào Settings » General click save options để đảm bảo url cập nhật lại Sau bạn vào Settings » Permalink click save để đảm bảo tất link post cập nhật lại 8.Cập nhật link hình ảnh Trong trường hợp link hình ảnh link viết localhost bạn cần vào lại PHP MyAdmin chạy câu lệnh SQL sau để câp nhật lại tên miền cho viết Wordpress UPDATE wp_posts SET post_content = REPLACE(post_content, 'localhost/wordpress/', 'www.tubepdomino.vn/'); 3.10 Trỏ tên miền hosting Để truy cập vào website, có cần có địa – tên miền Ở ta trỏ địa ip host là: 107.172.48.244 sang địa tên miền: tubepdomino.vn Bước 1: Truy cập vào trang admin nhà đăng ký tên miền chọn tên miền Hình ảnh 3.53: Trang đăng ký tên miền Bước 2: Ta chọn phần “Quản lý DNS” sau điền địa ip hosting vào phần giá trị Sau chọn thêm ghi 59 Hình ảnh 3.54: Phần quản lý DNS Bước 3: Kéo cuộn xuống để kiểm thêm thành cơng giá trị ta vừa thêm hiển thị Hình ảnh 3.55: Danh sách IP trỏ đến 60 C KẾT LUẬN CHUNG Sau thời gian nghiên cứu, thiết kế xây dựng hệ thống Em xây dựng thành công website bán hàng mặt hàng tủ bếp cho cửa hàng Tủ bếp Domino Kết đạt được:  Xây dựng website tubepdomino.vn có giao diện chức với yêu cầu khách hàng  Ngồi chức bán hàng khách hàng sử dụng trang để marketing quảng bá sản phẩm giới thiệu cho người doanh nghiệp  Xây dựng trang web cung cấp chức như: Quản lý sản phẩm, quản lý nội dung, tiếp nhận đơn hàng  Cho phép người bất kỳ, với thiết bị cần có kết nối mạng truy cập vào trang web tiếp cận đến sản phẩm cửa hàng Hướng phát triển:  Sau bàn giao sản phẩm hồn thiện cho khách hàng q trình sử dụng website có phát sinh lỗi khách hàng có u cầu phát triển chức tiến hành triển khai theo nhu cầu khách hàng 61 D TÀI LIỆU THAM KHẢO [1] Eric Freeman, Elisabeth Freeman, Head First JavaScript Programming, Nhà xuất O’Reilly, 2014 [2] Quang Bình-Phương Hà, Thiết kế xuất Web với HTML, Nhà xuất Thống Kê, 2001 [3] Nguyễn Trường Sinh, Sử dụng PHP & MySQL thiết kế Web động, Nhà xuất Thống Kê, 2005 [4] Nguyễn Trường Sinh, Macromedia Dreamweaver8.0, Nhà xuất Lao động xã hội, 2003 [5] Codex Wordpress, < https://codex.wordpress.org/> [6] Bootstrap Document, < https://getbootstrap.com/docs/4.1/gettingstarted/introduction/> [7] W3 School Tutorial, < https://www.w3schools.com/> 62 ... tiện Do đó, việc ? ?Xây dựng website bán hàng trực tuyến? ?? thiếu doanh nghiệp, cửa hàng vừa nhỏ Vì vậy, em lựa chọn đề tài tốt nghiệp ? ?Xây dựng website bán hàng trực tuyến? ?? cho cửa hàng tủ bếp Domino... Việc xây dựng website giúp khách hàng muốn mua hay lắp đặt hệ thống tủ bếp tiếp cận cách trực tiếp với sản phẩm cửa hàng Mục tiêu nghiên cứu đề tài Xây dựng thành công website bán hàng cho cửa hàng. .. WordPress.org 23 CHƯƠNG 3: PHÂN TÍCH VÀ XÂY DỰNG WEBSITE BÁN HÀNG TRỰC TUYẾN CHO CỬA HÀNG TỦ BẾP DOMINO 3.1 Phân tích thiết kế hệ thống Trước thiết kế website bán hàng ta cần phân tích thiết kế hệ