TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI

KHOA CÔNG NGHỆ THÔNG TIN



BÀI TẬP LỚN

MÔN: Thực tập tốt nghiệp

Đề tài: Tìm hiểu công nghệ mã nguồn mở wordpress. Phân tích thiết kế và xây
dựng website sử dụng mã nguồn mở WordPress.

Giáo viên hướng dẫn: GV Nguyễn Văn Thắng

Sinh viên thực hiện: Phùng Thế Anh

MSSV: 0974060027

Hà Nội 12/2015

1
 PHỤ LỤC

LỜI MỞ ĐẦU......................................................................................................4

I: Tìm hiểu công nghệ mã nguồn mở wordpress..................................................5

1. Wordpress là gì?....................................................................................................................5
2. Những thành tựu của WordPress..........................................................................................5
3. Ưu và nhược điểm của WordPress........................................................................................6
3.1. Ưu điểm................................................................................................................................6
3.2. Nhược điểm..........................................................................................................................6
4. Các tính năng và giao diện chính của wordpress...........................................................................6
4.1. Các tính năng chính................................................................................................................6
4.2. Giao diện mặc định................................................................................................................7
4.3. Trang quản trị (Dashboard)...................................................................................................9

II. Phân tích và xây dựng website ứng dụng mã nguồn mở Wordpress.............11
1. Phân tích hệ thống...............................................................................................................11
1.1. Chức năng phía frontend.................................................................................................11
1.2. Chức năng phía admin.....................................................................................................12
2. Xây dựng website.................................................................................................................13
2.1. Cài đặt Wordpress trên localhost với Xampp......................................................................13

2.1.1. Download Xampp......................................................................13

2.1.2. Cài đặt Xampp.............................................................................13

2.1.3. Download và cài đặt Wordpress...................................................15

2.1.4 Xây dựng giao diện frontend........................................................19

2.1.4.1. Giao diện trang chủ...............................................................19

2.1.4.2 Giao diện hiển thị danh mục sản phẩm:.................................22

2.1.4.3 Giao diện hiển thị chi tiết sản phẩm.......................................22

2.1.4.4. Giao diện hiển thị danh mục bài viết....................................24

2.1.4.5. Giao diện hiển thị danh mục bài viết....................................25

2.1.5. Code sử lý.....................................................................................27

2.1.5.1. Ngôn ngữ viết chương trình..................................................27

2
 2.1.5.2. Một số đoạn code sử dụng.....................................................27

III. Tài liệu tham khảo.........................................................................................35

3
 LỜI MỞ ĐẦU

Xã hội phát triển về nhiều mặt kinh tế, văn hóa, xã hội kèm theo đó sự bùng nổ
mạnh mẽ của công nghệ thông tin. Vì thế, nhu cầu chia sẻ thông tin để kết nối giữa
doanh nghiệp và người tiêu dùng càng ngày càng cần thiết. Để đáp ứng nhu cầu đó,
website cho các công ty, doanh nghiệp, cá nhân đã ra đời. Và việc xây dựng website
là nhu cầu không còn xa lạ với mỗi cá nhân, tập thể trên môi trường Internet. Có rất
nhiều cách để xây dựng website, có thể thuê đối tác bên ngoài để tiến hành xây dựng
hoặc tự bản thân doanh nghiệp, cá nhân cũng có thể sử dụng hệ thống mã nguồn mở
có sẵn để xây dựng. Wordpress là một trong số đó, với giao diện trực quan, dễ sử
dụng, và dễ dàng đáp ứng được nhu cầu cơ bản nâng cao của một cá nhân hay tập thể
đã được nhiều người thiết kế, sử dụng phản hồi tích cực. Nắm được nhu cầu đó, em
chọn đề tài “Tìm hiểu công nghệ mã nguồn mở wordpress. Phân tích thiết kế và xây
dựng website sử dụng mã nguồn mở WordPress”.

Mặc dù đã cố gắng nỗ lực để hoàn thiện đề tài, nhưng bên cạnh đó không thể
tránh khỏi những thiếu sót. Mong rằng nhận được ý kiến góp ý, phản hồi của Thầy Cô
để chúng em có thể hoàn thiện được đề tài tốt hơn tạo nền tảng cho phát triển sự
nghiệp sau này.

Xin chân thành cảm ơn !

4
I: Tìm hiểu công nghệ mã nguồn mở wordpress

