Nhằm giới thiệu các loại của website đến tất cả các khách hàng có nhu cầu mua sắm thiết bị qua mạng và phục vụ công tác quản lý, hoạt động kinh doanh, hệ thống bước đầu sẽ phục vụ cho kh
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 ĐỒ CÔNG NGHỆ “TECHNOLOGY STORE” SINH VIÊN THỰC : HIỆN GIẢNG VIÊN : HƯỚNG DẪN NGÀNH : CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH : CÔNG NGHỆ PHẦN MỀM LỚP : HÀ NỘI, THÁNG 11 NĂM 2023 PHIẾU CHẤM ĐIỂM Sinh viên thực hiện: Chữ ký Ghi chú Họ và tên Giảng Viên Chấm: Chữ ký Ghi chú Họ tên Giảng viên 1: Giảng viên 2: 2 MỤC LỤC CHƯƠNG 1 : GIỚI THIỆU VỀ WEBSITE BÁN ĐỒ CÔNG NGHỆ 6 1.1 : Khảo sát thực trạng .6 1.2 : Giới thiệu cửa hàng bán đồ công nghệ 6 1.3 :Tổng quan về phần mềm mã nguồn mở 7 1.4 :Giới thiệu về PHP và MySQL .8 1.5: Mã nguồn mở Wordpress 9 1.6: XAMPP .12 CHƯƠNG 2 : GIAO DIỆN WEBSITE VÀ PLUGINS SỬ DỤNG 13 2.1 : Giao diện trang web 13 2.1.1 : Đăng ký .13 2.1.2 : Giao diện đăng nhập 13 2.1.3 : Giao diện trang chủ .14 2.1.4 : Giao diện sản phẩm .14 2.1.5 : Giao diện chi tiết sản phẩm 15 2.1.6 : Giao diện “About” .15 2.1.7 : Giao diện Contact 16 2.1.8 : Giao diện Giỏ hàng 17 2.1.9 : Giao diện thanh toán 18 2.2 : Các plugin sử dụng .19 2.2.1 : Plugin cho trang đăng nhập và đăng ký 19 2.2.2 : Plugin Woocommerce 19 2.2.3 : Plugin Click to chat .20 2.2.4: Plugin Checkout 20 2.2.5 : Plugin Elementor 20 2.2.6 : Plugin tích hợp thanh toán cho các ngân hàng tại Việt Nam 21 2.2.7 : Plugin gửi mail 21 2.2.8 : Plugin Starter Templates .22 CHƯƠNG 3 : DEPLOY TRANG WEB LÊN HOST 23 3 DANH MỤC HÌNH ẢNH Hình 1.1 : Logo cửa hàng 7 Hình 1.2 : Logo wordpress .10 Hình 1.3 : Giao diện XAMPP Control Panel 12 Hình 1.4 : Giao diện đăng ký 13 Hình 1.5 : Giao diện đăng nhập 13 Hình 1.6 : Giao diện trang chủ .14 Hình 1.7 : Giao diện trang chủ .14 Hình 1.8 : Giao diện chi tiết sản phẩm 15 Hình 1.9 : Giao diện About us 15 Hình 1.10 : Giao diện contact 16 Hình 1.11 : Giao diện giỏ hàng 17 Hình 1.12 : Giao diện thanh toán 18 Hình 1.13 : Plugin Login Logout Register Menu 19 Hình 1.14 : Plugin Woocommerce 19 Hình 1.15 : Plugin Click to chat .20 Hình 1.16 : Plugin Checkout 20 Hình 1.17 : Plugin Elementor 20 Hình 1.18 : Plugin tích hợp thanh toán 21 Hình 1.19 : Plugin WP Mail 21 Hình 1.20 : Plugin Starter Templates .22 Hình 1.21 : Trỏ domain về host 23 Hình 1.22 : Plugin All-in-one 24 Hình 1.23 : Wordpress trên host .24 Hình 1.24 : Import website .25 4 LỜI MỞ ĐẦU Trong thời đại ngày nay, sự lan tỏa của internet đã trở thành một phần không thể thiếu trong cuộc sống hàng ngày của chúng ta Việc kinh doanh trực tuyến không chỉ là một xu hướng mà còn là điều không thể tránh khỏi để phát triển và thành công trong mọi lĩnh vực kinh doanh Đặc biệt, sở hữu một trang web hoàn hảo không chỉ là công cụ hữu ích mà còn là chìa khóa mở cửa tiến đến thành công, chiếm giữ tới 50% hành trình đến với mục tiêu của chúng ta Với niềm đam mê riêng về công nghệ và sự yêu thích đặc biệt đối với đồ công nghệ, em đã quyết định chọn đề tài "Tìm hiểu về WordPress và Xây dựng Website Bán Đồ Công Nghệ - Technology Store" để hoàn thiện học phần Phần mềm mã nguồn mở Điều này không chỉ là sự kết hợp giữa kiến thức đã được học mà còn là cơ hội để em phát triển một trang web đa dạng, giúp người mua dễ dàng tìm kiếm và mua sắm các sản phẩm công nghệ trực tuyến Trong quá trình thực hiện dự án, em đã nhận được sự hỗ trợ và hướng dẫn nhiệt tình từ phía giảng viên Tuy nhiên, em nhận thức rõ rằng bản thân mình còn nhiều điểm chưa hoàn thiện, mong thầy bỏ qua và bổ sung thầy để đề tài của em trở nên hoàn thiện và chuyên sâu hơn Em xin chân thành cảm ơn! 5 CHƯƠNG 1 : GIỚI THIỆU VỀ WEBSITE BÁN ĐỒ CÔNG NGHỆ 1.1 : Khảo sát thực trạng Nhu cầu mua sắm online tăng mạnh không chỉ ở các bạn trẻ mà ở mọi lứa tuổi Đối tượng chính mà Website “NTD STORE” hay hướng đến là tất cả những người có nhu cầu mua đồ công nghệ để trải nghiệm hoặc tặng cho người thân bạn bè Nhằm giới thiệu các loại của website đến tất cả các khách hàng có nhu cầu mua sắm thiết bị qua mạng và phục vụ công tác quản lý, hoạt động kinh doanh, hệ thống bước đầu sẽ phục vụ cho khách hàng với những chức năng cần thiết nhất để khách hàng có thể đăng ký mua hàng, đồng thời giúp người quản trị dễ dàng quản lý được việc mua bán và nắm bắt thông tin nhanh chóng Một số chức năng cần thiết phải đạt được như sau: Đối với khách hàng: • Hệ thống có thể giúp khách hàng tìm kiếm thiết bị nhanh chóng • Hệ thống đưa ra chi tiết thông tin cho từng loại sản phẩm mà khách hàng muốn xem • Thêm sản phầmvào giỏ hàng, đặt hàng qua mạng Đối với quản trị: • Hệ thống có thể giúp người quản trị, cập nhật thông tin nhanh chóng • Đơn hàng của khách hàng cũng như dữ liệu được đưa về hệ thống • Dễ dàng quản lý, sử dụng website, kiểm kê đơn hàng chính xác, rõ ràng, bảo mật thông tin khách hàng 1.2 : Giới thiệu cửa hàng bán đồ công nghệ Lợi ích đầu tiên khi sở hữu một website bán đồ công nghệ online chính là mở rộng phạm vi tiếp cận đối tượng khách hàng tiềm năng Với sự kết nối qua mạng internet, khách hàng có thể dễ dàng tìm thấy trang web của bạn và khám phá các sản phẩm công nghệ mà bạn đang cung cấp Việc này giúp tăng cơ hội thu hút đối tượng khách hàng đa dạng, không giới hạn bởi địa lý Cửa hàng "NTD Store" tập trung vào cung cấp các sản phẩm công nghệ tiên tiến và đa dạng, phù hợp với nhu cầu của mọi đối tượng người tiêu dùng Từ điện thoại thông minh đến laptop, từ thiết bị gia dụng thông minh đến phụ kiện công nghệ, trang web mang đến một trải nghiệm mua sắm đầy đủ và tiện ích 6 Hình 1.1 : Logo cửa hàng Ngoài ra, chức năng và tiện ích bán hàng trên trang web đóng vai trò quan trọng trong việc thu hút khách hàng Các chức năng như tìm kiếm nhanh chóng, giỏ hàng thuận tiện, thông tin chi tiết sản phẩm và hệ thống thanh toán an toàn đều cần được tối ưu hóa để làm cho trải nghiệm mua sắm trực tuyến trở nên dễ dàng và hấp dẫn Bằng cách này, không chỉ có sự thuận tiện trong quá trình mua sắm mà còn tạo ra sự tin tưởng từ phía khách hàng, từ đó gia tăng khả năng chuyển đổi và duy trì mối quan hệ dài hạn Đồng thời, việc quản trị thông tin và đơn hàng trên trang web cũng trở nên hiệu quả, giúp cửa hàng phát triển một cách bền vững trên thị trường trực tuyến 1.3 :Tổng quan về phần mềm mã nguồn mở Phần mềm mã nguồn mở là những phần mềm được cung cấp dưới cả dạng mã và nguồn, không chỉ là miễn phí về giá mua mà chủ yếu là miễn phí về bản 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 một số nguyên tắc chung quy định trong giấy phép phần mền mã nguồn mở mà không cần xin phép ai, điều mà họ không được phép làm đối với các phần mềm nguồn đóng Nhà cung cấp phần mềm nguồn mở có quyền yêu cầu người dùng trả một số chi phí về các dịch vụ như: bảo hành, huấn luyện, nâng cấp, tư vấn, vv… là những dịch vụ thực sự để phục vụ người dùng, nhưng không được bán các sản phẩm nguồn mở vì nó là tài sản của trí tuệ chung, không phải là tài sản riêng của một nhà cung cấp nào Ưu điểm của phần mền mã nguồn mở: Phần mềm được sao chép hoàn toàn miễn phí, tự do sử dụng chương trình cho mọi mục đích, tự do để nghiên cứu cấu trúc của chương trình, chỉnh sửa phù hợp với nhu cầu, truy cập vào mã nguồn, tự do phân phối lại các phiên bản cho nhiều người, tự do cải tiến chương trình và phát hành những bản cải tiến vì mục đích công cộng Nhược điểm của mã nguồn mở: - Tính bảo mật thấp - Thiếu sáng tạo - Tính tự do – tùy biến không cao Một số mã nguồn mở đang được sử dụng hiện nay là: Joomla, Drupal, Wordpress, Magento, DotNetNuke, … 7 1.4 :Giới thiệu về PHP và MySQL PHP: Hypertext Preprocessor, thường được viết tắt thành PHP là một ngôn ngữ lập trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó rất thích hợp với web và có thể dễ dàng nhúng vào trang HTML Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến nhất thế giới Ngôn ngữ, các thư viện, tài liệu gốc của PHP được xây dựng bởi cộng đồng và có sự đóng góp rất lớn của Zend Inc., công ty do các nhà phát triển cốt lõi của PHP lập nên nhằm tạo ra một môi trường chuyên nghiệp để đưa PHP phát triển ở quy mô doanh nghiệp Hiện nay PHP đã phát triễn đến phiên bản PHP 7 và vẫn đang trên đà phát triển tiếp Trong phiên bản PHP 7 với việc sử dụng bộ nhân Zend Engine mới PHPNG cho tốc độ nhanh gấp 2 lần phiên bản PHP 5 Ngoài ra ở phiên bản này còn thêm vào rất nhiều cú pháp, tính năng mới giúp cho PHP trở nên mạnh mẽ hơn PHP chỉ phân tích các đoạn mã nằm trong những dấu giới hạn của nó Bất cứ mã nào nằm ngoài những dấu giới hạn đều được xuất ra trực tiếp không thông qua xử lý bởi PHP Các dấu giới hạn thường dùng nhất là , tương ứng với dấu giới hạn mở và đóng Các dấu giới hạn cũng đôi khi được sử dụng Mục đích của những dấu giới hạn này là ngăn cách mã PHP với những đoạn mã thuộc ngôn ngữ khác, gồm cả HTML Mọi đoạn mã bên ngoài các dấu này đều bị hệ thống phân tích bỏ qua và được xuất ra một cách trực tiếp Mô hình lập trình PHP: Ứng dụng web sử dụng mô hình ClientServer Mô hình này bao gồm một máy chủ (Server) có nhiệm vụ chia sẻ tài nguyên với máy khách (Client) thông qua mạng Internet Hình ảnh dưới đây cho thấy các thành phần cơ bản của mô hình Client-Server Server có thể chia sẻ các tài nguyên như: tập tin, websites, cơ sở dữ liệu, và email Web server là một máy chủ chia sẻ trang web, và web browser (trình duyệt web) là một phần mềm phía client sử dụng để kết nối tới web server Không phải ngẫu nhiên mà các trang web lớn như Yahoo, Facebook, Wikipedia, Digg, Joomla, WordPress, … lại được viết bằng PHP Chính sự đơn giản, tính hiệu quả và linh động của PHP Đã giúp nó trở thành ngôn ngữ phổ biến trong giới lập trình như hiện nay Cơ sở dữ liệu MySQL đã trở thành cơ sở dữ liệu mã nguồn mở phổ biến nhất trên thế giới vì cơ chế xử lý nhanh và ổn định của nó, sự đáng tin cậy cao và dễ sử dụng Nó được sử dụng mọi nơi –ngay cả châu Nam Cực -bởi các nhà phát triển Web riêng lẻ cũng như rất nhiều các tổ chức lớn nhất trên thế giới để tiết kiệm thời gian và tiền bạc cho những Web sites có dung 8 lượng lớn, phần mềm đóng gói –bao gồm cả những nhà đi đầu trong lĩnh vực công nghiệp như Yahoo!, Alcatel-Lucent, Google, Nokia, YouTube và Zappos.com MySQL không chỉ là cơ sở dữ liệu mã nguồn mở phổ biến nhất trên thế giới, nó còn trở thành cơ sở dữ liệu được chọn cho thế hệ mới của các ứng dụng xây dựng trên nền Linux, Apache, MySQL, PHP/Perl/Python MySQL chạy trên hơn 20 flatform bao gồm: Linux, Windows, OS/X, HP-UX, AIX, Netware, mang đến cho bạn tính linh hoạt trong việc sử dụng - Tính linh hoạt - Tính thực thi cao - Có thể sử dụng ngay - Hỗ trợ giao dịch mạnh - Nơi lưu trữ Web và Data đáng tin cậy - Chế độ bảo mật dữ liệu mạnh - Sự phát triển ứng dụng hỗn hợp - Dễ dàng quản lý - Mã nguồn mở tự do và hỗ trợ 24/7 - Tổng chi phí thấp nhất 1.5: Mã nguồn mở Wordpress WordPress là một hệ quản trị nội dung Mã nguồn mở miễn phí viết bằng ngôn ngữ lập trình PHP cùng cơ sở dữ liệu MySQL hoặc MariaDB WordPress là hậu duệ chính thức của b2/cafelog, được phát triển bởi Michel Valdrighi Mọi người biết đến WordPress đơn giản là để viết Blog, để đăng tải thông tin của mình lên mạng nhưng không đơn giản như vậy, WordPress còn có chức năng như mọi Website khác Nó có thể làm site tin tức, đánh giá, bán hàng, thậm chí là mạng xã hội Các bạn có thể ứng dụng wordpress để tạo cho mình 1 website trên nền wordpress, 1 website được tạo ra nhanh chóng đơn giản mà lại tiện cho việc quảng bá sản phẩm, thông tin, kiến thức … 9 Hình 1.2 : Logo wordpress Khi tạo một website cho riêng bạn có thể sẽ có những lý do riêng, nhưng nếu so với các script và dịch vụ website khác, có thể bạn sẽ thích Wordpress ở những tính năng dưới đây: • Dễ cài đặt, chỉ cần khởi tạo database, upload và thiết lập tham số trong file wp-config.php, sau 1,2 lần click chuột, bạn đã sẵn sàng để viết blog • Không giới hạn số lượng category và sub-category: bạn có thể tạo vô số chuyên mục và các chuyên mục con trong các chuyên mục chính mà không gặp phải bất kì rắc rối nào Tự động xuất RSS và Atom: giúp cập nhật các thông tin về blog của bạn ngay lập tức • Sử dụng giao diện XML RPC để trackback và viết bài từ xa • Có thể đăng bài trên blog từ email • Hỗ trợ plugin và theme: đây là một điểm mạnh nhất của Wordpress Nó tạo cơ hội cho hàng nghìn nhà phát triển cùng tham gia phát triển các plugin và theme cho Wordpress, làm cho nó càng ngày càng phong phú về tính năng và giao diện • Có thể nhập dữ liệu từ Blogger, Blogware, Bunny’s Technorati Tags, DotClear, GreyMatter, Jorome’s Keyword, LiveJournal, Movable Type, TypePad, RSS, Simple Tagging, Textpattern, B2evoluton, v.v Đây là chức năng tuyệt vời nếu như bạn muốn chuyển từ một blog khác sang sử dụng Wordpress, nó giúp lại lấy lại tất cả các bài viết trên các blog khác để chuyển qua Wordpress • Rất nhiều tài liệu hướng dẫn để giúp phát triển thêm tính năng, và nhiều bộ API để mở rộng • Dễ quản lý và duy trì mà chẳng cần phải có nhiều kĩ năng hay kinh nghiệm • Khả năng tìm kiếm trên blog rất tốt • Xuất bản nội dung ngay lập tức bất kể chiều dài của bài viết là bao nhiêu • Hỗ trợ viết blog đa ngôn ngữ • Administration Panel được tổ chức rất tốt với rất nhiều tính năng nhưng lại dễ hiểu và dễ sử dụng • Quản lý liên kết dễ dàng Với sự trợ giúp của các plugin và rất nhiều bộ API, bạn có thể chỉnh sửa Wordpress tùy thích theo nhu cầu của bạn, và thậm chí bạn cũng có thể sử dụng Wordpress để làm một website hoàn chỉnh Wordpress có hàng ngàn plugin và theme, cộng với một đồng người sử dụng cực kì đông đảo 10 Hình 1.3 : Giao diện XAMPP Control Panel 13 CHƯƠNG 2 : GIAO DIỆN WEBSITE VÀ PLUGINS SỬ DỤNG 2.1 : Giao diện trang web 2.1.1 : Đăng ký Hình 1.4 : Giao diện đăng ký 2.1.2 : Giao diện đăng nhập Hình 1.5 : Giao diện đăng nhập 14 2.1.3 : Giao diện trang chủ Hình 1.6 : Giao diện trang chủ 2.1.4 : Giao diện sản phẩm Hình 1.7 : Giao diện trang chủ 15 2.1.5 : Giao diện chi tiết sản phẩm Hình 1.8 : Giao diện chi tiết sản phẩm 2.1.6 : Giao diện “About” Hình 1.9 : Giao diện About us 16 2.1.7 : Giao diện Contact Hình 1.10 : Giao diện contact 17 2.1.8 : Giao diện Giỏ hàng Hình 1.11 : Giao diện giỏ hàng 18 2.1.9 : Giao diện thanh toán Hình 1.12 : Giao diện thanh toán 19 2.2 : Các plugin sử dụng 2.2.1 : Plugin cho trang đăng nhập và đăng ký Plugin cho phép bạn thêm liên kết đăng nhập, đăng xuất, đăng ký và hồ sơ trong menu điều hướng Plugin cung cấp cho bạn nhiều cài đặt khác nhau trong khu vực quản trị mà bạn có thể sử dụng để tùy chỉnh nó Hình 1.13 : Plugin Login Logout Register Menu 2.2.2 : Plugin Woocommerce Plugin này có thể tạo cửa hàng trực tuyến đẹp mắt và hấp dẫn với các chủ đề phù hợp với thương hiệu và ngành nghề Tăng doanh thu thông qua trải nghiệm giỏ hàng được tối ưu hóa để chuyển đổi hiệu quả Tùy chỉnh trang sản phẩm chỉ trong vài phút bằng cách sử dụng các khối sản phẩm linh hoạt Trưng bày hàng hóa vật lý và số, các biến thể sản phẩm Hình 1.14 : Plugin Woocommerce 20