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

NỘI DUNG VÀ KẾT QUẢ NGHIÊN CỨU

XÂY DỰNG HỆ THỐNG 1.1 Khái quát về cửa hàng

1.1.1 Cửa hàng chuyên tư vấn thiết kế và thi công nội thất tủ bếp Domino

- Tên công ty: Công ty TNHH Sản Xuất và Xây Dựng DOMINO

- Địa chỉ: Đường Nguyễn Du, Phường Nông Trang, Thành Phố Việt Trì, Tỉnh

- Ngày thành lập: Tháng 6 Năm 2012

- Giám Đốc: Tạ Thanh Hiếu

- Quy mô công ty: Từ 30-50 nhân viên

- Xưởng sản xuất của DOMINO đặt tại:

- Cơ sở 1: Khu 1, phường Vân Cơ – TP Việt Trì – Tỉnh phú Thọ

- Cơ sở 2: Đường Võ Nguyên Giáp – Phố Hoàng Diệu – tp Thái Bình

1.1.2 Giới thiệu về cửa hàng

Là doanh nghiệp hàng đầu trong lĩnh vực cung cấp nội thất tủ bếp, chúng tôi tự hào có nhiều năm kinh nghiệm phục vụ một lượng lớn khách hàng và hợp tác với các đối tác uy tín Đội ngũ nhân viên trẻ trung, năng động và nhiệt tình của chúng tôi không chỉ am hiểu về thiết kế và sản xuất mà còn chuyên sâu về phong thủy, đảm bảo mang đến sản phẩm chất lượng và phù hợp với nhu cầu của khách hàng.

Với đội ngũ nhân viên dày dạn kinh nghiệm, cửa hàng cam kết thực hiện thi công và lắp đặt tại nhà khách hàng một cách chính xác và hoàn hảo.

TỔNG QUAN VỀ VẤN ĐỀ NGHIÊN CỨU VÀ NỀN TẢNG XÂY DỰNG HỆ THỐNG

Khái quát về cửa hàng

1.1.1 Cửa hàng chuyên tư vấn thiết kế và thi công nội thất tủ bếp Domino

- Tên công ty: Công ty TNHH Sản Xuất và Xây Dựng DOMINO

- Địa chỉ: Đường Nguyễn Du, Phường Nông Trang, Thành Phố Việt Trì, Tỉnh

- Ngày thành lập: Tháng 6 Năm 2012

- Giám Đốc: Tạ Thanh Hiếu

- Quy mô công ty: Từ 30-50 nhân viên

- Xưởng sản xuất của DOMINO đặt tại:

- Cơ sở 1: Khu 1, phường Vân Cơ – TP Việt Trì – Tỉnh phú Thọ

- Cơ sở 2: Đường Võ Nguyên Giáp – Phố Hoàng Diệu – tp Thái Bình

1.1.2 Giới thiệu về cửa hàng

Cửa hàng chuyên cung cấp nội thất tủ bếp đã tích lũy nhiều năm kinh nghiệm trong thiết kế, sản xuất và thi công, phục vụ một lượng lớn khách hàng và các đối tác lớn Đội ngũ nhân viên trẻ trung, năng động và nhiệt tình của chúng tôi có kiến thức sâu sắc về phong thủy, đảm bảo mang đến những sản phẩm chất lượng và phù hợp với nhu cầu của khách hàng.

Đội ngũ nhân viên giàu kinh nghiệm của chúng tôi cam kết mang đến dịch vụ thi công và lắp đặt tại nhà khách hàng một cách chính xác và hoàn hảo.

Tổng quan về thương mại điện tử

1.2.1 Khái niệm thương mại điện tử

Cùng với sự bùng nổ về Internet thì thuật ngữ thương mại điện tử (TMĐT) đã ra đời Có thể định nghĩa về thương mại điện tử như là:

Theo Tổ chức Thương mại thế giới (WTO), thương mại điện tử bao gồm các hoạt động như sản xuất, quảng cáo, bán hàng và phân phối sản phẩm Những sản phẩm này được mua bán và thanh toán trực tuyến, nhưng việc giao nhận diễn ra một cách hữu hình, bao gồm cả hàng hóa vật lý và thông tin số hóa qua mạng Internet.

Thương mại điện tử có phạm vi rất rộng, bao trùm hầu hết các lĩnh vực kinh tế, với việc mua bán hàng hóa và dịch vụ chỉ là một trong nhiều ứng dụng của nó Theo nghĩa hẹp, thương mại điện tử chỉ đề cập đến các hoạt động thương mại diễn ra trên mạng máy tính mở như Internet Chính các giao dịch thương mại qua Internet đã dẫn đến sự hình thành của thuật ngữ Thương mại điện tử.

Thương mại điện tử (TMĐT) là quá trình thực hiện một phần hoặc toàn bộ hoạt động thương mại thông qua các phương tiện điện tử Mặc dù vẫn giữ bản chất giống như các hoạt động thương mại truyền thống, nhưng TMĐT mang lại tốc độ và hiệu quả cao hơn, giúp tiết kiệm chi phí và mở rộng không gian kinh doanh.

1.2.2 Lợi ích của việc sử dụng thương mại điện tử

Sử dụng phương tiện này hỗ trợ người dùng trong việc tìm kiếm đối tác, cập nhật thông tin thị trường, giảm chi phí tiếp thị và giao dịch, từ đó giúp mở rộng quy mô sản xuất và hoạt động kinh doanh hiệu quả hơn trong thương trường.

Thương mại điện tử (TMĐT) không chỉ giúp giảm thiểu chi phí bán hàng mà còn tiết kiệm chi phí tiếp thị Với sự hỗ trợ của Internet và các trang web, doanh nghiệp có thể tiếp cận một lượng lớn khách hàng một cách hiệu quả.

Catalogue điện tử trên Web phong phú và thường xuyên được cập nhật, mang lại nhiều thông tin hơn so với catalogue in ấn, vốn có khuôn khổ giới hạn và dễ lỗi thời.

1.2.2.1 Cơ hội đạt lợi nhuận

Việc nắm bắt thông tin phong phú giúp doanh nghiệp xây dựng chiến lược sản xuất và kinh doanh phù hợp với xu hướng phát triển trong và ngoài nước Đặc biệt, các doanh nghiệp vừa và nhỏ có cơ hội mở rộng quan hệ đối tác trên thị trường, từ đó nâng cao nhận thức về thương hiệu công ty.

Thương mại điện tử hiện đang thu hút sự chú ý của nhiều người và doanh nghiệp trên toàn cầu, trở thành động lực quan trọng cho sự phát triển của các doanh nghiệp và nền kinh tế quốc gia.

Thương mại điện tử mang lại cơ hội cho các doanh nghiệp củng cố mối quan hệ hợp tác và thiết lập kết nối tốt hơn với khách hàng Điều này không chỉ giúp nâng cao uy tín mà còn tăng cường sự hiện diện của doanh nghiệp trên thị trường.

1.2.2.3 Các mô hình trong thương mại điện tử

B2B (Business to Business) là hình thức trao đổi mua bán giữa các nhà kinh doanh hoặc giữa các nhà cung cấp và công ty Mô hình này chủ yếu phục vụ cho các tổ chức tìm kiếm đối tác và tạo cơ hội liên lạc giữa nhà cung cấp và khách hàng Trong môi trường kinh doanh B2B, hai bên có thể thương lượng và đạt được thỏa thuận phù hợp.

B2C (Business to Customer) là hình thức mua bán giữa doanh nghiệp và khách hàng, với mục tiêu chính là tạo ra lợi nhuận Mô hình này phổ biến và thường sử dụng các phương thức thanh toán như thẻ tín dụng Tuy nhiên, trong quá trình giao dịch, khách hàng không có khả năng thương lượng với nhà kinh doanh.

C3C (Customer to Customer) là mô hình trao đổi mua bán giữa khách hàng với khách hàng, còn được gọi là môi giới Mô hình này tập trung vào việc đáp ứng nhu cầu tìm kiếm thông tin của khách hàng Hình thức thanh toán trong C3C có thể thực hiện qua thẻ tín dụng.

