Phần mềm mã nguồn mở đề tài xây dựng website bán đồ công nghệ technology store

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

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

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

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 doanhtrự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âydựng Website Bán Đồ Công Nghệ - Technology Store" để hoàn thiện họcphầ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ẫnnhiệ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!

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ứatuổ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

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ôngtin 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 saoché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 nhucầ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, …

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 chotố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 webserver 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

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ừ 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àiviế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

luôn sẵn sàng góp sức phát triển, điều này làm cho Wordpress ngày càng lớn mạnh thể hiện vai trò số 1 của mình Plugin trong WordPress là một hoặc nhiều đoạn code được bổ sung vào mã nguồn website WordPress Plugin còn được gọi là phần mở rộng của website giúp bạn tùy chỉnh và

bổ sung chức năng cho website WordPress của mình

Có hàng ngàn Plugin với những chức năng khác nhau Chỉ cần bạn có nhu cầu, hầu hết các nhu cầu của bạn đều được Plugin hỗ trợ và sẵn sàng cho bạn sử dụng Bạn có thể dùng Plugin trong WordPress cho nhiều thể loại website khác nhau một cách đơn giản

Plugin là một thành phần không thể thiếu trong website WordPress của bạn Bất kể bạn làm website gì, bạn sử dụng Theme tự Code hay Theme trên mạng thì việc sử dụng Pluign là điều chắc chắn Ngoài việc hỗ trợ xây dựng thêm chức năng cho website Bạn cũng sẽ tìm được những Plugin hỗ trợ cho các vấn đề như: Plugin Seo, Plugin tăng tốc, Plugin tối

ưu website, Plugin bảo mật …

1.6: XAMPP

Xampp là chương trình tạo máy chủ Web (Web Server) được tích hợp sẵnApache, PHP, MySQL, FTP Server, Mail Server và các công cụ như phpMyAdmin Không như Appserv, Xampp có chương trình quản lý khá tiện lợi, cho phép chủ động bật tắt hoặc khởi động lại các dịch vụ máy chủ bất kỳ lúc nào Xampp được sử dụng cho mục đích nghiên cứu, phát triển website qua Localhost của máy tính cá nhân, nó được ứng dụng trong nhiều lĩnh vực từ học tập đến nâng cấp, thử nghiệm Website của các lập trình viên Các ưu điểm của Xampp bao gồm: • Xampp có thể chạy được trên tất cả các hệ điều hành: Từ Crossplatform, Window, MacOS và Linux • Xampp có cấu hình đơn giản cũng như nhiều chức năng hữu ích cho người dùng Tiêu biểu gồm: giả lập Server, giả lập MailServer, hỗ trợ SSL trên Localhost

Xampp tích hợp nhiều thành phần với các tính năng:

- Apache

- PHP (tạo môi trường chạy các tập tin script *.php)

- MySql (hệ quản trị dữ liệu Mysql); Thay vì phải cài đặt từng thành phầntrên, giờ đây các bạn chỉ cần cài Xampp là chúng ta có 1 web server hoànchỉnh

- Mã nguồn mở: Không như Appserv, Xampp có giao diện quản lý khá tiện lợi Nhờ đó, người dùng có thể chủ động bật tắt hoặc khởi động lại các dịch vụ máy chủ bất kỳ lúc nào Tuy nhiên, bởi vì có cấu hình đơn giản nên Xampp không được hỗ trợ cấu hình Module, cũng không có Version MySQL, do đó, đôi khi sẽ mang đến sự bất tiện cho người dùng

Hình 1.3 : Giao diện XAMPP Control Panel

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

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ủ

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

2.1.7 : Giao diện Contact

Hình 1.10 : Giao diện contact

2.1.8 : Giao diện Giỏ hàng

Hình 1.11 : Giao diện giỏ hàng

2.1.9 : Giao diện thanh toán

Hình 1.12 : Giao diện thanh toán

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