1. Wordpress là gì?
WordPress là một phần mềm nguồn mở (Open Source Software) được viết
bằng ngôn ngữ lập trình website PHP (Hypertext Preprocessor) và sử dụng hệ
quản trị cơ sở dữ liệu MySQL. WordPress được ra mắt lần đầu tiên vào ngày
27/5/2003 bởi tác giả Matt Mullenweg và Mike Little. Hiện nay WordPress được
sở hữu và phát triển bởi công ty Automattic có trụ sở tại San Francisco, California
thuộc hợp chủng quốc Hoa Kỳ.

WordPress là một mã nguồn mở bằng ngôn ngữ PHP để hỗ trợ tạo blog cá
nhân, và nó được rất nhiều người sử dụng ủng hộ về tính dễ sử dụng, nhiều tính
năng hữu ích. Qua thời gian, số lượng người sử dụng tăng lên, các cộng tác viên là
những lập trình viên cũng tham gia đông đảo để phát triển mã nguồn WordPress
có thêm những tính năng tuyệt vời. Và cho đến thời điểm viết bài này là 2015,
WordPress đã được xem như là một hệ quản trị nội dung (CMS – Content
Management System) vượt trội để hỗ trợ người dùng tạo ra nhiều thể loại website
khác nhau như 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ử, thậm chí với các loại website có độ phức tạp cao như
đặt phòng khách sạn, thuê xe, đăng dự án bất động sản,…v…v…Hầu như mọi
hình thức website với quy mô nhỏ và vừa đều có thể triển khai trên nền tảng
WordPress.

Nhưng như thế không có nghĩa là WordPress chỉ thích hợp với các dự án
nhỏ, mà hiện nay có tới khoảng 25% website trong danh sách 100 website lớn nhất
thế giới sử dụng mã nguồn WordPress. Ví dụ như trang tạp chí TechCrunch,
Mashable, CNN, BBC America, Variety, Sony Music, MTV News, Bata,
Quartz,…và còn rất nhiều website lớn khác.

2. Những thành tựu của 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 23% 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 52 ngôn ngữ khác nhau. Tuy nhiên lại chưa có
phiên bản tiếng Việt chính thức, nhưng bạn có thể Việt hóa dễ dàng bằng cách
tìm bài trên blog với từ khóa “Việt hóa WordPress“.
 Có hơn 80 chương trình họp mặt về WordPress được tổ chức vào năm 2014.

5
  Mã nguồn WordPress hiện đang có khoảng 785 lập trình viên cùng hợp tác
phát triển.
 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.

3. Ưu và nhược điểm của WordPress

3.1. Ưu điểm
 Nhiều plugin hỗ trợ, hầu như mọi ý tưởng đều đã có plugin hỗ trợ.
 Nhiều theme có sẵn, hầu như là nhiều nhất trong các CMS hiện nay. Bao
gồm các theme miễn phí và theme trả phí rất chuyên nghiệp.
 Dễ tùy biến, nếu bạn là người đã có kiến thức sẵn về PHP, CSS, HTML thì
điều này rất dễ dàng.
 Nhiều cộng đồng hỗ trợ và hướng dẫn, đơn cử là như ThachPham.Com của
mình đây.
 Có thể làm được nhiều thể loại website, từ blog cá nhân đến các trang
thương mại điện tử.
 Dễ cài đặt.
 Nhẹ và hao tốn ít tài nguyên máy chủ.
 Các Theme Framework hiện có sẽ giúp bạn tự thiết kế giao diện WordPress
dễ dàng.
 Dễ sử dụng và quản lý.

3.2. Nhược điểm

 Nhiều khái niệm khó hiểu nếu bạn mới bắt đầu.
 Muốn tùy biến WordPress, bạn phải có kiến thức lập trình web căn bản
nhất.
 Các theme đẹp đa phần là phải trả phí. Và plugin cũng vậy.
 Nếu bạn là Developer, bạn sẽ hơi mệt mỏi với các hàm có sẵn của
WordPress vì nó quá nhiều.

4. Các tính năng và giao diện chính của wordpress

4.1. Các tính năng chính
 WordPress Themes: WordPress có một hệ thống đầy đủ các theme giúp bạn