Từ các mô hình trên, khóa luận của em được thực hiện việc phân tích và cài đặt theo mô hình B2C.

Giới thiệu về ngôn ngữ lập trình PHP và hệ quản trị cơ sở dữ liệu MySQL

PHP là một ngôn ngữ kịch bản máy chủ và là một công cụ mạnh mẽ để tạo các trang Web động và tương tác

PHP là một giải pháp thay thế được sử dụng rộng rãi, miễn phí và hiệu quả cho các đối thủ cạnh tranh như ASP của Microsoft

Khác với các ngôn ngữ khác, các câu lệnh PHP được thực thi trên máy chủ (server)

 Các tệp PHP có thể chứa văn bản, HTML, CSS, JavaScript và mã PHP

 Mã PHP được thực thi trên máy chủ và kết quả được trả về trình duyệt dưới dạng HTML đơn giản

 Các tệp PHP có phần mở rộng ".php"

Với PHP có thể làm được những điều như:

 PHP có thể tạo nội dung trang động PHP có thể tạo, mở, đọc, viết, xóa và đóng tệp trên máy chủ

 PHP có thể thu thập dữ liệu từ biểu mẫu

 PHP có thể gửi và nhận cookie

 PHP có thể thêm, xóa, sửa đổi dữ liệu trong cơ sở dữ liệu

 PHP có thể được sử dụng để kiểm soát truy cập của người dùng

 PHP có thể mã hóa dữ liệu

Tại sao nên chọn dùng PHP để xây dựng web:

 PHP chạy trên nhiều nền tảng khác nhau (Windows, Linux, Unix, Mac OS X, v.v.)

 PHP tương thích với hầu hết tất cả các máy chủ được sử dụng ngày nay (Apache, IIS, v.v.)

 PHP hỗ trợ một loạt các cơ sở dữ liệu

 PHP được sử dụng miễn phí Tải xuống từ trang chủ PHP: www.php.net

 PHP dễ học và chạy hiệu quả ở phía máy chủ

Những cấu trúc PHP căn bản:

 Một thẻ PHP có thể đặt tại bất cứ đâu trong trang

 Một đoạn mã PHP bắt đầu với “ ”

 Một tệp php thường có đuôi mặc định “.php”

 Một tệp PHP thường chứa các thẻ HTML và các đoạn mã PHP

Ví dụ: Dưới đây là 1 trang php đơn giản

Và kết quả hiển thị sẽ là:

1.3.1.2 Những điểm mạnh của PHP

 PHP thực hiện với tốc độ rất nhanh và hiệu quả Một Server bình thường có thể đáp ứng được hơn hàng chục triệu truy cập trong một ngày

PHP hỗ trợ kết nối với nhiều hệ quản trị cơ sở dữ liệu (CSDL) khác nhau như PostgreSQL, Microsoft SQL Server, Oracle, dbm, và filePro Bên cạnh đó, PHP còn cho phép kết nối thông qua ODBC, mở rộng khả năng kết nối với nhiều ngôn ngữ khác mà ODBC hỗ trợ.

PHP sở hữu một hệ thống thư viện phong phú và đang phát triển mạnh mẽ Được thiết kế đặc biệt để xây dựng và phát triển ứng dụng web, PHP cung cấp nhiều hàm tích hợp sẵn, giúp người dùng dễ dàng thực hiện các tác vụ như gửi và nhận email, làm việc với cookie, và nhiều chức năng khác.

 PHP là một ngôn ngữ rất dễ dùng, dễ học và đơn giản hơn nhiều so với các ngôn ngữ khác như Perl, Java

 Đặc biệt, PHP là ngôn ngữ mã nguồn mở Có rất nhiều phần mềm website mã nguồn mở được viết trên nền tảng của PHP như Wordpress, Magento

1.3.2 Giới thiệu về hệ quản trị cơ sở dữ liệu MySQL

MySQL là hệ quản trị cơ sở dữ liệu mã nguồn mở miễn phí, được tích hợp sử dụng chung với apache, PHP

MySQL quản lý dữ liệu thông qua các cơ sở dữ liệu, mỗi cơ sở dữ liệu có thể có nhiều bảng quan hệ chứa dữ liệu

MySQL cung cấp cơ chế phân quyền người sử dụng độc lập, cho phép mỗi người dùng quản lý một hoặc nhiều cơ sở dữ liệu khác nhau Mỗi người dùng được cấp một tên truy cập và mật khẩu riêng để truy cập vào cơ sở dữ liệu.

Khi truy vấn cơ sở dữ liệu MySQL, cần cung cấp tên truy cập và mật khẩu của tài khoản có quyền truy cập vào cơ sở dữ liệu.

Tốc độ: MySQL rất nhanh Những nhà phát triển cho rằng MySQL là cơ sở dữ liệu nhanh nhất mà bạn có thể có

MySQL là một hệ thống cơ sở dữ liệu mạnh mẽ nhưng dễ sử dụng, với quy trình cài đặt và quản trị đơn giản hơn so với các hệ thống lớn khác.

Giá thành: MySQL là miễn phí cho hầu hết các việc sử dụng trong một tổ chức

MySQL hỗ trợ ngôn ngữ truy vấn SQL, là ngôn ngữ chính cho các hệ thống cơ sở dữ liệu hiện đại Người dùng cũng có thể truy cập MySQL thông qua các ứng dụng hỗ trợ ODC (Open Database Connectivity), một giao thức giao tiếp cơ sở dữ liệu do Microsoft phát triển.

Năng lực của hệ thống cho phép nhiều client truy cập đồng thời đến server, đồng thời hỗ trợ việc sử dụng nhiều cơ sở dữ liệu Người dùng có thể tương tác với MySQL qua các giao diện khác nhau để thực hiện truy vấn và xem kết quả, bao gồm các dòng yêu cầu từ khách hàng và trình duyệt web.

MySQL cung cấp khả năng kết nối và bảo mật mạnh mẽ, cho phép truy cập cơ sở dữ liệu từ bất kỳ đâu trên Internet, giúp bạn dễ dàng chia sẻ dữ liệu Tuy nhiên, hệ thống kiểm soát quyền truy cập của MySQL đảm bảo rằng chỉ những người được phép mới có thể xem dữ liệu của bạn, bảo vệ thông tin nhạy cảm một cách hiệu quả.

MySQL có tính linh động cao, hoạt động trên nhiều hệ thống như UNIX và Windows, và tương thích với mọi loại phần cứng, từ máy PC cá nhân đến máy chủ.

MySQL dễ dàng cài đặt trên các hệ điều hành như Microsoft Windows, Linux, Macintosh và Unix Quá trình cài đặt diễn ra nhanh chóng và sau khi hoàn tất, các tính năng như tự động mở rộng không gian, tự khởi động lại và cấu hình động đã được thiết lập sẵn, giúp người quản trị cơ sở dữ liệu làm việc hiệu quả Ngoài ra, MySQL còn cung cấp các công cụ quản lý đồ họa hỗ trợ người dùng trong việc quản lý cơ sở dữ liệu.

DBA có khả năng quản lý và sửa chữa hoạt động của nhiều server, điều hành các tác vụ thiết kế dữ liệu và ETL, đồng thời thực hiện quản trị cơ sở dữ liệu một cách toàn diện Họ cũng đảm nhiệm việc quản lý công việc và thực hiện các kiểm tra cần thiết.

1.3.2.3 Tại sao ta sử dụng hệ cơ sở dữ liệu MySQL?

MySQL là hệ quản trị cơ sở dữ liệu nhanh chóng và mạnh mẽ, lý tưởng cho việc lưu trữ dữ liệu trên web và phát triển trang thương mại điện tử Với khả năng hỗ trợ xuất sắc về tốc độ cho các cơ sở dữ liệu cỡ trung bình, MySQL đáp ứng đầy đủ nhu cầu của người dùng.

