Xây dựng website bán đồ handmade

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO CHUYỀN ĐỀ HỌC PHẦN PHẦN MỀM MÃ NGUỒN MỞ ĐỀ TI: XÂY DỰNG WEBSITE BÁN ĐỒ HANDMADE Sinh viên thực : VI THỊ HUYỀN TRANG TRẦN NGỌC KHÁNH Giảng viên hướng dẫn : CẤN ĐỨC ĐIỆP Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : HỆ THỐNG THƯƠNG MẠI ĐIỆN TỬ Lớp : D14HTTMĐT1 Khóa : 2019-2024 Hà Nội, tháng 10 năm 2021 PHIẾU CHẤM ĐIỂM STT Họ tên sinh viên Nội dung thực Điểm Chữ ký VI THỊ HUYỀN TRANG TRẦN NGỌC KHÁNH Họ tên giảng viên Giảng viên chấm 1: Giảng viên chấm 2: - Tham gia trình làm báo cáo, thiết kế chỉnh sửa web thêm plugin cần thiết làm thuyết trình, báo cáo - Cùng lên ý tưởng thiết kế trang web, thêm thêm plugin cần thiết làm báo cáo Chữ ký Ghi MỤC LỤC LỜI MỞ ĐẦU CHƯƠNG I.TỔNG QUAN VỀ PHẦN MỀM MÃ NGUỒN MỞ 1.1.Tìm hiểu phần mềm mã nguồn mở 1.2.Lợi ích phần mềm mã nguồn mở CHƯƠNG II WORDPRESS 2.1.Tìm hiểu phần mềm mã nguồn mở Wordpress 2.2.Cài đặt Localhost máy tính để tìm hiểu WordPress 2.2.1 Cài đặt localhost máy tính với XAMPP .4 2.2.2.Các bước cài đặt WordPress Localhost .9 2.3.Chuyển trang web từ Localhost lên Hosting 15 2.3.1.Thông tin tên miền (Domain) 15 2.3.2.Thông tin hosting 16 2.3.3.Deploy trang web 16 CHƯƠNG III.THIẾT KẾ GIAO DIỆN V KIỂM THỬ 22 3.1.Giao diện người dùng .22 3.1.1.Trang chủ 22 3.1.2.Menu 22 3.1.3.Trang đăng nhập 23 3.1.4.Trang sale 23 3.1.5.Trang liên hệ .24 3.1.6.Trang chi tiết sản phẩm .24 3.1.7.Trang giỏ hàng 25 3.1.8.Trang toán 26 3.1.9.Trang đánh giá sản phẩm 27 3.2.Trang quản trị hệ thống 27 3.3.Thông tin phần mềm 28 3.3.1.Giao diện sử dụng (Theme) .28 3.3.2.Các plugin sử dụng (10 plugin) 28 KẾT LUẬN 30 TI LIỆU THAM KHẢO 31 DANH MỤC HÌNH ẢNH Hình 2.1.Tải XAMPP từ trang https://www.apachefriends.org Hình 2.2.Bắt đầu cài đặt XAMPP Hình 2.3.Chọn đường dẫn cài đặt XAMPP Hình 2.4.Tìm hiểu thêm Bitnami cho Xampp Hình 2.5.Bảng điều khiển XAMPP Hình 2.6.Khởi động Apache MySQL Hình 2.7.Cài đặt XAMPP thành cơng .9 Hình 2.8.File Wordpress tải giải nén .9 Hình 2.9.File Wordpress 10 Hình 2.10.Copy mã nguồn WordPress vào Localhost(XAMPP) 11 Hình 2.11.Chọn ngôn ngữ cài đặt WordPress 12 Hình 2.12 Nhắc nhở trước cài đặt 13 Hình 2.13.Nhập thông tin database .13 Hình 2.14 Bắt đầu trình cài đặt .13 Hình 2.15.Thiết lập thông tin quan trọng cho website 14 Hình 2.16.Cài đặt thành cơng Wordpress .14 Hình 2.17.Trang quản trị WordPress (Localhost) .15 Hình 2.18.Thơng tin tên miền 16 Hình 2.19.Thơng tin hosting 16 Hình 2.20.Nén file wordpress 17 Hình 2.21.Export sở liệu localhost 17 Hình 2.22.Tạo Database Cpanel 18 Hình 2.23.Thêm User Cpanel 18 Hình 2.24.Upload file Wordpress 19 Hình 2.25.Import sở liệu cho Database 19 Hình 2.27.Cấu hình lại wp-config.php 20 Hình 2.28.Thay đổi tên miền 21 Hình 3.1.Trang chủ 22 Hình 3.2.Menu 23 Hình 3.3.Trang đăng nhập .23 Hình 3.4.Trang liên hệ 24 Hình 3.5.Trang chi tiết sản phẩm 25 Hình 3.6.Trang giỏ hàng 26 Hình 3.7.Trang tốn .26 Hình 3.8.Trang quản trị hệ thống 27 Hình 3.9.Giao diện sử dụng (Theme) 28 Hình 3.10.Các plugin sử dụng (10 plugin) 28 LỜI MỞ ĐẦU Xã hội ngày phát triển kéo theo cơng nghệ thơng tin khơng ngừng phát triển, cơng nghệ số 4.0 đời việc ứng dụng công nghệ thông tin tin học hóa xem yếu tố mang tính tiên hoạt động phủ, tổ chức, cơng ty, đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Cùng với phát triển đó, mạng Internet trở thành mạng truyển thơng có sức ảnh hưởng lớn nhất, khơng thể thiếu tất hoạt động người việc truyển tải trao đổi liệu Bằng Internet, thực nhiều công việc với tốc độ nhanh chi phí thấp nhiều so với cách thức truyền thống Chính lợi ích từ internet, thúc đẩy khai sinh phát triển thương mại điện tử phủ điện tử khắp thể giới, làm nâng cao chất lượng sống người Sự phát triển lan tỏa mạnh mẽ Internet len lỏi vào hoạt động sản xuất, kinh doanh, đây, người dùng truy cập vào trang thương mại điện tử để thực mua bán trao đổi cách dễ dàng, tiện lợi, hay đơn giản để cập nhật tin tức thông qua trang báo mạng, nghe nhạc, xem phim sau làm việc căng thẳng Vậy để người khác biết nhiều thơng tin hữu ích, trải nghiệm, kinh nghiệm quý báu sống cho người khác thông qua Internet Có nhiều cách khác bình luận mạng xã hội, phương tiện truyền thông Nhưng hướng lạ xây dựng Website tuyệt vời hơn, giúp cho thỏa sức sáng tạo nên điều mẻ, xây dựng Website, ta thoải mái chia sẻ điều thú vị, tạo nên nội dung độc đáo thân Vì để tiếp cận đóng góp, đẩy mạnh phát triển phổ biến trang web Việt Nam, nhóm em tìm hiểu thực “Xây dựng website bán đồ thủ công mỹ nghệ” thử nghiệm việc kinh doanh nhóm CHƯƠNG I TỔNG QUAN VỀ PHẦN MỀM MÃ NGUỒN MỞ 1.1 Tìm hiểu phần mềm mã nguồn mở Mã nguồn mở (Open source) phần mềm cung cấp dạng mã nguồn, không miễn phí giá mua mà chủ yếu miễn phí quyền: Người dùng có quyền sửa đổi, cải tiến, phát triển, nâng cấp theo số nguyên tắc định giấy phép Phần mềm nguồn mở (ví dụ General Public Licence – GPL) mà khơng cần xin phép Tiện ích mà Open Source mang lại quyền tự sử dụng chương trình cho mục đích, quyền tự để nghiên cứu cấu trúc chương trình, chỉnh sửa phù hợp với nhu cầu, truy cập vào mã nguồn, quyền tự phân phối lại phiên cho nhiều người, quyền tự cải tiến chương trình phát hành cải tiến mục đích cộng đồng 1.2 Lợi ích phần mềm mã nguồn mở - Phần mềm chép hồn tồn miễn phí, bạn hoàn toàn an tâm chia sẻ chương trình tuyệt vời với bạn bè - Các định dạng file khơng hồn tồn bị kiểm sốt vài nhà cung cấp Điều xảy liệu nằm phần mềm độc quyền? Việc sử dụng định dạng file bí ẩn khiến bạn dùng chương trình cơng ty Do u cầu công việc, bạn muốn sử dụng liệu cho ứng dụng khác chương trình quyền khơng cho phép! Cịn nhà cung cấp chấm dứt hỗ trợ ngưng việc nâng cấp sản phẩm, chắn liệu bạn phải vứt xó Với phần mềm quyền, có nhà cung cấp giải vấn đề bạn Nhưng với Open Source bạn gặp nhiều nhà cung cấp làm vừa lịng - Hầu hết sản phẩm Open Source có khả bảo mật tuyệt vời, vết nứt tìm thấy, thường xử lý nhanh phần mềm có quyền - Các hệ thống Open Source, hệ thống dựa UNIX thường linh hoạt đến khó tin Bởi chúng xây dựng từ nhiều khối thống miêu tả cặn kẽ, rấ dễ để bạn thay nhiều phần hệ thống với phần có giao diện tương tự - Có cộng đồng hỗ trợ lớn, khơng bị phụ thuộc vào công ty CHƯƠNG II WORDPRESS 2.1 Tìm hiểu phần mềm mã nguồn mở Wordpress - WordPress phần mềm nguồn mở (Open Source Software) viết ngơn ngữ lập trình website PHP (Hypertext Preprocessor) sử dụng hệ quản trị sở liệu MySQL Wordpress mắt lần vào ngày 27/05/2003 tác giả Matt Mullenweg Mike 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 mã nguồn mở ngôn ngữ PHP để hỗ trợ tạo tạo blog cá nhân nhiều người sử dụng ủng hộ tính dễ sử dụng, nhiều tính hữu ích Qua thời gian, số lượng người sử dụng tăng lên, cộng tác viên lập trình viên tham gia đơng đảo để phát triển mã nguồn Wordpress có thêm tính tuyệt vời WordPress xem 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 thể loại website khác blog, website tin tức/tạp chí, giới thiệu doanh nghiệp, bán hàng – thương mại điện tử, chí với loại website có độ phức tạp cao đặt phòng khách sạn, thuê xe, đăng dự án bất động sản Hầu hình thức website với quy mơ nhỏ vừa có thê triển khai tảng WordPress * Những lý mà bạn nên chọn WordPress: - Dễ sử dụng: WordPress phát triển nhằm mục đích 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 website nâng cao Các thao tác WordPress đơn giản, giao diện quản trị trực quan giúp bạn nắm rõ cấu quản lý website WordPress thời gian ngắn Về cách cài đạt lại dễ dàng hơn, bạn tự cài website WordPress host (máy chủ) riêng tự vận hành sau vài cú click - Cộng đồng hỗ trợ đông đảo: Là mã nguồn CMS mở phổ biến giới, điều có nghĩa bạn cộng đồng người sử dụng WordPress hỗ trợ bạn khó khăn gặp phải q trình sử dụng Nếu bạn có khả tiếng Anh tốt, bạn dễ dàng tìm câu trả lời cho vấn đề bạn gặp phải Google với vài từ khóa tìm kiếm - Nhiều gói giao diện có sẵn: Trong sử dụng WordPress khái niệm giao diện cho website WordPress thường gọi theme Hiện WordPress có nhiều theme miễn phí khác để dễ dàng thay đổi giao diện website với vài cú click mà không cần bận tâm việc để thiết kế theme cho riêng Cịn bạn muốn website đẹp chun nghiệp ban mua theme trả phí với giá bán dao động tự $30 đến $65 - Nhiều Plugin hỗ trợ: Plugin nghĩa trình cắm thêm vào website để bổ sung chức mà bạn cần Ví dụ mặc định sau cài website WordPress, bạn khơng có chức hiển thị viết liên quan viết, với nhiều plugin miễn phí hỗ trợ bạn dễ dàng cài thêm plugin miễn phí để website có chức Tương tự với theme, có nhiều plugin trả phí mang tính độc đáo có ích vào website có giá khoảng từ $10 đến $80 tùy theo độ phức tạp - Dễ phát triển cho lập trình viên: Nếu bạn người có am hiểu việc làm website thành thạo HTML, CSS, PHP dễ dàng mở rộng website WordPress bạn với nhiều tính vơ bổ ích Cách phát triển đơn giản WordPress mã nguồn mở nên bạn dễ dàng hiểu hoạt động phát triển thêm tính + Với hàng nghìn hàm (function) có sẵn nó, bạn thoải mái sử dụng bạn thay đổi cấu trúc hàm với filter hook quy trình làm việc lập trình viên chun nghiệp ứng dụng dễ dàng vào WordPress - Hỗ trợ nhiều ngơn ngữ: mã nguồn WordPress có nhiều gói ngơn ngữ kèm, bao gồm tiếng Việt Mặc dù giao diện hay plugin có ngơn ngữ riêng bạn tự dịch lại với phần mềm hỗ trợ - Có thể làm nhiều loại website: Dùng WordPress khơng có nghĩa bạn làm blog cá nhân, mà bạn cịn 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 Tuy nhiên để làm được, bạn nên chắn hiểu WordPress đừng vội bước lên mây để nhận cảm giác thất vọng độ phức tạp 2.2 Cài đặt Localhost máy tính để tìm hiểu WordPress 2.2.1 Cài đặt localhost máy tính với XAMPP *Localhost gì? - Localhost từ ghép hai chữ “local” “host” Local theo định nghĩa IT máy tính bạn, host theo định nghĩa IT máy chủ Vậy localhost nghĩa máy chủ vận hành máy tính bạn - Localhost bao gồm nhiều ứng dụng kèm với tất ứng dụng kết hợp với để tạo mơi trường chạy mã nguồn WordPress máy tính bạn bao gồm: + Phần mềm Webserver tên Apache, webserver thông dụng + Phần mềm PHP để xử lý PHP WordPress viết ngôn ngữ PHP + Phần mềm MySQL Server để lưu trữ xử lý sở liệu, WordPress sử dụng MySQL làm tảng sở liệu (database) + Phần mềm PHPMyAdmin để xem quản lý sở liệu MySQL *Localhost vận hành nào: - Khi cài đặt Localhost vào máy tính rồi, máy tính bạn có phần mềm Webserver để chạy ứng dụng website với địa http://127.0.0.1 Đây địa IP dạng localhost, bạn chạy localhost với đường dẫn http://localhost thông thường cài đặt Localhost, cần sử dụng bạn cần mở bảng điều khiển localhost lên kích hoạt khỏi động ứng dụng kèm - Lưu ý trước cài đặt: + Xóa tồn ứng dụng liên quan tới localhost: Nếu bạn có cài đặt phần mềm khác liên quan đến việc làm localhost PHP, MySQL xóa hết Và bạn khơng nên cài XAMPP Windows Server cài đặt IIS + Tắt tường lửa: Nếu máy tính bạn có cài đặt tường lửa từ Windows hay từ phần mềm Antivirus khác tắt chặn cổng 80 ứng dụng webserver + Tắt UAC Windows: Nếu máy tính bạn dùng window có bật chức User Account Control tắt dùng localhost để tránh vấn đề giới hạn quyền * Hướng dẫn cài đặt Localhost: - Để cài đặt Localhost có nhiều cách phần mềm, xử dụng XAMPP để cài đặt localhost vì: + XAMPP hồn tồn miễn phí + Dễ sử dụng + Hỗ trợ hệ điều hành thông dụng Windows, Mac, Linux Để tải XAMPP, ta truy cập vào địa chỉ: https://www.apachefriends.org chọn phiên XAMPP phù hợp với hệ điều hành với máy tính sử dụng, nên chọn phiên PHP 8.0.9 Lưu ý XAMPP có phiên cho hệ điều hành 32bit 64bit hoạt động bình thường Hình 2.1 Tải XAMPP từ trang https://www.apachefriends.org Hình 2.22 Tạo Database Cpanel Hình 2.23 Thêm User Cpanel Và sau đó, thực bước upload file Wordpress lên File Manager Cpanel 17 Hình 2.24 Upload file Wordpress Ở bước tiếp theo, ta thực Import cho Database vừa tạo hình 2.22 Hình 2.25 Import sở liệu cho Database Để website nhận sở liệu deploy lên, ta cần phải thực bước Add User to Database MySQL Databases hình đây: 18 Hình 2.27 Cấu hình lại wp-config.php Cuối bước thay đổi giá trị cột option_value từ: localhost:81/khanhtn sang tên miền đăng ký sử dụng khanhtrang.online wp_options database tạo trước Hình 2.28 Thay đổi tên miền 19 CHƯƠNG III.THIẾT KẾ GIAO DIỆN V KIỂM THỬ 3.1 Giao diện người dùng 3.1.1 Trang chủ 20 21 Hình 3.1 Trang chủ Mơ tả: trang chính, chứa tất mục để khách hàng thoải mái lựa chọn Trang chủ cung cấp đầy đủ thông tin loại sản phẩm với giao diện gần gũi, thân thiện dễ sử dụng Từ khách hàng đặt mua sản phẩm yêu thích, phù hợp với túi tiền mình, … Bạn góp ý trị chuyện trực tiếp với cửa hàng, website ln ln hiển thị thông báo sản phẩm khuyến mãi, HOT nhất, … 3.1.2 Menu Hình 3.2 Menu Mơ tả: Phần menu web gồm có mục nhỏ, bao gồm: Trang chủ, Danh mục sản phẩm, In tên lên sản phẩm theo yêu cầu, Sale, Liên hệ Trong phần danh mục sản phẩm gồm có: Thiệp hộp diêm, Lót ly đĩa than, Móc khóa, Leather chamrm, Bao da airpod case, Board games, Cards games Nhiệm vụ: giúp cho khách hàng nắm rõ danh mục có Shop 3.1.3 Trang đăng nhập 22 Hình 3.3 Trang đăng nhập 3.1.4 Trang liên hệ 23 24 Hình 3.5 Trang liên hệ Mơ tả: liên hệ với quản trị viên Nhiệm vụ: giúp khách hàng liên hệ lại với trang quản trị để giải đáp thắc mắc 3.1.6 Trang chi tiết sản phẩm Hình 3.6 Trang chi tiết sản phẩm Mơ tả: Hiển thị chi tiết thông tin sản phẩm xem Nhiệm vụ: Giúp cho khách hàng nắm rõ thông tin chi tiết sản phẩm xem 3.1.7 Trang giỏ hàng 25 Hình 3.7 Trang giỏ hàng Mơ tả: liệt kê sản phẩm thêm vào giỏ Nhiệm vụ: liệt kê sản phẩm mà khách hàng lựa chọn 3.1.8 Trang tốn 26 Hình 3.8 Trang tốn Hướng dẫn bước thực toán trang tốn Bước 1: Điền thơng tin trước tốn, nhập mã ưu đãi có Bước 2: Chọn hình thức tốn Bước 3: Tiến hành đặt hàng qua phương thức toán chọn 3.2 Trang quản trị hệ thống 27 Hình 3.11 Trang quản trị hệ thống Mô tả: người quản trị sử dụng tài khoản để đăng nhập vào hệ thống Nhiệm vụ: giúp người quản trị bắt đầu với hệ thống 3.3 Thông tin phần mềm 3.3.1 Giao diện sử dụng (Theme) Hình 3.13 Giao diện sử dụng (Theme) Giao diện Flatsome: cung cấp đầy đủ tính thiết kế website bán hàng hoàn chỉnh 3.3.2 Các plugin sử dụng (10 plugin) 28 Hình 3.14 Các plugin sử dụng (10 plugin) Plugin WooCommerce: Tạo sẵn tính liên quan đến thương mại điện tự (chi tiết sản phẩm, giỏ hàng, toán, …) số tính khác liên quan đến bán hàng Ngồi Website sử dụng plugin khác liên quan đến WooCommerce nhằm tạo trang web bán hàng hoàn chỉnh 29 KẾT LUẬN Kết nhóm em đạt được: * Đối với người dùng:  Các cách tìm kiếm, tra cứu theo chủ đề khác nhau, kết hợp nhiều chủ đề theo ý khách hàng  Xem chi tiết thông tin sản phẩm  Cho phép khách hàng đăng ký thông tin để thực việc mua sản phẩm  Kiểm tra tính hợp lệ khách hàng đăng nhập hệ thống  Tạo đơn đặt hàng  So sánh sản phẩm  Yêu thích sản phẩm  Gửi mail đặt hàng thành công * Đối với người quản trị:  Xem thông tin đề mục cần quản lý như: Tài khoản, sản phẩm, đơn hàng  Đưa form để nhập liệu loại tư liệu  Có thể sửa đổi, cập nhật liệu  Trong việc thêm sản phẩm chương trình tự động sinh mã sản phẩm, điều tiện lợi cho người quản trị liệu đồng  Các chức thực thông qua giao diện web  Có thể nhập xuất liệu Excel  In đơn hàng duyệt Vấn đề website phục vụ việc quảng cáo Từ đó, bên cạnh việc thương mại vấn đề cần phải tập trung thu hút khách hàng Do vậy, thời gian sau cần bổ sung chức năng: xử lý hóa đơn tự động, tối ưu tốc độ website Quản lý kho (kiểm tra lượng sản phẩm tồn kho tự động) Bổ sung thêm số chức kiểm tra liệu nhập, thay đổi mật mã truy cập khách hàng nhà quản trị Mặc dù cố gắng hoàn chỉnh yêu cầu báo cáo em nhiều thiếu sót, em mong nhận bảo hướng dẫn thầy cô để giúp đỡ xem xét, đề xuất cho em thêm ý kiến bổ sung vấn đề phục vụ cho việc xây dựng website để em hồn chỉnh Em xin chân thành cảm ơn quý thầy cô! 30 TI LIỆU THAM KHẢO [1] Th.S Bùi Minh Quân; Giáo trình phát triển phần mềm Mã Nguồn Mở; Hà Nội [2] https://tailieu123.org/view/bao-cao/php/bao-cao-phat-trien-ma-nguon-mophp [3] https://tailieu123.org/view/bao-cao/php/bao-cao-phat-trien-ma-nguon-mophp [4] https://tailieu.vn/doc/bai-giang-mon-phat-trien-phan-mem-ma-nguon-moopen-source-software-development 900185.html [5] http://tailieu.tv/tai-lieu/giao-trinh-phat-trien-phan-mem-ma-nguon-mochuong-2-gioi-thieu-ve-phan-mem-ma-nguon-mo-bui-minh-quan-39424/ [6] Video hướng dẫn xây dựng website bán hàng: http://itexpressvn.com/vi/tintuc/video-huong-dan-thiet-ke-website-ban-hang-bang-asp.net-tu-a-z-142.html 31 ... mạng xã hội, phương tiện truyền thông Nhưng hướng lạ xây dựng Website cịn tuyệt vời hơn, giúp cho thỏa sức sáng tạo nên điều mẻ, xây dựng Website, ta thoải mái chia sẻ điều thú vị, tạo nên nội... cận đóng góp, đẩy mạnh phát triển phổ biến trang web Việt Nam, nhóm em tìm hiểu thực ? ?Xây dựng website bán đồ thủ công mỹ nghệ” thử nghiệm việc kinh doanh nhóm CHƯƠNG I TỔNG QUAN VỀ PHẦN MỀM MÃ... http://tailieu.tv/tai-lieu/giao-trinh-phat-trien-phan-mem-ma-nguon-mochuong-2-gioi-thieu-ve-phan-mem-ma-nguon-mo-bui-minh-quan-39424/ [6] Video hướng dẫn xây dựng website bán hàng: http://itexpressvn.com/vi/tintuc/video-huong-dan-thiet-ke -website- ban-hang-bang-asp.net-tu-a-z-142.html 31