thiết kế tất cả mọi thứ từ những blog đơn giản đến những tạp chí online phức
tạp. Bạn cũng có thể chuyển đổi giữa nhiều chủ đề với giao diện hoàn toàn
khác chỉ bằng một cú nhấp chuột.
 Công cụ giao tiếp giữa các blog: WordPress hỗ trợ đầy đủ cả tiêu chuẩn
Trackback và Pingback. Các nhà phát triển cũng cam kết hỗ trợ các tiêu chuẩn
khác được phát triển trong tương lai.
6
  Comments: Với tính năng này khi khách truy cập vào website của bạn họ có
thể để lại ý kiến bình luận trong những mục riêng biệt, và thông qua Trackback
hay Pingback để bình luận trên trang của họ. Bạn có thể cho phép hoặc không
cho phép bình luận trên từng bài viết cụ thể.
 Bảo vệ Spam: WordPress được trang bị các công cụ rất mạnh mẽ như tích hợp
danh sách đen, mở kiểm tra proxy để quản lý và loại bỏ các bình luận spam
trên blog của bạn. Nó cũng có một mảng phong phú các plug-in để giúp nâng
cao hơn nữa tính năng này.
 Đăng ký người dùng: WordPress có một hệ thống đăng ký người dùng được
tích hợp sẵn (nếu bạn chọn) cho phép mọi người đăng ký, duy trì hồ sơ và để
lại các bình luận được xác nhận trên blog. Bạn có thể đóng chức năng bình
luận cho những người dùng không đăng ký. Ngoài ra, còn có các plug-in giúp
ẩn bài viết cho những tài khoản người dùng cấp thấp.
 Mật khẩu bảo vệ bài viết: Tính năng này cung cấp mật khẩu cho các bài viết
riêng biệt để ẩn chúng trên trang. Bạn cũng có thể có những bài viết cá nhân
chỉ được xem bởi người viết ra nó.
 Nhiều tác giả: Hệ thống người dùng nâng cao của WordPress cho phép đến 10
cấp độ người dùng, với mỗi cấp độ khác nhau người dùng sẽ có những đặc
quyền (và cấu hình) khác nhau đối với việc xuất bản, chỉnh sửa, các tùy chọn
và những người dùng khác.
 Bookmarklets: Tính năng bookmarklets đa trình duyệt giúp bạn dễ dàng xuất
bản đến blog hoặc thêm liên kết vào danh sách blog.
 Ping away: WordPress hỗ trợ ping Ping-O-Matic, có nghĩa là giúp công cụ tìm
kiếm tiếp xúc tối đa với blog của bạn. Tóm lại, WordPress là công cụ viết blog
đa năng, dễ sử dụng và khả năng tùy biến cao. Quá trình cài đặt đơn giản, bộ
sưu tập template đa dạng, kiến trúc plug-in đa dạng, phù hợp cho người mới
bắt đầu trong khi cũng đáp ứng nhu cầu của những blogger chuyên nghiệp hơn.

4.2. Giao diện mặc định

- Sau khi cài đặt xong Wordpress sẽ mặc đinh cho ta giao diện mang tên là
Twenty Fifteen.

7
 Ảnh giao diện trang chủ

* Ý nghĩa các phần trên trang chủ:

 Tên trang và mô tả (Description): Đây là phần thể hiện tên trang web còn
Description là phần thể hiện câu khẩu hiệu, slogan của bạn.
 Sidebar: Là một thành phần phụ nằm cạnh thành phần chính của website. Nó
có thể nằm bên phải, bên trái hoặc cả hai bên, cái này thì tùy và từng theme.
Trong giao diện mặc định này, có thể thấy một số thành phần con như khung
tìm kiếm, các bài viết mới, phản hồi mới,…. Các phần này được gọi chung là
Widget.
 Bài viết: Mỗi khi bạn đăng một bài viết mới lên trang web, sẽ tự động được
chèn vào trên cùng của trang web. Ngoài bài viết (post) ra, còn một loại nữa đó
là page. Hơi khác với post một chút, khi thêm một page mới thì chúng không
được đưa ra ngoài trang chủ như là post. Chỉ có thể đọc được nội dung khi truy
cập vào địa chỉ của page.
 Thông tin post: Với phần này, Sẽ có thể biết được bài viết này được đăng tải