MySQL liên tục được cải tiến với tần suất đáng ngạc nhiên, nhờ vào việc các nhà phát triển thường xuyên cập nhật và bổ sung các tính năng hữu ích.

Sự kết hợp giữa PHP và MySQL tạo ra một nền tảng vững chắc cho phát triển trang web Ngày càng nhiều lập trình viên trong cộng đồng web lựa chọn sử dụng PHP và MySQL, khiến cho chúng trở thành công nghệ phổ biến và được ưa chuộng.

PHP kết hợp với MySQL cho phép phát triển các ứng dụng chéo nền, nghĩa là bạn có thể xây dựng ứng dụng trên hệ điều hành Windows trong khi máy chủ có thể sử dụng Unix.

Giới thiệu về framework Jquery và Bootstrap

1.4.1 Giới thiệu về framework Jquery và cách sử dụng

1.4.1.1 Jquery là gì jQuery là một thư viện JavaScript nhỏ gọn, chạy nhanh jQuery giải quyết các vấn đề tương tác với HTML, bắt sự kiện, hiệu ứng động trở lên rất đơn giản Các tính năng chính jQuery cung cấp gồm:

 Tương tác với HTML/DOM

 Bắt và xử lý sự kiện HTML

 Các hiệu ứng và chuyển động trong HTML

 AJAX (Asynchronous JavaScript and XML)

 Các tiện ích xây dựng sẵn

Hiện nay có nhiều JavaScript Framework xuất hiện nhưng jQuery vẫn là

Framework phổ biến nhất và nhiều thành phần mở rộng cài thêm (extend) Nhiều công ty công nghệ lớn sử dụng jQuery như Google, Microsoft, IBM, Netflix

1.4.1.2 Cài đặt - tích hợp jQuery vào Website Để sử dụng jQuery trong trang HTML, bạn cần đảm bảo trang HTML của mình load chính xác thư viện jQuery bằng cách sử dụng thẻ ở phần

Có 2 cách chính để sử dụng Jquery:

Cách 1: Tải về file js thư viện tại jQuery download (nên chọn bản đã nén có chữ min.js), sau đó tích hợp vào trang bằng thẻ

Ví dụ:

Cách 2: Thay vì phải tải về file thư viện, bạn dùng luôn từ các CDN (Content Delivery Network) giúp cho trang tải nhanh hơn

Dùng CDN Google: Lấy link phiên bản jQuery tại jQuery Google, sau đó tích hợp vào Website, ví dụ:

1.4.1.3 Cách sử dụng Jquery Để sử dụng Jquery thì ta phải dùng những cú pháp jQuery Cú pháp Jquery được thiết kế riêng để chọn các phần tử HTML và thực hiện một số hành động trên (các) phần tử

Cú pháp cơ bản của Jquery: $( selector ) action ()

 Ký hiệu $ để khai báo và truy cập thư viện Jquery

 (selector) dùng để truy vấn hoặc chọn phần tử HTML

 action() để thực hiện hành động trên phần tử HTML

 $(this).hide() - Ẩn phần tử hiện tại

 $("p").hide() - Ẩn tất cả thẻ

 $(".test").hide() - Ẩn tất cả các phần tử có class là “test”

 $("#test").hide() - Ẩn tất cả các phần tử có ID là “test”

Ngoài ra để câu lệnh có thể thực thi được thì tất cả các câu lệnh phải nằm trong thẻ và nằm trong một event của file

Ví dụ: Câu lệnh khi được viết đầy đủ

// Câu lệnh Jquery được viết ở đây

// Câu lệnh Jquery được viết ở đây

1.4.2 Giới thiệu về framework Bootstrap và cách sử dụng

Một website được coi là "Responsive" khi nó có khả năng tương thích với các thiết bị có kích thước màn hình khác nhau, bao gồm máy tính, máy tính bảng và điện thoại di động.

Trước năm 2013, việc phát triển một website tương thích với cả máy tính và điện thoại di động yêu cầu lập trình viên phải tạo hai dự án riêng biệt: một cho người dùng máy tính và máy tính bảng, và một cho người dùng thiết bị di động với màn hình nhỏ Điều này gây khó khăn trong việc bảo trì và nâng cấp website, vì cần thực hiện cho cả hai dự án, đồng thời hai dự án này cũng phải được triển khai trên hai tên miền khác nhau.

Năm 2013 đánh dấu sự bùng nổ của thiết kế "Responsive" khi người dùng ngày càng ưa chuộng các thiết bị cầm tay như máy tính bảng và điện thoại thông minh Hành vi của người tiêu dùng đã chuyển biến, họ ưu tiên đọc tin tức qua các thiết bị di động hơn.

Bootstrap là một framework miễn phí và mã nguồn mở, được phát triển dựa trên HTML, CSS và JavaScript Nền tảng này giúp xây dựng giao diện website tương thích với mọi kích thước màn hình, mang lại trải nghiệm người dùng mượt mà trên các thiết bị khác nhau.

Bootstrap là một trong những framework phổ biến nhất toàn cầu để phát triển website Với việc thiết lập một tiêu chuẩn riêng, Bootstrap đã trở thành lựa chọn ưa thích của nhiều người dùng Do đó, cụm từ "Bootstrap" thường xuyên xuất hiện trong các cuộc thảo luận về phát triển web.

"Thiết kế theo chuẩn Bootstrap"

Những điểm thuận lợi khi sử dụng Bootstrap:

 Rất dễ để sử dụng: Nó đơn giản vì nó được cấu tạo dựa trên trên HTML, CSS

15 và Javascript chỉ cẩn có kiến thức cơ bản là có thể sử dụng bootstrap tốt

Bootstrap cung cấp CSS responsive sẵn có cho các thiết bị như iPhones, tablets và desktops, giúp người dùng tiết kiệm thời gian trong việc phát triển website thân thiện với các thiết bị điện tử và di động.

Bootstrap tương thích với tất cả các trình duyệt phổ biến như Chrome, Firefox, Internet Explorer, Safari và Opera Tuy nhiên, đối với trình duyệt Internet Explorer, Bootstrap chỉ hỗ trợ từ phiên bản IE9 trở lên do IE8 không hỗ trợ HTML5 và CSS3.

1.4.1.2 Cài đặt - tích hợp Bootstrap vào Website

Có 2 cách để ta có thể sử dụng Bootstrap trên website

2 Download Bootstrap packet từ getbootstrap.com

Để sử dụng Bootstrap nhanh chóng, bạn có thể lấy liên kết trực tiếp từ CDN và chèn vào phần đầu của trang web Lưu ý rằng phương pháp này yêu cầu máy tính phải có kết nối internet Bước đầu tiên là sao chép đường dẫn của tệp CSS và đặt nó ở đầu trang web.

Tiếp theo thêm đường dẫn của JS cho lên đầu trang

Như vậy header sau khi được thêm 2 đường dẫn này thì trang web đã có thể sử dụng được Bootstrap

Cách 2: Tải thư mục đầy đủ của bootstrap từ đường dẫn getbootstrap.com sau đó thêm đường dẫn file đã tải về vào trong header

MÃ NGUỒN MỞ WORDPRESS, HOST VÀ DOMAIN

Tổng quan về Wordpress

2.1.1 Mã nguồn mở Wordpress là gì?

WordPress là phần mềm mã nguồn mở (Open Source Software) được phát triển bằng ngôn ngữ lập trình PHP và sử dụng hệ quản trị cơ sở dữ liệu MySQL, đây là bộ đôi ngôn ngữ lập trình website phổ biến nhất hiện nay Được ra mắt vào ngày 27/5/2003 bởi Matt Mullenweg và Mike Little, WordPress hiện nay thuộc sở hữu và được phát triển bởi công ty Automattic, có trụ sở tại San Francisco, California, Hoa Kỳ.