khi nào, thuộc chuyên mục (Category) nào hay là có bao nhiêu bình luận thuộc
bài viết,… và còn một số thính năng khác mà có được hiển thị hay không thì
tùy từng theme sử dụng.
 Footer: Là một thành phần cuối cùng của trang web, bạn có thể hiển thị thông
tin liên hệ hay những cái gì bạn thích tại đây.
 Thanh Adminbar: Mặc định, khi bạn đăng nhập vào tài khoản, thì trên cùng
của trang web sẽ xuất hiện một thanh menu màu đen. Tại đây sẽ có các liên kết
dẫn tới các trang khác nhau.

8
 Giao diện trang chi tiết bài viết

* Ý nghĩa các phần trên trang chi tiết bài viết:

 Tiêu đề: Không có gì khó hiểu cả, đây chính là phần tiêu đề của bài viết
 Nội dung: Đây là phần thể hiện đầy đủ nội dung của một post. Còn bên dưới
là một vài thông tin liên quan đến bài viết như ngày đăng, tác giả bài viết,
v.v.v.v…..
 Bình luận: Tại đây sẽ hiển thị các bình luận dành cho bài viết này. Mỗi bình
luận đều có tên người bình luận, ngày bình luận và nút Trả lời (Reply) cho bình
luận đó.

4.3. Trang quản trị (Dashboard)

- Đước rồi, dưới đây là giao diện chính của trang quản trị Dashboard của
WordPress

9
 Giao diện chính trang quản trị

* Chức năng chính của các menu:

 Bảng tin: Trong menu này sẽ có một số chức năng chính như Lời chào tới
WordPress, Phác thảo nhanh một bài viết, Xem các bình luận mới, tin tức từ
WordPress,….
 Bài viết: Với menu này, có thể quản lý được các bài viết đã đăng trên website,
hay đăng thêm các bài viết mới. Ngoài ra cũng có thể quản lý được các chuyên
mục (category), thẻ (tag).
 Phương tiện: Với menu này sẽ quản lý các file được đăng tải lên website.
 Trang: Tại đây có thể tạo thêm các trang mới cũng như xóa đi các trang cũ.
 Phản hồi: menu này quản lý các bình luận trên web như cho phép hiển thị,
đánh dấu là Spam hay xóa các comment.
 Giao diện: Tại đây thì có thể thay giao diện mới cho web, tùy biến giao diện
đang dùng, chỉnh sửa nó.
 Gói mở rộng: quản lý các plugin trên website của mình. Cài thêm một plugin
mới, xóa một plugin cũ.
 Thành viên: Đây là khu vực bạn quản lý các thành viên trên website.
 Công cụ: Với menu này có thể xuất dữ liệu trang web ra một file SQL. Hay
cũng có thể nhập dữ liệu từ các blog khác vào blog của mình.

10
  Cài đặt: Đây là nơi sẽ cài đặt những thiết lập cơ bản cho trang web như tiêu
đề, câu slogan, cài đặt viết, bình luận, đường dẫn tĩnh,v.v.vv..

II. Phân tích và xây dựng website ứng dụng mã nguồn mở

Wordpress
- Xây dựng website giới thiệu sản phẩm về thiết bị nhà bếp,
đồ gia dụng của hãng Teka

1. Phân tích hệ thống

1.1. Chức năng phía frontend

STT Chức năng Mô tả

1 Xem chi tiết sản phẩm
Người xem có thể xem thông tin về sản
phẩm đồ gia dụng bao gồm: tên sản phẩm,
Giá niêm yết, giá bán, mã sản phẩm, hãng
sản xuất, thời hạn bảo hành, tình trạng còn
hàng hay hết hàng.

2 Bình luận Người xem có thể bình luận về sản phẩm.

3 Tìm kiếm sản phẩm Khách hàng nhập thông tin vào thanh tìm
kiếm để tìm kiếm sản phẩm

4 Quảng cáo Trên website có slider banner quảng cáos

5 Liên hệ Khách hàng nhập thông tin liên hệ vào

form để liên hệ với cửa hàng

- Chi tiết chức năng phía frontend

o Xem hàng: Khách hàng truy cập vào địa chỉ của website trên thanh url,
chọn vào các page trên site để xem thông tin.
Đầu vào: Thông tin yêu cầu của khách hàng về sản phẩm.
Xử lý: Khi khách hàng chọn một sản phẩm bất kì trên page, thông
tin mà khách hàng gửi sẽ được xử lý, hệ thống sẽ lấy dữ liệu từ cơ
sở dữ liệu, gửi lên cho người dùng.
Đầu ra: thông tin về sản phẩm bao gồm: tên sản phẩm, Giá niêm
11
 yết, giá bán, mã sản phẩm, hãng sản xuất, thời hạn bảo hành, tình