WordPress là mã nguồn mở bằng ngôn ngữ PHP, phổ biến trong việc tạo blog cá nhân nhờ tính dễ sử dụng và nhiều tính năng hữu ích Sự gia tăng người dùng và sự tham gia của các lập trình viên đã giúp phát triển WordPress với nhiều tính năng tuyệt vời Đến năm 2019, WordPress đã trở thành một hệ quản trị nội dung (CMS) được công nhận rộng rãi.

WordPress là một hệ thống vượt trội giúp người dùng dễ dàng tạo ra nhiều loại website khác nhau, bao gồm blog, website tin tức, giới thiệu doanh nghiệp, thương mại điện tử và cả những website phức tạp như đặt phòng khách sạn, thuê xe, hay đăng dự án bất động sản Hầu hết các hình thức website quy mô nhỏ và vừa đều có thể được triển khai trên nền tảng này.

WordPress không chỉ phù hợp với các dự án nhỏ mà còn được sử dụng bởi khoảng 25% trong số 100 website lớn nhất thế giới, bao gồm các trang nổi tiếng như TechCrunch, Mashable, CNN, BBC America, Variety, Sony Music, MTV News, Bata và Quartz.

Những thông tin bên ngoài về Wordpress:

 Trên thế giới, có khoảng 25 bài viết được đăng lên các website sử dụng WordPress mỗi giây

 Số lượng website làm bằng WordPress chiếm 27% tổng số lượng website trên thế giới

 Trong số 100% các website sử dụng mã nguồn CMS, WordPress chiếm 60%

 Phiên bản WordPress 4.0 đạt hơn 16 triệu lượt tải chỉ sau khoảng hai tháng

 WordPress đã được dịch sang 169 ngôn ngữ khác nhau, bao gồm phiên bản Tiếng Việt được dịch đầy đủ

 Chỉ tính các giao diện (hay còn gọi là theme) miễn phí trên thư viện WordPress.org thì đã có hơn 2.700 themes khác nhau

2.1.2 Tại sao lại dùng mã nguồn mở Wordpress

WordPress được thiết kế cho người dùng phổ thông, không cần nhiều kiến thức lập trình Giao diện quản trị trực quan và các thao tác đơn giản giúp bạn nhanh chóng làm quen với việc quản lý website Việc cài đặt WordPress cũng rất dễ dàng; bạn có thể tự cài đặt trên máy chủ riêng chỉ với vài cú click và vận hành website một cách dễ dàng.

Cộng đồng hỗ trợ đông đảo

WordPress là một mã nguồn CMS mở phổ biến nhất thế giới, mang lại sự hỗ trợ từ cộng đồng người dùng Nếu bạn có khả năng tiếng Anh tốt, việc tìm kiếm giải pháp cho các vấn đề gặp phải trên Google trở nên dễ dàng với vài từ khóa tìm kiếm.

Plugin mở rộng là thành phần bổ sung cho WordPress, giúp nâng cao tính năng của trang web Với số lượng người dùng lớn, thư viện plugin của WordPress rất phong phú, bao gồm cả các lựa chọn miễn phí và trả phí, cho phép người dùng dễ dàng tìm thấy hầu hết các tính năng phổ biến thông qua các plugin này.

Dễ phát triển cho lập trình viên

Nếu bạn có kiến thức về HTML, CSS và PHP, việc mở rộng website WordPress trở nên dễ dàng với nhiều tính năng hữu ích WordPress là mã nguồn mở, cho phép bạn dễ dàng nắm bắt cách hoạt động và phát triển thêm các tính năng cho trang web của mình.

Với hàng nghìn hàm có sẵn, bạn có thể dễ dàng sử dụng và tùy chỉnh chúng thông qua filter hook, giúp quy trình làm việc của lập trình viên chuyên nghiệp trở nên thuận tiện hơn khi ứng dụng vào WordPress.

Hỗ trợ nhiều ngôn ngữ

Mã nguồn WordPress hiện nay hỗ trợ nhiều gói ngôn ngữ, bao gồm cả tiếng Việt Mặc dù mỗi giao diện và plugin có ngôn ngữ riêng, bạn vẫn có thể dễ dàng tự dịch chúng bằng các phần mềm hỗ trợ.

2.1.3 Những nét nổi bật của Wordpress

 Hệ thống Plugin phong phú và không ngừng cập nhật, ngoài ra người dùng có thể viết Plugin hoặc tích hợp code vào Wordpress

 Được phát triển bằng nhiều ngôn ngữ (hỗ trợ tiếng việt)

 Cập nhật phiên bản liên tục, cộng đồng hỗ trợ lớn

 Có hệ thống Theme đồ sộ, nhiều theme chuyên nghiệp có khả năng SEO tốt

 Việc quản lý blog, quản lý các bài viết rất thuận tiện giống như các phần mềm thiết kế website chuyên nghiệp

Tích hợp khả năng hiển thị các tệp PDF, DOC và PowerPoint trực tiếp trong nội dung bài viết, bài viết này đặc biệt hỗ trợ Latex - công cụ soạn thảo công thức toán học, cho phép người dùng dễ dàng viết và trình bày công thức toán học ngay trên blog của mình.

WordPress cung cấp 23 Widget hữu ích cho việc nâng cao trải nghiệm người dùng, bao gồm Thống kê số truy cập blog, Các bài viết mới nhất, Bài viết nổi bật, và Các bình luận mới nhất Người dùng cũng có thể dễ dàng liệt kê các chuyên mục, trang, và danh sách liên kết, cũng như theo dõi số bài viết theo từng tháng Ngoài ra, WordPress còn có 79 theme đa dạng để người dùng lựa chọn, giúp tùy chỉnh giao diện blog một cách linh hoạt.

WordPress không chỉ được sử dụng để xây dựng các trang tin tức và blog mà còn có thể phát triển các website thương mại điện tử phục vụ cho việc bán hàng online Tuy nhiên, khi so sánh với các nền tảng khác, WordPress không thực sự nổi bật trong lĩnh vực thương mại điện tử.

WordPress không chỉ cung cấp thống kê số lượng truy cập hàng ngày cho toàn bộ blog mà còn cho từng bài viết cụ thể Dựa vào những số liệu này, chủ blog có thể xác định hướng đi cho các nội dung tiếp theo, từ đó nâng cao chất lượng và sự hấp dẫn của bài viết.

Các bình luận sẽ được duyệt trước khi đăng, và những bình luận không phù hợp có thể bị xóa Nếu phát hiện bình luận là spam, địa chỉ IP của người gửi sẽ bị chặn không cho gửi bình luận vào blog trong tương lai.

Giới thiệu về Domain và Host

Để Website có thể hoạt động được thì cần có 3 phần:

1 Thiết kế Website: Chính là dữ liệu, nội dung của website bao gồm các hình ảnh, bài viết và các file mã lệnh hay còn gọi là mã nguồn - source code Ví dụ như mã nguồn mở: Wordpress

2 Tên miền: Hay còn gọi là Domain, là địa chỉ của trang web để mọi người có thể truy cập

3 Hosting: Nơi lưu trữ dữ liệu cho website trên internet

2.2.1 Tên miền – Domain là gì?

Tên miền là địa chỉ website mà người dùng nhập vào thanh URL để truy cập trang web, giống như địa chỉ của một ngôi nhà Internet là mạng lưới lớn gồm các máy tính kết nối qua cáp, và mỗi máy tính được cấp một địa chỉ IP (IP Address) để phân biệt, thường là một dãy số phân tách bởi dấu chấm, ví dụ: 66.249.66.1.

Máy tính có khả năng phân biệt và ghi nhớ các dãy số, nhưng con người thường gặp khó khăn trong việc nhớ các chuỗi số này để truy cập vào các website Vì vậy, tên miền (domain) đã được phát triển như một giải pháp hiệu quả để giúp người dùng dễ dàng kết nối với các trang web trên Internet.

Một tên miền là chuỗi ký tự chữ giúp người dùng dễ dàng ghi nhớ địa chỉ website Thay vì phải nhập một dãy số dài khi truy cập vào một trang web, bạn chỉ cần gõ tên miền của nó.