trạng còn hàng hay hết hàng.

o Bình luận: Sử dụng ứng dụng form comment của facebook, Người xem
có thể chia sẻ cảm nghĩ của họ về sản phẩm, thông tin bình luận của
khách hàng sẽ được lưu vào database của facebook.
o Tìm kiếm sản phẩm: Sử dụng ứng dụng tìm kiếm của google để
kết quả tìm kiếm trả về sát với yêu cầu của khách hàng nhất
o Liên hệ: Cho phép khách hàng liên hệ với nhân viên bán hàng thông
qua thông qua form liên hệ.
o Quảng cáo: Trên trang chủ và trang danh mục có đặt slider cho
phép đặt các banner quảng cáo, giới thiệu về sản phẩm mới nhất
hoặc đang giảm giá

- Sơ đồ chức năng

Sơ đồ chắc năng

1.2. Chức năng phía admin

STT Chức năng Mô tả

1 Quản lý sản phẩm Quản lý thông tin hình ảnh sản phẩm, người
quản trị có thể upload hình ảnh sản phẩm,
nhập thông tin mô tả tính năng sản phẩm,

12
 giá cả, số lượng

2 Quản lý danh mục sản Quản lý thông tin danh mục sản phẩm bao
phẩm gồm các chức năng thêm, xóa sửa danh mục
sản phẩm

3 Quản lý slide banner Trên website có slider banner quảng cáos

Quảng cáo

- Chi tiết chức năng quản trị admin

o Quản lý sản phẩm: sử dụng chức năng post bài viết của
wordpress để đăng thông tin sản phẩm, đồng thời dùng thêm
plugin advance custom field để thêm một số trường vào trong
phần đăng sản phẩm như giá, mã sản phẩm, thời hạn bảo hành..
o Quản lý danh mục sản phẩm: sử dụng phần quản lý danh mục
bài viết mặc định của wordpress để quản lý danh mục sản phẩm
o Quản lý slide banner Quảng cáo: sử dụng plugin in Revolution
Slider để quản lý thêm, sửa, xóa các banner quảng cáo

2. Xây dựng website

2.1. Cài đặt Wordpress trên localhost với Xampp
2.1.1. Download Xampp
-
Download tại trang web
 http://sourceforge.net/projects/xampp/
- Hoặc download trực tiếp tại:
 http://sourceforge.net/projects/xampp/files/XAMPP%2
0Windows/1.7.4/xampp-win32-1.7.4-
VC6.7z/download
2.1.2. Cài đặt Xampp

- Sau khi download thành công được thì tiến hành cài đặt trương trình vào
ổ C xampp-win32-5.6.15.exe
- Sau đó trong thư mục chạy file “ xampp-control “

13
- Chạy module “ Apache ” và “ Mysql ”

14
- Tạo Database MySQL cho Wordpress với PhpMyAdmin: ở mục “ Create
database ” điền tên data base rồi click “ Create “

2.1.3. Download và cài đặt Wordpress

- Truy cập vào trang web:
 https://wordpress.org/
- Hoặc download trực tiếp tại:
 https://wordpress.org/download/

15
- Sau khi download: Giải nén file wordpress.rar vừa download vào thư mục
C:\xampp\htdocs\ được thư mục với nội dung sau

- Tiến hành cài đặt wordpress

 Chạy được dẫn: http://localhost/wordpress “ thực hiện ngay ”
16
 Điền thông tin csdl: tên database, tên đăng nhập, mật khẩu và địa chỉ
máy chủ csdl -> “ Gửi ”

 Bước cuối điền thông tin: Tiêu đề web, tài khoản đăng nhập quản trị
website và click “ Cài đặt wordpress ”

17
 - Kiểm tra website đã cài đặt: bằng cách vào đường dẫn

http://localhost/wordpress/wp-admin -> đăng nhập với tài khoản vừa tạo

18
2.1.4 Xây dựng giao diện frontend
2.1.4.1. Giao diện trang chủ
 Header: bao gồm thông tin liên hệ, logo và form tìm kiếm

 Menu: chứa các chuyên mục sản phẩm, tin tức, và liên kết tới trang liên hệ