Ví dụ: google.com.vn

2.2.2 Hosting hay Web hosting là gì?

Hosting hay web hosting là dịch vụ lưu trữ tất cả các tệp của website, bao gồm bài viết, hình ảnh và mã nguồn, giống như ngôi nhà nơi website của bạn tồn tại.

Nếu coi domain như địa chỉ nhà của bạn, thì hosting chính là ngôi nhà mà địa chỉ đó dẫn đến Mọi website trên internet đều cần một dịch vụ web hosting để hoạt động.

Khi người dùng nhập tên miền của bạn vào trình duyệt, nó sẽ ngay lập tức được chuyển đổi thành địa chỉ IP của máy chủ lưu trữ website của bạn.

Máy tính lưu trữ các tệp của website và trả về kết quả cho trình duyệt người dùng, nơi này được gọi là hosting hoặc server Một server có thể chứa nhiều hosting khác nhau Các công ty web hosting cung cấp dịch vụ lưu trữ và duy trì website, đồng thời đưa ra nhiều kế hoạch hosting khác nhau cho khách hàng.

2.2.3 Vậy thì Domain và web hosting liên hệ với nhau như thế nào?

Tên miền domain và hosting là 2 dịch vụ hoàn toàn khách nhau Tuy nhiên, phải cần có cả 2 yếu tố đó thì website mới hoạt động được

Hệ thống tên miền giống như một danh bạ khổng lồ được cập nhật liên tục, với mỗi tên miền gắn liền với địa chỉ lưu trữ các tệp tin của từng website.

Không có tên miền thì sẽ không có cách nào để tìm ra website và nếu không có hosting thì bạn không cách nào để xây website được

2.2.4 Làm thế nào để thiết lập 1 trang web từ domain và hosting Để dựng 1 website bạn sẽ cần cả tài khoản domain và web hosting Nếu chỉ mua tên miền sẽ chỉ đảm bảo cho bạn quyền được sử dụng tên miền cụ thể đó trong một khoảng thời gian nhất định (thường là 1 năm)

Để lưu trữ tất cả các tệp của website, bạn cần có hosting Sau khi đã thiết lập hosting, hãy cập nhật cài đặt tên miền và trỏ tên miền đó về công ty dịch vụ web hosting mà bạn đang sử dụng.

Bạn có thể dễ dàng mua tên miền và hosting từ một nhà cung cấp duy nhất Hơn nữa, việc chuyển website giữa các hosting khác nhau chỉ yêu cầu bạn chuyển các tệp và dữ liệu Sau khi hoàn tất, bạn chỉ cần điều chỉnh cài đặt tên miền để trỏ đến nhà cung cấp hosting mới.

Ví dụ: Bạn mua 1 tên miền từ WordPress.com và sau đó muốn chuyển sang dạng web tự lưu trữ WordPress.org

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

Phân tích và thiết kế hệ thống

Trước khi bắt tay vào thiết kế website bán hàng, việc phân tích và thiết kế hệ thống là rất quan trọng Điều này giúp chúng ta dễ dàng hình dung và định hình hoạt động của website, từ đó tạo nền tảng vững chắc cho quá trình xây dựng trang sau này.

Sơ đồ phân tích thiết kế trang web tubepdomino.vn mô tả quy trình từ khi khách hàng truy cập trang web qua trình duyệt cho đến khi hoàn tất việc đặt hàng và gửi đơn hàng đến cửa hàng.

Cài đặt hệ thống

3.2.1 Yêu cầu khi cài đặt

 Nếu cần lưu trữ thêm dữ liệu thì tùy thuộc vào dung lượng trống còn lại trên ổ đĩa

 Đề nghị: 1 GB trở lên

 Hệ điều hành: Linux, Windows (Linux và Windows là các lựa chọn phổ biến nhất và được Wordpress hỗ trợ tốt nhất)

 Web Server: Apache Wordpress có thể chạy trên các Web Server khác như:

Các máy chủ web như IIS, Lighttpd, Nginx, Cherokee, Zesus và LiteSpeed cần được cấu hình chính xác để hỗ trợ chạy các file PHP Mặc dù không có yêu cầu bắt buộc về phiên bản của máy chủ web, người dùng nên sử dụng phiên bản mới nhất để đảm bảo tất cả các tính năng của Moodle hoạt động hiệu quả.

 PHP: Phiên bản 5.3.3 trở lên Một số các PHP extention và PHP setting là bắt buộc cho việc cài đặt

MySQL và PostgreSQL là hai loại cơ sở dữ liệu chính được sử dụng để phát triển và kiểm thử các tính năng cũng như plugin của WordPress Mặc dù MS SQL Server hỗ trợ đầy đủ các tính năng, một số plugin tùy chọn có thể không hoạt động trên cơ sở dữ liệu này Oracle không được hỗ trợ đầy đủ và không được khuyến nghị sử dụng Để cài đặt WordPress, bạn cần các PHP extension tương ứng với loại cơ sở dữ liệu mà bạn chọn.

1) MySQL: Phiên bản 5.1.33 trở lên

2) PostgreSQL: Phiên bản 8.3 trở lên

3) MSSQL: Phiên bản 9.0 trở lên

4) Oracle: Phiên bản 10.2 trở lên (không khuyến nghị)

5) Trình duyệt web: Firefox, Internet Explorer 9 trở lên, Safari 6 trở lên, Chrome

11 trở lên (các phiên bản thấp hơn vẫn có thể sử dụng được Wordpress nhưng sẽ không được hỗ trợ đầy đủ)

3.2.2 Chuẩn bị Text Editor hoặc IDE để lập trình

Text editor (dịch sang tiếng Việt: chương trình hiệu chỉnh văn bản) là một loại phần mềm giúp ta làm việc với văn bản thuần tuý trong tập tin

Khi lập trình, mã nguồn cần được lưu dưới dạng văn bản thuần túy, vì vậy việc sử dụng các phần mềm chỉnh sửa văn bản (text editor) là rất quan trọng để hỗ trợ quá trình lập trình hiệu quả.

Hình ảnh 3.2: Text Editor Notepad++

Hiện nay, có nhiều phần mềm chỉnh sửa văn bản khác nhau, mỗi loại mang đến những tính năng nổi bật giúp nâng cao hiệu quả làm việc trong quá trình chỉnh sửa văn bản.

Trên hệ điều hành Windows các text editor phổ biến gồm có NotePad và NotePad++ NotePad được cài đặt mặc định trên các máy tính chạy hệ điều hành

Để sử dụng NotePad++, bạn cần truy cập trang chủ để tải và cài đặt phần mềm này trên máy tính NotePad++ có nhiều ưu điểm so với NotePad, bao gồm tính năng tô màu cú pháp (code highlight) cho các dòng lệnh khi hiển thị, mặc dù văn bản lưu lại vẫn ở định dạng plain text Ngoài ra, NotePad++ còn hỗ trợ tự động kết thúc các đoạn mã phổ biến, vì vậy tôi chọn sử dụng NotePad++ để lập trình website.

Cài đặt Wordpress

Bước 1: Download gói cài đặt Wordpress tại địa chỉ: https://wordpress.org/latest.zip

Bước 2: Giải nén gói cài đặt Wordpress vào thư mục htdocs trên Xamp Server Sau đó bạn giải nén ra sẽ có được một thư mục mang tên “wordpress”

Sau khi giải nén, bạn sẽ thấy thư mục WordPress chứa các thư mục như wp-admin, wp-includes, wp-content cùng với các tập tin như index.php và wp-config-sample.php Tất cả các tập tin và thư mục này được gọi là mã nguồn WordPress.

Hình ảnh 3.4: Các tập tin sau khi giải nén

Để cài đặt WordPress, bước đầu tiên là tạo một cơ sở dữ liệu (CSDL) rỗng trên phpMyAdmin CSDL này sử dụng MySQL để lưu trữ các dữ liệu cần thiết cho website, bao gồm bài viết và các thiết lập khác.

Bước 4: Chạy website để cài đặt

Sau khi hoàn tất việc sao chép, hãy khởi động Apache và MySQL trong bảng điều khiển của Xampp Tiếp theo, truy cập vào website qua đường dẫn: http://localhost/wordpress.

Lúc này, sẽ hiện ra bảng chọn ngôn ngữ cần cài đặt cho WordPress, hãy chọn là English và ấn Continue

Trong bước tiếp theo, hệ thống sẽ thông báo rằng bạn cần đổi tên file wp-config-sample.php thành wp-config.php và nhập thông tin cơ sở dữ liệu vào đó Hãy nhấn vào nút "Let’s".

Go để nó tự làm việc đó

Hình ảnh 3.6: Giao diện sau khi chọn ngôn ngữ

Để nhập thông tin database trên localhost, bạn cần sử dụng User Name là "root" và để mật khẩu trống Mặc dù có thể thiết lập mật khẩu, nhưng trong trường hợp này không cần thiết Địa chỉ Database Host luôn là "localhost".

Sau khi hoàn tất việc nhập thông tin database, bạn cần nhấn nút Submit để tiến hành bước tiếp theo Nếu màn hình hiển thị như hình dưới, điều đó có nghĩa là bạn đã nhập thông tin database chính xác Hãy nhấn nút Run the install để bắt đầu quá trình cài đặt.

Trong bước cài đặt WordPress, bạn cần thiết lập các thông tin quan trọng cho website, bao gồm tên website, tên tài khoản admin và mật khẩu Sau khi hoàn tất, hãy nhấn nút "Cài đặt WordPress" để tiếp tục.

Và nếu nó hiện chữ Success! như thế này là bạn đã cài đặt thành công, click vào nút Log in để đăng nhập vào bảng quản trị WordPress

Hình ảnh 3.8: Cài đặt thành công

Sử dụng child theme với theme có sẵn trong wordpress

Child Theme được hiểu như là một theme con và nó sẽ kế thừa toàn bộ đặc điểm của theme mẹ (Parent Theme)

Khi sử dụng các theme, việc chỉnh sửa trực tiếp như thay đổi CSS và mã nguồn có thể gây rủi ro lớn Điều này đặc biệt nguy hiểm khi bạn cập nhật theme lên phiên bản mới, vì các thay đổi trước đó sẽ bị mất do các tệp mới ghi đè lên.

Việc sử dụng Child Theme cho phép bạn tùy chỉnh mã và CSS một cách thoải mái mà không lo mất dữ liệu khi cập nhật phiên bản mới Bạn chỉ cần cập nhật theme mẹ, trong khi Child Theme vẫn giữ nguyên các thay đổi của bạn.

3.4.2 Cách child theme hoạt động

Khi tạo một child theme, nếu bạn sao chép một tệp từ thư mục theme mẹ sang thư mục child theme, tệp đó sẽ được thực thi từ thư mục child theme Nếu thư mục child theme thiếu tệp nào, hệ thống sẽ tự động sử dụng tệp tương ứng từ thư mục theme mẹ.

Khi thư mục child theme chỉ chứa file style.css, tất cả các file khác sẽ được thực thi từ thư mục theme mẹ Nếu bạn sao chép file single.php từ thư mục theme mẹ sang child theme, file single.php trong thư mục child theme sẽ được ưu tiên thực thi, trong khi các file khác vẫn được lấy từ thư mục theme mẹ.

File functions.php của theme mẹ sẽ không bị thay đổi khi bạn khai báo thêm file functions.php trong thư mục child theme; thay vào đó, mã trong file functions.php của child theme sẽ được tải song song với mã trong file functions.php của theme mẹ.

Khi sử dụng child theme, bạn chỉ cần sao chép file cần tùy biến vào thư mục child theme và thực hiện chỉnh sửa mà không cần can thiệp vào theme mẹ.

Để tạo một child theme trong WordPress, bạn hãy vào thư mục wp-content/themes và tạo một thư mục mới với tên tùy ý, nhưng nên đặt tên giống với thư mục theme mẹ và thêm chữ "-child" ở phía sau Ví dụ, nếu bạn muốn tạo child theme cho theme twentyseventeen, bạn sẽ đặt tên thư mục là twentyseventeen-child.

Hình ảnh 3.9: Thư mục mẹ và thư mục child theme

Sau đó tạo một file style.css với nội dung giống như bên dưới trong file twentyseventeen-child:

Theme Name:Twenty Seventeen Child

Description: Day la child theme

@import url(" /twentyseventeen /style.css");

Sau đó vào Appearance -> Themes để kích hoạt child theme lên

Hình ảnh 3.10: Child theme hiển thị trong admin

Thêm CSS và JS vào theme

Để thêm CSS vào theme chúng ta sử dụng hàm wp_enqueue_style()

Trong CSS, việc sử dụng hàm wp_enqueue_style() khi tạo theme là rất quan trọng, vì điều này cho phép dễ dàng thay đổi file CSS khi tạo child theme mà không cần chỉnh sửa code của parent theme Bằng cách này, người dùng có thể hủy bỏ (wp_deregister_style()) các file CSS không cần thiết, giúp tùy biến theme một cách linh hoạt và an toàn.

Ví dụ thêm CSS vào theme:

To properly include parent styles in WordPress, use the `wp_enqueue_scripts` action hook along with the `enqueue_parent_styles` function This function calls `wp_enqueue_style` to load the parent theme's stylesheet from the specified directory Similarly, to add JavaScript files, utilize the `wp_enqueue_script` function, which allows you to enqueue scripts such as jQuery from the assets folder of your theme.

3.3.1.min.js', array ( 'jquery' ), 1.1, true);

Sử dụng Plugin Advanced Custom Field

Advanced Custom Fields là một plugin được nhiều lập trình viên WordPress khuyên dùng, giúp rút ngắn thời gian tạo meta box chỉ với vài cú click Việc gọi giá trị custom field để hiển thị trên theme cũng trở nên nhanh chóng nhờ vào một hàm duy nhất mà plugin hỗ trợ Để sử dụng plugin này, người dùng chỉ cần có kiến thức PHP cơ bản.

Advanced Custom Fields không chỉ là một plugin mạnh mẽ mà còn cho phép bạn xuất các trường đã tạo thành mã code riêng, giúp bạn dễ dàng tích hợp vào bất kỳ dự án nào.

Để tìm và cài đặt plugin cho website WordPress, bạn có thể thực hiện theo ba cách: cài trực tiếp từ thư viện trên Dashboard, tải lên file zip của plugin, hoặc upload plugin vào thư mục /wp-content/plugins trên localhost hoặc host Để bắt đầu, hãy truy cập vào Dashboard, chọn Plugins, sau đó nhấn vào Add New.

Hình ảnh 3.11:Plugin Advanced Custom Field

Sau khi hoàn tất cài đặt, bạn truy cập vào Dashboard và chọn Custom Fields để tạo và quản lý các trường (field) Tại đây, bạn có thể tổ chức các trường theo từng nhóm (group) để chúng hiển thị một cách có hệ thống trong khu vực viết bài Để bắt đầu, hãy nhấn nút Add New Trong trang tạo field, bạn sẽ thấy bốn khu vực chính cần chú ý.

 Tên nhóm (Enter title here)

Tại vị trí này, có một tùy chọn "Rules" cho phép người dùng thiết lập các điều kiện hoạt động Ví dụ, bạn có thể cấu hình để nó hiển thị và hoạt động khi thỏa mãn những điều kiện nhất định.

 Options – bao gồm các tùy chọn nâng cao

Hình ảnh 3.12: Giao diện của plugin Advanced Custom Field

Khi tạo field, trước tiên bạn cần điền tên nhóm field để dễ dàng quản lý sau này, không nhất thiết phải trùng với tên field Ví dụ, bạn có thể đặt tên nhóm là "Field phần mềm" Sau đó, để thêm một field vào nhóm, hãy nhấn nút "Add Field" dưới danh sách field.