(Phần màu đỏ)

 Slider: slide hình ảnh banner quảng cáo bằng jquery

19
 Content : Box hiển thị sản phẩm theo danh mục cha và danh mục con

20
 Footer: gồm các liên kết tới danh mục và tới các bài viết chứa thông tin,
chính sách

21
 2.1.4.2 Giao diện hiển thị danh mục sản phẩm:
a. Hiển thị mô tả danh mục sản phẩm
b. Hiển thị danh sách sản phẩm có trong danh mục
c. Có chức năng phân trang sản phẩm

2.1.4.3 Giao diện hiển thị chi tiết sản phẩm

- Cột bên trái: gồm thông tin chi tiết sản phẩm vd: giá, mã sản phẩm, thời gian
bảo hành, trình trạng hàng, mô tả ngắn sản phẩm, chi tiết sản phẩm…

22
- Cột bên phải ( sidebar ) : hiển thị danh sách sản phẩm cùng chuyên mục với
sản phẩm chi tiết..

23
2.1.4.4. Giao diện hiển thị danh mục bài viết
- Hiển thị tên, mô tả danh mục sản phẩm
- Hiển thị danh sách các bài viết có trong danh mục
- Phân trang

24
2.1.4.5. Giao diện hiển thị danh mục bài viết
- Hiển thị nội dung bài viết
- Cột phải: hiển thị các bài viết liên quan, cùng chuyên mục
- Comment facebook

25
26
2.1.5. Code sử lý

2.1.5.1. Ngôn ngữ viết chương trình

 HTML (HyperText Markup Language) : còn được gọi là
ngôn ngữ đánh dấu siêu văn bản. Nó được tạo ra nhằm cấu trúc
lên một trang web với các mẩu thông tin được trình bày trên
World Wide Web. Một số thẻ thường được dùng như là
<html></html>, <header></header>, <body></body>,
<div></div>, <span></span>, <ul></ul>…
 CSS (Cascading Style Sheet) : Website được cấu tạo từ các
thẻ html nhưng với những thẻ html thì mới chỉ thể hiện được bộ
khung của website. Để căn chỉnh, trình bày cho đẹp mắt thì ta
cần sử dụng ngôn ngữ CSS. Đây là ngôn ngữ được dùng rất
nhiều trong lập trình web, thường đi cùng với ngôn ngữ html.
 JavaScrip : là ngôn ngữ lập trình kịch bản, hộ trợ người lập
trình trong việc tạo ra các hiệu ứng của website, kiểm tra các
thông tin đầu vào vào thường được viết cho phần giao diện của
website.
 PHP (Hypertext Preprocessor) : là ngôn ngữ lập trình chủ
yếu được dùng để phát triển các ứng dụng viết cho máy chủ, dễ
dàng nhúng vào trang HTML. Đây là ngôn ngữ lập trình web
phổ biến nhất thế giới, do tính mở nên dễ tiếp cận với lập trình
viên.

2.1.5.2. Một số đoạn code sử dụng

 Sử dụng Ajax lấy sản phẩm mới nhất theo từng danh mục
tại trang chủ
Bước 1:
- Khi người dùng click vào liên kết ứng với từng danh mục
bất kỳ

27
 - Thì sử dụng Ajax để gọi sản phẩm mới nhất của danh mục