Hình ảnh 3.13: Add Field để thêm field

Một cửa sổ nhỏ hiện ra, nó sẽ có các tùy chọn sau:

 Field Label: Tên field hiển thị trong phần nhập liệu

 Field Name: Tên của field, để bạn gọi ra ngoài, không chứa ký tự đặc biệt và khoảng trắng Thường nó sẽ tự xác định dựa vào Field Label

 Field Type: Loại field, hay còn gọi là Kiểu nhập liệu

 Field Introductions: Giới thiệu về field, nó sẽ hiển thị ngay bên dưới khung nhập liệu khi viết bài

 Required: Có bắt buộc phải nhập liệu cho field hay không

 Default Value: Giá trị mặc định sẽ áp dụng nếu người dùng không nhập liệu cho field

 Placeholder Text: Chữ sẽ hiển thị ngay bên trong khung nhập liệu

 Prepend: Chữ sẽ hiển thị ngay trước khung nhập field

 Append: Giống prepend nhưng nằm ở phía sau

 Formatting: Có cho phép thực thi HTML từ giá trị hay không

 Character Limit: Giới hạn ký tự của giá trị nhập vào

 Conditional Logic: Thêm các điều kiện dựa vào các field khác Ví dụ như field A có giá trị là abc thì sẽ hiển thị field hiện tại

Hình ảnh 3.14: Các trường field trong plugin

Hình ảnh 3.15: Điền thông tin cho field

Sau khi nhập xong, bạn có thể nhấn nút "Add Field" để thêm các trường khác Tại phần "Location", bạn có thể xem và thiết lập các tùy chọn để xác định trang cụ thể mà trường sẽ xuất hiện.

Hình ảnh 3.16: Lựa chọn nơi field xuất hiện

Như ở hình ảnh ví dụ trên thì field sẽ xuất hiện ở trang Page có tên là “Home Page”

Phần Options sẽ có các tham số như sau:

 Position: Vị trí của nhóm field này

 Order No: Thứ tự hiển thị trong khu vực viết bài

 Hide on Screen: Ẩn màn hình

Hình ảnh 3.17: Phần Options của Custom Field

Nếu bạn tạo custom field cho Post, chỉ cần để mặc định Sau khi chọn xong, hãy ấn nút Publish để hoàn tất khâu tạo field.

Gọi field ra ngoài theme

Để gọi tùy biến custom field ra trang chủ thì sau khi chọn location ở plugin ta vào Page chọn Home Pages để thêm nội dung vào custom field

Hình ảnh 3.18: Chọn Home Page để tùy biến nội dung của field

Hình ảnh 3.19: Điền thông tin lên custom field đã tạo

Trong Advanced Custom Field, để lấy giá trị của trường, bạn chỉ cần sử dụng hàm get_field() (kèm theo echo nếu muốn hiển thị) hoặc có thể sử dụng hàm get_post_meta() như với custom field thông thường.

Ví dụ cấu trúc của hàm get_field() để hiển thị nội dung ra trang chủ:

Để hiển thị ra trang chủ trong Wordpress thì ta viết lệnh này trong file có đường dẫn: twentyseventeen-child/template-parts/page/content-front-page.php

Hình ảnh 3.20: Thông tin của custom field hiển thị ngoài trang chủ

Người dùng có thể dễ dàng tùy biến và thay đổi nội dung trên trang chỉ bằng cách đăng nhập vào admin và chỉnh sửa trong custom field mà không cần phải can thiệp vào mã nguồn.

Xây dựng website bán hàng trực tuyến cho cửa hàng tủ bếp Domino

3.8.1 Các giao diện chính của website

Trang chủ là trang đầu tiên mà người dùng thấy khi truy cập vào một website, tương tự như các trang khác Đây là trang mặc định được tải lên khi bạn nhập địa chỉ web chỉ chứa tên miền.

Trang chủ của một website không có bố cục tiêu chuẩn cố định, nhưng thường được thiết kế bắt mắt và nổi bật hơn so với các trang con, nhằm thu hút và tạo ấn tượng đầu tiên cho người truy cập Ngoài ra, trang chủ còn có chức năng cung cấp các thanh điều hướng thông minh, giúp người dùng dễ dàng truy cập vào các phần khác nhau của website.

Hình ảnh 3.21: Header của trang chủ

Hình ảnh 3.22: Body của trang chủ

Hình ảnh 3.23: Hình ảnh dự án ở trang chủ

Hình ảnh 3.24: Hình ảnh showroom ở trang chủ

Hình ảnh 3.25: Footer của trang chủ

Trang liên hệ là một phần quan trọng của website, đóng vai trò cầu nối giữa khách hàng và nhà bán hàng Thông qua trang này, người tiêu dùng có thể dễ dàng tìm thấy thông tin liên lạc của cửa hàng, bao gồm số chi nhánh, địa chỉ, số điện thoại và email.

Hình ảnh 3.26: Thông tin hiển thị trên trang liên hệ

Hình ảnh 3.27: Địa chỉ của cửa hàng

Hình ảnh 3.28: Footer của trang liên hệ

Trang dự án là một phần quan trọng của website, nơi giới thiệu hình ảnh về các dự án tiêu biểu mà cửa hàng đã thiết kế và lắp đặt cho khách hàng.

Hình ảnh 3.29: Những mẫu dự án mà cửa hàng đã thực hiện

Hình ảnh 3.30: Những mẫu dự án mà cửa hàng đã thực hiện

 Trang danh mục tủ bếp:

Trang danh mục tủ bếp giúp khách hàng dễ dàng lựa chọn mẫu tủ bếp từ danh sách các thiết kế có sẵn tại cửa hàng.

Hình ảnh 3.31: Những mẫu tủ bếp trên trang đặt hàng

- Hiển thị thông tin giới thiệu cũng về sản phẩm và các chi tiết về mẫu sản phẩm

Hình ảnh 3.32: Các hình ảnh và 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

3.2.2 Giao diện trang admin của 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 của website

Hình ảnh 3.35: Giao diện trang admin

3.2.2.1 Sử dụng admin để thay đổi nội dung của trang chủ Để thay đổi nội dung trang như hình ảnh, thông tin hoặc nội dung trong trang cho ta truy cập vào phần Pages

Hình ảnh 3.36: Các trang có trong Pages

Hình ảnh 3.37: Chỉnh sửa nội dung trang chủ

3.8.2 Sử dụng admin để thay đổi nội dung của trang liên hệ

- Để thay đổi nội dung của trang liên hệ ta vào phần Pages và 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 những trang khác có trên trên trang ta làm tương tự

3.8.3 Sử dụng admin để thêm, sửa hoặc xóa một sản phẩm

Khác với các trang liên hệ hay dự án có thông tin cố định, chúng ta sử dụng Page để tạo trang Để tạo ra các sản phẩm, cần tạo mới một custom post type.

52 chứa các sản phẩm ở đây, ta sử dụng custom post type vì nó có khả năng phân loại và phân cấp mà Pages không có được

Hình ảnh 3.40: Vào add new để thêm sản phẩm mới

Hình ảnh 3.41: Thêm ảnh và các thông tin cho sản phẩm

Hình ảnh 3.42: Thêm thông tin chi tiết cho sản phẩm

Sau khi ghi đầy đủ các thông tin về 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 và xóa sản phẩm

Upload wordpress từ localhost lên hosting

3.9.1 Xuất dữ liệu từ local

Để xuất cơ sở dữ liệu (CSDL) sang file sql, bạn cần truy cập http://localhost/phpmyadmin, chọn CSDL và nhấn vào menu xuất (export), sau đó bấm GO để lưu lại file Nếu CSDL quá lớn, hãy nén file dưới định dạng gzip để dễ dàng tải lên hosting Trong trường hợp CSDL của bạn có kích thước lên đến vài GB, bạn có thể gửi file cho nhà cung cấp dịch vụ hosting để họ hỗ trợ nhập (import) giúp bạn.

Hình ảnh 3.45: Xuất dữ liệu trong phpMyAdmin

Bước 2: Import CSDL vào hosting Bạn truy cập vào Cpanel của web hosting và bấm vào mục MySQL Databases để tạo CSDL và user quản lý CSDL

Hình ảnh 3.46: Cpanel của web hosting

Bước 3: Nhập dữ liệu vào phpMyadmin là file ta vừa xuất ra từ local

Hình ảnh 3.47: Nhập dữ liệu trên host

Bước 4: Nhập Database ta vừa tạo ở vào trong MySQL Manager

Hình ảnh 3.48: Nhập database vào mysql manager

3.9.2 Sử dụng FileZilla up load file lên Host

FileZilla Client là phần mềm cho phép người dùng truyền tải dữ liệu giữa máy tính cá nhân và máy chủ web qua Internet, sử dụng giao thức FTP (File Transfer Protocol).

FileZilla là phần mềm lý tưởng cho việc truyền tải tập tin lớn, với khả năng phục hồi từ điểm đứt gãy khi gặp sự cố Nó đảm bảo an toàn cho các tập tin và cho phép người dùng tìm kiếm, chỉnh sửa tập tin từ xa Phần mềm hỗ trợ các giao thức FTP, FTP trên nền SSL/TLS và SFTP, mang lại sự linh hoạt và hiệu quả trong việc quản lý dữ liệu.

1 Sử dụng thanh Quick Connect kết nối đến máy chủ FTP Để kết nối đến một máy chủ FTP bạn cần điền đầy đủ các thông tin vào thanh Quick Connect bao gồm Host, User name, Pass word, Port Nếu nó là một loại máy chủ đặc biệt như máy chủ SFTP thì bạn cần thêm các giao thức ở phía trước của địa chỉ, vi dụ đối với máy chủ SFTP thì địa chỉ sẽ bắt đầu với ‘SFTP: //’

Nhập cổng máy chủ vào mục Port nếu không sử dụng cổng mặc định (21 cho FTP và 22 cho SFTP) Sau khi điền đầy đủ thông tin, nhấn Enter hoặc chọn nút Quick Connect để kết nối với máy chủ.

Hình ảnh 3.49:Thanh Quick Connect trong FileZilla

2 Điều hướng trên máy chủ

Sau khi kết nối thành công, dữ liệu trên Host sẽ hiển thị ở bên phải bảng điều khiển, với tên thư mục nằm ở phía trên và cây thư mục chứa các thư mục trong Host ở phía dưới Bạn có thể truy cập các thư mục trên Host bằng hai cách khác nhau.

- Gõ tên thư mục vào ô Remote Site rồi nhấn Enter

Để thay đổi thư mục trên Filezilla, bạn chỉ cần nhấp vào thư mục trong cây thư mục hoặc nhấp đúp vào thư mục cần chỉnh sửa Quản lý thư mục trên Filezilla tương tự như cách bạn thực hiện trên máy tính thông thường.

Hình ảnh 3.50: Bảng điều khiển tệp trên host

3 Điều hướng trên máy tính của bạn Điều hướng trên máy tính hoạt động gần giống với điều hướng trên máy chủ, các thư mục trong máy tính và cây thư mục local nằm ở phía tay trái của của sổ làm việc

Hình ảnh 3.51: Bảng điều khiển tệp trên máy tính

4 Chuyển file từ máy tính qua host Để chuyển file wordpress từ máy tính sang file host thì bạn chỉ cần vào thư mục wordpress bôi đen toàn bộ thư copy rồi paste sang thư mục public_html Thư mục public_html chính là thư mục chứa toàn bộ dữ liệu ở hosting

Hình ảnh 3.52: Upload file từ máy tính lên Host

5 Thay đổi thông tin cấu hình kết nối đến CSDL

Trên FileZilla, hãy tìm file wp-config.php ở panel bên phải và cập nhật các thông số theo thông tin tài khoản CSDL mà bạn đã tạo, cụ thể là thay đổi dòng define('DB_NAME', 'hoangnd_kitchen');.

/** MySQL database username */ define('DB_USER', 'admin');

/** MySQL database password */ define('DB_PASSWORD', '123456789');

Để cấu hình cơ sở dữ liệu MySQL, bạn cần thay đổi tên cơ sở dữ liệu, tên người dùng và mật khẩu của người dùng quản lý cơ sở dữ liệu Tham số DB_HOST nên giữ nguyên là 'localhost', nhưng có thể thay đổi tùy thuộc vào từng nhà cung cấp dịch vụ.

6 Thay đổi lại đường dẫn trong file htaccess Đây là một bước mà đôi lúc ta dễ bỏ qua Nếu bạn cài đặt Wordpress trong một thư mục bên trong htdocs thì file htaccess của bạn sẽ có nội dung như sau:

After uploading to your hosting, it's essential to change the RewriteBase from /wordpress to / Failing to do this may result in a 500 internal server error when running WordPress.

To update your URLs in WordPress, navigate to the WordPress Admin, click on Settings, then General, and select "Save Changes" to ensure your URLs are refreshed Next, go to Settings, click on Permalink, and hit "Save Changes" again to update all post links.

8.Cập nhật link hình ảnh

Nếu các liên kết hình ảnh và liên kết trong bài viết vẫn là localhost, bạn cần truy cập PHP MyAdmin và thực hiện câu lệnh SQL sau để cập nhật tên miền cho các bài viết trong WordPress.

UPDATE wp_posts SET post_content = REPLACE(post_content,

'localhost/wordpress/', 'www.tubepdomino.vn/');

Trỏ tên miền về hosting

Để truy cập vào website, cần có một địa chỉ tên miền Chúng ta sẽ trỏ địa chỉ IP của host 107.172.48.244 sang tên miền tubepdomino.vn.

Bước 1: Truy cập vào trang admin của nhà đăng ký tên miền chọn tên miền

Để đăng ký tên miền, bước đầu tiên là truy cập vào trang đăng ký Tiếp theo, trong phần "Quản lý DNS", bạn cần nhập địa chỉ IP của hosting vào ô giá trị và sau đó nhấn chọn để thêm bản ghi.

Hình ảnh 3.54: Phần quản lý DNS

Bước 3: Kéo thanh cuộn xuống để kiểm nếu thêm thành công thì các giá trị ta vừa thêm sẽ hiển thị ở đây

Hình ảnh 3.55: Danh sách IP trỏ đến

KẾT LUẬN CHUNG

Sau quá trình nghiên cứu, thiết kế và phát triển, tôi đã hoàn thành việc xây dựng website bán hàng cho cửa hàng Tủ bếp Domino, chuyên cung cấp các sản phẩm tủ bếp chất lượng Kết quả đạt được là một nền tảng trực tuyến hiệu quả, giúp tăng cường khả năng tiếp cận khách hàng và nâng cao doanh thu cho cửa hàng.

 Xây dựng website tubepdomino.vn có giao diện và chức năng đúng với yêu cầu của khách hàng

Khách hàng không chỉ sử dụng trang để bán hàng mà còn có thể tận dụng nó để marketing, quảng bá sản phẩm và giới thiệu doanh nghiệp của mình đến với mọi người.

 Xây dựng được trang web cung cấp các chức năng chính như: Quản lý sản phẩm, quản lý nội dung, tiếp nhận đơn hàng

Với khả năng truy cập không giới hạn, trang web cho phép mọi người ở bất kỳ đâu, sử dụng bất kỳ thiết bị nào chỉ cần có kết nối mạng đều có thể dễ dàng truy cập và khám phá các sản phẩm của cửa hàng, mang lại trải nghiệm mua sắm linh hoạt và tiện lợi.

Sau khi hoàn tất việc bàn giao sản phẩm cho khách hàng, nếu trong quá trình sử dụng website phát sinh lỗi hoặc khách hàng có nhu cầu phát triển thêm chức năng, chúng tôi sẽ tiến hành triển khai các yêu cầu theo mong muốn của khách hàng.