tương ứng ra
// jquery sử lý sự kiện click và gửi yêu cầu tới file
// product.php và kèm theo biến id của danh mục
jQuery(document).ready(function($) {
var domain = 'http://localhost/nhabepteka/';
clickcattab();
function clickcattab(){
if($('.nav-tabs a').length > 0){
$('.nav-tabs a').on('click',function(){
var id = $(this).attr('data-item');
var status = $(this).attr('data-status');
if($('#block-section-'+id).length > 0){
$.ajax({
url: domain + "ajax/product.php",
type: "post",
data: { 'flag': "LoadBlockCatitem", "id": id, "data-
status": status },
success: function (response) {
$('#block-section-'+id).html(response);
$(this).tab('show');

28
 }
});
}
});
}
}
});

// Nội dung file product.php, kiểm tra tồn tại biến ID danh
mục
// và trả về danh sách sản phẩm tương ứng với ID danh mục
require_once('../wp-load.php');
global $wpdb;
if($_POST['flag'] == 'ProductModal'){
$id = $_POST['id'];
?>
<div class="product-content">
<!-- Hinh anh dai dien -->
<div class="images">
<div class="single-thumbnail">
<?php
if(has_post_thumbnail($id)){
$url =

29
wp_get_attachment_url( get_post_thumbnail_id($id) );
echo '<a href="'.$url.'"><img class="thumbnail"
src="'.$url.'"></img></a>';
}else{
echo '<img
src="'.get_site_url().'/images/no_photo_listing" >';
}
?>
</div>
</div>
<!-- Mo ta thuoc tinh san pham -->
<div class="summary">
<h1 class='title'><?php echo get_the_title($id); ?></h1>
<p class="price-regular">Giá niêm yết:
<span>
<?php
if(get_field('price_regular', $id)){
echo format_gia(get_field('price_regular', $id)) .'
VND';
}else{
if(get_field('gia', $id)){
echo get_field('gia', $id).' VND';
}else{
echo 'Đang cập nhật';

30
 }
}
?>
</span>
</p>
<p class="price-sale">Giá bán:
<span>
<?php
if(get_field('price_sale', $id)){
echo format_gia(get_field('price_sale',$id)) .'
VND';
}else{
echo 'Có chiết khấu';
}
?>
</span>
</p>
<p class="code">Mã sản phẩm: <span><?php
if(get_field('ma_san_pham',$id)){ echo
get_field('ma_san_pham',$id); } ?></span></p>
<p class="brand">Hãng sản xuất:
<span>TEKA</span></p>
<p class="guarantee">Bảo hành: <span>24
tháng</span></p>
<p class="stock">Tình trạng: <span>Còn
31
hàng</span></p>
<?php
if(get_field('mo_ta_ngan',$id)){
echo '<div
class="description">'.get_field('mo_ta_ngan',$id).'</div>';
}
?>
<div class="contact">
<span>Hãy gọi để có giá tốt
hơn<br><b>0906.099.786</b></span>
</div>
</div>
</div>
<?php
}
?>

 Code hiển thị danh sách sản phẩm trong trang danh mục sản
phẩm

<?php
if(have_posts()){
while(have_posts()) : the_post();
echo '<div class="product-item"><div class="item-inner">';

32
 echo '<div class="view">';
if(get_field('price_sale') && get_field('price_regular')){
$off = 100 -
floor((get_field('price_sale')/get_field('price_regular'))*100);
echo "<span class='sm-sale-off'>-$off%</span>";
}
echo '<a class="img" href="'.get_the_permalink().'">';
if(has_post_thumbnail()){
the_post_thumbnail();
}
echo '</a>';
echo '</div>';
echo '<h2><a
href="'.get_the_permalink().'">'.get_the_title().'</a></h2>';
echo '<span class="regular-price">Giá NY: <b>';
if(get_field('price_regular')){
echo format_gia(get_field('price_regular')) .' VND';
}else{
if(get_field('gia')){
echo get_field('gia').' VND';
}else{
echo 'Đang cập nhật';
}

33
 }
echo '</b></span>';
echo '<span class="sale-price">Giá bán: <b>';
if(get_field('price_sale')){
echo format_gia(get_field('price_sale')) .' VND';
}else{
echo 'Có chiết khấu';
}
echo '</b></span>';
echo '</div></div>';
endwhile; wp_reset_query();
}
?>

34
III. Tài liệu tham khảo
Tài liệu các tin trên trang internet, không có tên báo, số xuất
bản
- Precisioη (2014). Setup a Domain on Your Windows VPS [Internet].
[trích dẫn ngày 03/03/2014]. Lấy từ: URL:
https://www.youtube.com/watch?v=2Zz9SB5Gxmk
- Wordpress (2014). Class Reference/wpdb [Internet]. [trích dẫn ngày
03/03/2014]. Lấy từ: URL:
https://codex.wordpress.org/Class_Reference/wpdb
- Mr. Nav (2014). [WordPress Plugin] Database Info [Internet].
[trích dẫn ngày 03/03/2014]. Lấy từ: URL:
http://www.izwebz.com/wordpress/plug-in/wordpress-plugindatabase-info/
- Google (2014). Google [Internet]. [trích dẫn ngày 03/03/2014]. Lấy
từ: URL: https://google.com/

35