[nguyen minh tri] báo cáo cuối kỳ athena - nghiÊn cỨu vÀ xÂy dỰng web bẰng wordpress

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CNTT GIA ĐỊNH

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO

THỰC TẬP TỐT NGHIỆP

TÊN ĐỀ TÀI

NGHIÊN CỨU VÀ XÂY DỰNG WEB

BẰNG WORDPRESS

Người hướng dẫn: Võ Đỗ Thắng

Giảng viên hướng dẫn: Lê Mạnh Hải

Sinh viên thực hiện: Nguyễn Minh Trí

MSSV: 0240075 Lớp: 03DHPM Khóa: 03

Thành phố Hồ Chí Minh, tháng 04 năm 2014

Nội dung của báo cáo này đã được up lên:

- Youtube:

https://www.youtube.com/playlist?list=PL8vaAn9_EGIqCRav2CB

37EPoargd3dxzg

- Slideshare: http://www.slideshare.net/huntersoft/nguyen-minh-tri-

bao-cao-cuoi-ky-athena

Trang web được triển khai trên VPS có địa chỉ là:

- http://baomat-athena.tk

http://www.slideshare.net/huntersoft/nguyen-minh-tri-bao-cao-cuoi-ky-athena

http://www.slideshare.net/huntersoft/nguyen-minh-tri-bao-cao-cuoi-ky-athena

http://baomat-athena.tk/

ĐÁNH GIÁ CỦA ĐƠN VỊ THỰC TẬP

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

................................................................................................................

………………, ngày ……… tháng ……… năm …………

TM. Đơn vị thực tập

(Ký tên, đóng dấu)

ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN

1. Thái độ tác phong trong thời gian thực tập:

...............................................................................................................

................................................................................................................ ..

................................................................................................................

2. Kiến thức chuyên môn:

................................................................................................................

................................................................................................................ ..

................................................................................................................

3. Nhận thức thực tế:

................................................................................................................

................................................................................................................ ..

................................................................................................................

4. Đánh giá khác:

................................................................................................................

................................................................................................................ ..

................................................................................................................

5. Đánh giá chung kết quả thực tập:

................................................................................................................

................................................................................................................

................................................................................................................

………………, ngày ……… tháng ……… năm …………

Giảng viên hướng dẫn

(Ký tên, ghi rõ họ tên)

PHỤ LỤC

PHỤ LỤC ------------------------------------------------------------------------------- 1

MỞ ĐẦU -------------------------------------------------------------------------------- 3

Chương 1: Giới thiệu về đơn vị thực tập ----------------------------------------- 4

1.1. Lĩnh vực hoạt động chính ------------------------------------------------- 4

1.2. Cơ sở vật chất --------------------------------------------------------------- 5

Chương 2: Giới thiệu về wordpress ----------------------------------------------- 4

2.1. Wordpress là gì? ------------------------------------------------------------ 4

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

2.2.1. Ưu điểm ------------------------------------------------------------------------------ 5 2.2.2. Nhược điểm -------------------------------------------------------------------------- 6

Chương 3: Cài đặt wordpress trên localhost với XAMPP ------------------- 7

3.1. Download và cài đặt XAMPP -------------------------------------------- 7

3.1.1. Download XAMPP ----------------------------------------------------------------- 7 3.1.2. Cài đặt XAMPP --------------------------------------------------------------------- 8

3.2. Tạo Database MySQL cho Wordpress với PhpMyAdmin ----------- 9

3.3. Download và cài đặt Wordpress ------------------------------------------ 9

3.3.1. Download Wordpress --------------------------------------------------------------- 9 3.3.2. Cài đặt Wordpress----------------------------------------------------------------- 10

Chương 4: Phân tích thông tin danh mục web Athena ---------------------- 16

4.1. Giao diện trang chủ -------------------------------------------------------- 16

4.1.1. Header ------------------------------------------------------------------------------ 16

4.1.2. Menu-------------------------------------------------------------------------------- 16

4.1.3. Slider ------------------------------------------------------------------------------- 17

4.1.4. Last news --------------------------------------------------------------------------- 17

4.1.5. Widgets ----------------------------------------------------------------------------- 18

4.1.6. Footer ------------------------------------------------------------------------------- 19

4.2. Giao diện danh sách bài viết cùng đề tài ------------------------------- 19

4.3. Giao diện hiển thị nội dung bài viết ------------------------------------ 20

4.4. Sơ đồ Mockup giao diện web Athena ---------------------------------- 21

4.4.1. Trang chủ -------------------------------------------------------------------------- 21

4.4.2. Trang danh sách bài viết cùng chuyên mục ------------------------------------ 22 4.4.3. Trang nội dung bài viết ----------------------------------------------------------- 23

Chương 5: Cài đặt và cấu hình Theme ------------------------------------------ 24

5.1. Cài đặt theme tribune ----------------------------------------------------- 24

5.2. Cấu hình Theme Tribune ------------------------------------------------- 25

5.2.1. Header ------------------------------------------------------------------------------ 25 5.2.2. Menu-------------------------------------------------------------------------------- 25 5.2.3. Last news --------------------------------------------------------------------------- 28 5.2.4. Footer ------------------------------------------------------------------------------- 30

Chương 6: Cấu hình Widgets ----------------------------------------------------- 32

6.1. Cài đặt Widget banner quảng cáo --------------------------------------- 32

6.2. Cài đặt Widget Hỗ trợ online -------------------------------------------- 33

6.3. Cài Widget Facebook Like ----------------------------------------------- 35

6.3.1. Đăng ký làm Facebook Developer ---------------------------------------------- 35

6.3.2. Tạo ứng dụng mới ----------------------------------------------------------------- 37

6.3.3. Lấy Embed code của Facebook Like để nhúng vào Widget ----------------- 41

Chương 7: Đăng ký và tích hợp dịch vụ Google Analytics ----------------- 44

7.1. Đăng ký dịch vụ Google Analytics ------------------------------------- 44

7.2. Lấy Embed code để nhúng vào website -------------------------------- 47

Chương 8: Cài đặt và cấu hình plug-ins ---------------------------------------- 49

8.1. Cách tìm kiếm và cài đặt plug-ins--------------------------------------- 49

8.2. Cài đặt plug-in "Count Per Day” ---------------------------------------- 50

8.3. Cài đặt plugin “Weptile Image Slider Widget” ----------------------- 52

8.4. Cài đặt plugin ”Facebook” ----------------------------------------------- 54

8.5. Cài đặt plugin “Related Post” -------------------------------------------- 56

8.6. Cài đặt plugin ”WordPress SEO” --------------------------------------- 57

Chương 9: Viết plugin nhập và xem điểm -------------------------------------- 59

9.1. Cấu trúc cơ bản của 1 plugin wordpress ------------------------------- 59

9.2. Cấu trúc plugins nhập và xem điểm ------------------------------------ 60

9.2.1. Phần thông tin về plugin xem điểm --------------------------------------------- 60

9.2.2. Hàm khởi tạo Database lúc vừa active ------------------------------------------ 60

9.2.3. Hàm kiểm tra phân quyền -------------------------------------------------------- 61 9.2.4. Hàm nhập và xem điểm ---------------------------------------------------------- 62

Chương 10: Triển khai trang web lên VPS------------------------------------- 67

10.1. Đăng ký tên miền .tk ------------------------------------------------------ 67

10.2. Cài đặt và cấu hình DNS cho VPS -------------------------------------- 68

10.2.1. Cài đặt dịch vụ DNS ----------------------------------------------------------- 68 10.2.2. Cấu hình dịch vụ DNS --------------------------------------------------------- 69

10.3. Cài đặt và cấu hình XAMPP --------------------------------------------- 76

10.3.1. Cài đặt XAMPP ---------------------------------------------------------------- 76 10.3.2. Cấu hình XAMPP -------------------------------------------------------------- 76

10.3.3. Cấu hình bảo mật đơn giản cho XAMPP ------------------------------------ 77

10.4. Chuyển Wordpress từ localhost lên VPS ------------------------------ 78

10.4.1. Sau lưu phục hồi file cài đặt wordpress -------------------------------------- 78

10.4.2. Sao lưu và phục hồi Wordpress Database ----------------------------------- 80

Chương 11: Tối ưu hóa tìm kiếm (SEO) cho trang web --------------------- 83

11.1. Cài đặt plugin để tạo sitemap cho trang web -------------------------- 83

11.2. Đăng ký và gửi sitemap cho google webmaster ---------------------- 83

11.3. Tối ưu hóa bài viết với plugin “Google SEO” ------------------------ 84

Chương 12: Kết luận và hướng phát triển ------------------------------------- 85

12.1. Kết luận --------------------------------------------------------------------- 85

12.2. Hướng phát triển ----------------------------------------------------------- 85

Tài liệu tham khảo ------------------------------------------------------------------- 86

3

MỞ ĐẦU

Trong thời đại phát triển bùng nổ của công nghệ thông tin ngày nay,

chúng ta có thể làm rất nhiều thứ thông qua môi trường mạng Internet, từ học

tập, làm việc, vui chơi cho đến hội hợp trực tuyến.

Chỉ xét riêng về mặt học tập qua mạng, ta có thể thấy vô vàng công

cụ, dịch vụ hỗ trợ như google, yahoo, bing cùng hàng tỉ kết quả tìm kiếm có

thể được tìm thấy của ba trang web tìm kiếm này. Và cũng vì vậy nên mọi

người khi online thường rất dễ bị chi phối bởi các trang web giải trí đơn

thuần mà bỏ quên việc học. Điều này thật sự rất lãng phí.

Với mục tiêu giúp những ai muốn học tập qua mạng có thể tránh sự

dẫn dụ từ thế giới mạng và tập trung hơn vào mục tiêu nên em đã thử nghiên

cứu và xây dựng web bằng wordpress giới thiệu về trung tâp đào tạo

Athena. Nơi có các khóa học về Công Nghệ Thông Tin với mục tiêu được ghi

ra rõ ràng chi tiết cùng thời hạn cụ thể. Bên cạnh đó, trang web còn giúp

những người tham gia có thể kết bạn, tăng cường kỹ năng làm việc nhóm và

mọi người trong nhóm có thể học tập lẫn nhau để tự phát triển bản thân.

Chương 1: Giới thiệu về đơn vị thực tập

4


Trung Tâm Đào Tạo Quản Trị Mạng & An Ninh Mạng Quốc Tế ATHENA

được thành lập từ năm 2004, là một tổ chức qui tụ nhiều trí thức trẻ Việt Nam

đầy năng động, nhiệt huyết và kinh nghiệm trong lãnh vực CNTT, với tâm

huyết góp phần vào công cuộc thúc đẩy tiến trình đưa công nghệ thông tin là

ngành kinh tế mũi nhọn, góp phần phát triển nước nhà.

1.1. Lĩnh vực hoạt động chính

Trung tâm ATHENA đã và đang tập trung chủ yếu vào đào tạo

chuyên sâu quản trị mạng, an ninh mạng, thương mại điện tử theo

các tiêu chuẩn quốc tế của các hãng nổi tiếng như Microsoft, Cisco,

Oracle, Linux LPI , CEH,... Song song đó, trung tâm ATHENA còn

có những chương trình đào tạo cao cấp dành riêng theo đơn đặt

hàng của các đơn vị như Bộ Quốc Phòng, Bộ Công An , ngân hàng,

doanh nghiệp, các cơ quan chính phủ, tổ chức tài chính…

Sau gần 10 năm hoạt động,nhiều học viên tốt nghiệp trung tâm

ATHENA đã là chuyên gia đảm nhận công tác quản lý hệ thống

mạng, an ninh mạng cho nhiều bộ ngành như Cục Công Nghệ

Thông Tin - Bộ Quốc Phòng , Bộ Công An, Sở Thông Tin Truyền

Thông các tỉnh, bưu điện các tỉnh,...

Ngoài chương trình đào tạo, Trung tâm ATHENA còn có nhiều

chương trình hợp tác và trao đổi công nghệ với nhiều đại học lớn

như Đại học Bách Khoa Thành Phố Hồ Chí Minh, Học Viện An

Ninh Nhân Dân( Thủ Đức), Học Viện Bưu Chính Viễn Thông,

Hiệp hội an toàn thông tin (VNISA), Viện Kỹ Thuật Quân Sự,...

Đội ngũ giảng viên :

Tất cả các giảng viên trung tâm ATHENA có đều tốt nghiệp từ các

trường đại học hàng đầu trong nước .... Tất cả giảng viên

ATHENA đều phải có các chứng chỉ quốc tế như MCSA, MCSE,

CCNA, CCNP, Security+, CEH,có bằng sư phạm Quốc tế

(Microsoft Certified Trainer).Đây là các chứng chỉ chuyên môn bắt

buộc để đủ điều kiện tham gia giảng dạy tại trung tâm ATHENA.


5

Bên cạnh đó,các giảng viên ATHENA thường đi tu nghiệp và cập

nhật kiến thức công nghệ mới từ các nước tiên tiến như Mỹ , Pháp,

Hà Lan, Singapore,... và truyền đạt các công nghệ mới này trong

các chương trình đào tạo tại trung tâm ATHENA.

1.2. Cơ sở vật chất

Thiết bị đầy đủ và hiện đại.

Chương trình cập nhật liên tục, bảo đảm học viên luôn tiếp cận với

những công nghệ mới nhất.

Phòng máy rộng rãi, thoáng mát.

Dịch vụ hỗ trợ:

Đảm bảo việc làm cho học viên tốt nghiệp khoá dài hạn.

Giới thiệu việc làm cho mọi học viên.

Thực tập có lương cho học viên khá giỏi.

Ngoài giờ học chính thức, học viên được thực hành thêm miễn phí,

không giới hạn thời gian.

Hỗ trợ kỹ thuật không thời hạn trong tất cả các lĩnh vực liên quan

đến máy tính, mạng máy tính, bảo mật mạng.

Hỗ trợ thi Chứng chỉ Quốc tế.

Qua thời gian thực tập tại Trung Tâm Đào Tạo Quản Trị Mạng & An Ninh

Mạng Quốc Tế ATHENA, cá nhân em được tiếp xúc với một môi trường

năng động và sáng tạo. Sinh viên được rèn luyện kiến thức, học hỏi thêm các

kinh nghiệm thực tế. Nhờ đó, biết được năng lực của cá nhân và yêu cầu của

xã hội để cố gắng và phấn đấu nhiều hơn nữa.

Chương 2: Giới thiệu về wordpress

4


2.1. Wordpress là gì?

WordPress là một mã nguồn web mở để quản trị nội dung (CMS –

Content Management System ) và cũng là một nền tảng blog (Blog Platform)

được viết trên ngôn ngữ PHP sử dụng hệ quản trị cơ sở dữ liệu MySQL được

phát hành đầu tiên vào ngày 27/5/2003 bởi Matt Mullenweg và Mike Little.

Thực ra WordPress lúc đầu mới công bố ra nó không được xem như là

một CMS bởi vì sức mạnh của nó cũng còn giới hạn ít nhiều nên lúc đó cộng

đồng xem WordPress chỉ là một mã nguồn được lựa chọn để phát triển blog

cá nhân bình thường với các tính năng rất cơ bản là hỗ trợ tạo trang tĩnh, tạo

bài viết có nhúng tính năng bình luận bài viết để thành viên có thể tương tác.

Tuy vậy, so với công nghệ lúc bấy gì thì WordPress cũng đã có những

bước tiến vượt bật so với những đối thủ khác mà cái quan trọng nhất là tính

tương tác hoàn toàn đơn giản để có thể gần gũi với người sử dụng không

chuyên. Vì vậy lúc đó WordPress đã bắt đầu trở thành một mã nguồn mở

được nhiều người chú ý đến và nhận donation (quyên góp) từ những người

ủng hộ để có thể phát triển được tốt hơn.

Và đúng như nguyện vọng của nhiều người, WordPress đã có một sự

phát triển vượt bậc ngay sau đó mà đầu tiên là sự nâng cấp về backend để

quản lý tốt hơn, nhiều tính năng mới được ra đời (trong đó có tính năng

Custom Field thần thánh mà mãi tận bây giờ nó vẫn nằm trong top các tính

năng thú vị nhất), kèm theo đó là một thư viện theme chính thức được công

bố với hàng trăm giao diện khác nhau cho WordPress mà người dùng có thể

tải về.

Tiếp tục vài năm sau đó, các bản WordPress mới hơn lần lượt ra đời và

kèm theo đó là thư viện plugin khổng lồ được ra mắt, đánh dấu thời kỳ hoàng

kim của WordPress. Đặc biệt là khi WordPress ra mắt phiên bản 2.8, có

nhiều thay đổi và tính năng nâng cao được cập nhật làm cho WordPress càng

trở nên mạnh mẽ hơn, và nó trở thành một CMS chính hiệu lúc nào không

hay.


5

Hiện tại tính ở thời điểm này, WordPress đã có những con số rất ấn tượng

như sau:

Khoảng 72,000,000 website đang sử dụng mã nguồn mở WordPress.

Mỗi ngày có khoảng 145,000 lượt download mã nguồn WordPress từ

trang chủ.

WordPress chiếm khoảng 19% thị phần cho tổng số website có mặt

trên thế giới. Trong khi đó Joomla chỉ có 3%. Và website không sử

dụng CMS chiếm 69%.

Tổng số lượt download hiện tại của WordPress là khoảng 500,000,000

lần.

Chưa hết và các website lớn trên thế giới đều đang tin dùng WordPress như:

Mashable

TechCrunch

CNN

Forbes

Time

Wired

Reuters

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

2.2.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ý.


6

2.2.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.

Chương 3: Cài đặt wordpress trên localhost với XAMPP

7

Chương 3: Cài đặt wordpress trên localhost với

XAMPP

Các file, công cụ cần chuẩn bị:

Mã nguồn Wordpress.

File cài đặt XAMPP (bản 7z).

Trình duyệt web.

3.1. Download và cài đặt XAMPP

3.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

Hình 3.1

http://sourceforge.net/projects/xampp/

http://sourceforge.net/projects/xampp/files/XAMPP Windows/1.7.4/xampp-win32-1.7.4-VC6.7z/download




8

3.1.2. Cài đặt XAMPP

- Giải nén file “xampp-win32-1.7.4-VC6.7z” vào ổ đĩa C, sau đó vào

trong thư mục chạy file ”xampp-control” (hình 3.2).

- Chạy Module ”Apache” và ”MySql” (hình 3.3).

Hình 3.2

Hình 3.3


9

3.2. Tạo Database MySQL cho Wordpress với PhpMyAdmin

- Mở trình duyệt, truy cập vào đường dẫn:

http://localhost/phpmyadmin/

- Ở mục «Create new database», gõ vào tên CSDL cho Wordpress sử

dụng (Hình 3.4)

Hình 3.4

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

3.3.1. Download Wordpress

- Truy cập vào trang web:

https://wordpress.org/

- Hoặc download trực tiếp tại:

https://wordpress.org/download/

http://localhost/phpmyadmin/


10

Hình 3.5

3.3.2. Cài đặt Wordpress

- Mở thư mục cài đặt XAMPP ra, tiến hành giải nén Wordpress vào ”htdocs\athena” (hình 3.6).

Hình 3.6


11

- Mở trình duyệt, truy cập vào trang ”http://localhost/athena” và tiến

hành cài đặt wordpress như hướng dẫn ở hình bên dưới.

- Ở hình 3.9, ta điền thông tin để wordpress kết nối với Database mà

ta đã tạo trên MySQL.

- Ở hình 3.11, ta điền tiêu đề trang web và thông tin tài khoản quản

trị.

- Hình 3.14 là giao diện trang quản trị của wordpress.

- Hình 3.15 là giao diện trang web lúc vừa cài đặt xong.

Hình 3.7

Hình 3.8


12

Hình 3.9

Hình 3.10


13

Hình 3.11

Hình 3.12


14

Hình 3.13

Hình 3.14


15

Hình 3.15

Chương 4: Phân tích thông tin danh mục web Athena

16


4.1. Giao diện trang chủ

4.1.1. Header

- Phần Header gồm Logo Athena ở góc trái và banner quảng cáo ở

góc phải (hình 4.1).

Hình 4.1

4.1.2. Menu

- Phần Menu màu đỏ nằm dưới Header, chứa các chuyên mục của web (hình 4.2).

Hình 4.2


17

4.1.3. Slider

- Phần Slider là silde show tạo bằng jquery, chứa các banner quảng cáo (hình 4.3).

Hình 4.3

4.1.4. Last news

- Phần Last news chứa các tin tức mới cập nhật và các logo quảng cáo nằm xen kẽ (hình 4.4, hình 4.5).

Hình 4.4


18

Hình 4.5

4.1.5. Widgets

- Phần Widgets gồm các box Quảng cáo, hỗ trợ trực tuyến, Facebook Like, Đếm lượt truy cập.

Hình 4.6


19

4.1.6. Footer

- Phần Footer chứa thông tin liên lạc về trung tâm Athena (hình 4.7).

Hình 4.7

4.2. Giao diện danh sách bài viết cùng đề tài - Gồm danh sách các bài viết cùng chuyên mục và phần danh sách

link của các bài viết khác (hình 4.8).

Hình 4.8


20

4.3. Giao diện hiển thị nội dung bài viết - Chức nội dung bài viết, plug-ins Facebook Like and Share, quảng

cáo và link các bài viết khác.

Hình 4.9


21

4.4. Sơ đồ Mockup giao diện web Athena

4.4.1. Trang chủ

Hình 4.10


22

4.4.2. Trang danh sách bài viết cùng chuyên mục

Hình 4.11


23

4.4.3. Trang nội dung bài viết

Hình 4.12

Chương 5: Cài đặt và cấu hình Theme

24


5.1. Cài đặt theme tribune - Copy thư mục chứa Theme vào ”wp-content\themes”. - Truy cập vào appearance, chọn themes, rê chuột vào theme

”tribune” chọn activate.

Hình 5.1

Hình 5.2


25

5.2. Cấu hình Theme Tribune

5.2.1. Header

- Vào Theme setting để thêm logo cho trang web.

Hình 5.3

5.2.2. Menu

- Đầu tiên vào mục menu để tạo menu như hình 5.4

- Sau đó ta set Main Menu cho Theme. (hình 5.5)

- Rồi tiến hành tạo menu như hình 5.6

- Hoàn tất ta sẽ được menu như hình 5.7


26

Hình 5.4

Hình 5.5


27

Hình 5.6

Hình 5.7


28

5.2.3. Last news

- Truy cập vào nhóm HomePage của Theme, ở các mục ” Featured Articles”, ” Recent Posts”, ” Footer Slider” ta đều bỏ chọn mục display để disable nó đi.

- Sau đó tiến hành cấu hình cho widget HomePage để có giao diện trang LastNews.

- Các widget Text ta chèn code html hiển thị 1 bức ảnh, các widget Featured Category ta chọn Category cầ hiển thị.

Hình 5.8


29

Hình 5.9

Hình 5.10

30

5.2.4. Footer

- Bỏ phần code trong thẻ div có id="footer-wrap" ở file footer, thay

bằng code thông tin về trung tâm athena phía dưới ta sẽ có được

phần footer giới thiệu về Athena như hình 5.12

<div> <h2> <span style="color: #c50606;">TRUNG TÂM ĐÀO TẠO QUẢN TRỊ MẠNG & AN NINH MẠNG QUỐC TẾ ATHENA</span> </h2> <p><em>Cơ sở 1: 92 Nguyễn Đình Chiểu, phường Đa Kao, Q1. Điện thoại: (08)38244041 - 090 78 79 477-094 323 00 99(Gần ngã tư Đinh Tiên Hoàng - Nguyễn Đình Chiểu)</em> <br /> <em>Cơ sở 2: 2 Bis Đinh Tiên Hoàng, phường Đa Kao, Q1. Điện thoại: (08)22103801 - 094 320 00 88(Cạnh sân vận động Hoa Lư - Cách đài truyền hình Tp HTV 50 mét)</em> <br /> <em>Website: <a href="http://athena.edu.vn/">http://athena.edu.vn</a> - <a href="http://athena.com.vn">http://athena.com.vn <br /></a>E-mail : support <a href="#">@athena.edu.vn </a> - <script type="text/javascript"> \n </script> <a href="mailto:[email protected]">[email protected]</a> <script type="text/javascript">  </script> <span style="display: none;">This email address is being protected from spambots. You need JavaScript enabled to view it. <script type="text/javascript">  </script></span></em> </p> </div>


31

Hình 5.11

Hình 5.12

Chương 6: Cấu hình Widgets

32


6.1. Cài đặt Widget banner quảng cáo - Ta truy cập vào mục Appearance >> Widgets.

- Kéo thả Widget Text vào SideBar.

- Sau đó paste đoạn code bên dưới vào phần nội dung của Widget.

- Cuối cùng chọn Save để hoàn tất (hình 6.1).

<a href="http://athena.edu.vn/dang-ky-hoc/hoc-online.html" target="_blank">

<img src="http://athena.edu.vn/images/hoc-online-athena.gif" border="0" alt="" style="display: block; margin-left: auto; margin-right: auto;">

</a>

Hình 6.1


33

Hình 6.2

6.2. Cài đặt Widget Hỗ trợ online - Cấu trúc của URL hỗ trợ online bằng Y!M

Hình 6.3


34

- Trở lại mục Widget, ta tiếp tục kéo thả thêm 1 widget Text vào

SideBar.

- Điền mục “Title” là “Hỗ trợ online”.

- Copy và paste đoạn code sau vào ô nội dụng (hình 6.4).

- Hoàn tất ta sẽ được như hình 6.5.

<div style="border: 1px solid #AAAAAA; padding: 5px;"> <table style="width: 100%;" border="0" cellspacing="0" cellpadding="2" align="center"> <tbody> <tr> <td align="center"> <em> <span style="color: #ff0000;"> <strong>Tư Vấn ATHENA 1 <br /></strong> </span> <a href="ymsgr:sendim?athenavietnam"> <img src="http://opi.yahoo.com/online?u=athenavietnam&t=2" border="0" /> </a> <br /> </em> <strong> <em>090 78 79 477<br /></em> <span style="color: #ff0000;"> <br /> <em>Tư Vấn ATHENA 2</em> <br /> </span> </strong> <em> <a href="ymsgr:sendim?thangvodo"> <img src="http://opi.yahoo.com/online?u=thangvodo&t=2" border="0" /> <br /> </a> <strong>094 323 00 99 <br /></strong></em></td> </tr> </tbody> </table> </div>


35

Hình 6.4

Hình 6.5

6.3. Cài Widget Facebook Like

6.3.1. Đăng ký làm Facebook Developer

- Để có thể chèn dịch vụ này của facebook vào trang web, trước hết ta cần đăng ký làm Developer cho facebook.


36

Hình 6.1

Hình 6.2


37

Hình 6.3

6.3.2. Tạo ứng dụng mới

- Sau khi đăng ký xong, ta bắt đầu tiến hành tạo 1 ứng dụng mới. - Sau khi tạo xong (hình 6.8: dấu chấm), ứng dụng chưa thể sử dụng

ngay, ta cần phải public nó.

Hình 6.4


38

Hình 6.5

Hình 6.6


39

Hình 6.7

Hình 6.8


40

Hình 6.9

Hình 6.10


41

6.3.3. Lấy Embed code của Facebook Like để nhúng vào Widget

- Truy cập vào mục “docs/plugins/like-box-for-pages”.

- Dán fanpage của athena vào mục URL, sau đó tinh chỉnh các thông

số fb hỗ trợ.

- Click vào Get Code để lấy Embed Code.

Hình 6.11


42

Hình 6.12

Hình 6.13


43

Hình 6.14

Hình 6.15

Chương 7: Đăng ký và tích hợp dịch vụ Google Analytics

44

Chương 7: Đăng ký và tích hợp dịch vụ Google

Analytics

7.1. Đăng ký dịch vụ Google Analytics - Truy cập vào trang ” http://www.google.com/analytics/”, chọn tạo tài

khoản (hình 7.1). - Sau đó tiến hành đăng ký như hình bên dưới.

Hình 7.1

http://www.google.com/analytics/


45

Hình 7.2

Hình 7.3


46

Hình 7.4

Hình 7.5


47

Hình 7.6

7.2. Lấy Embed code để nhúng vào website - Copy phần embed code rồi paste vào dưới tag <body> của trang

web. Hoặc nếu theme hỗ trợ script thì paste vào khung dành sẵn cho script.

- Xong bước này ta đã hoàn tất phần tích hợp Google Analytics vào trang web.

Hình 7.7


48

Hình 7.8

Hình 7.9: Trang report thể hiện thông tin truy cập của website.

Chương 8: Cài đặt và cấu hình plug-ins

49


8.1. Cách tìm kiếm và cài đặt plug-ins - Đầu tiên ta truy cập vào mục Plugins, chọn Add new. - Sau đó gõ từ khóa liên quan đến plugins ta muốn cài rồi click

Search Plugins, hoặc click chọn 1 từ khóa trong danh sách sẵn có bên dưới (hình 8.2)

- Chọn Details để xem thông tin về plugins, Install now để cài đặt plugins.

Hình 8.1

Hình 8.2


50

8.2. Cài đặt plug-in "Count Per Day” - Gõ từ khóa “Count Per Day” vào mục Search, chọn Search plugins. - Chọn Install now ở dòng “Count Per Day version 3.2.9” để tiến

hành cài đặt. - Truy cập vào Widgets, kéo thả widget “Count Per Day” vào Sidebar

rồi tiến hành cấu hình như hình 8.5 - Cài xong ta sẽ được widget như hình 8.6

Hình 8.3

Hình 8.4


51

Hình 8.5

Hình 8.6


52

8.3. Cài đặt plugin “Weptile Image Slider Widget” - Tương tự như trên ta tiến hành cài đặt plugin “Weptile Image Slider

Widget”. - Sau đó vào Widget, kéo widget “Weptile Image Slider Widget” vào

Homepage rồi tiến hành cấu hình cho plugin như hình 8.7, 8.8. o Width: Chiều rộng. o Height: Chiều cao. o Effect: Loại hiệu ứng sideshow. o Images: Ta chọn các hình dùng là slider.

- Cuối cùng chọn Save để lưu lại. - Hoàn tất ta sẽ được slider như hình 8.9

Hình 8.7


53

Hình 8.8


54

Hình 8.9

8.4. Cài đặt plugin ”Facebook” - Cài đặt plugin bằng từ khóa ”Facebook”. - Lấy App ID và App Secret từ trang Developer của Facebook, sau

đó điền vào trang setting của Facebook. - Cấu hình Facebook Like như hình 8.12 - Hoàn thành ta sẽ được như hình 8.13

Hình 8.10


55

Hình 8.11

Hình 8.12


56

Hình 8.13

8.5. Cài đặt plugin “Related Post” - Cài đặt plugin bình thường bằng từ khóa ”related post”.

- Plugin sẽ giúp hiện thị các bài viết liên quan dưới chân các bài đăng

như hình 8.15

Hình 8.14


57

Hình 8.15

8.6. Cài đặt plugin ”WordPress SEO”

- Cài đặt như bình thường bằng từ khóa ”Wordpress SEO”.

- Sau khi cài xong ta chỉnh lại phần Permalinks như hình 8.17 để tối

ưu hóa URL.

- Các cấu hình khác sẽ có trong chương sau.


58

Hình 8.16

Hình 8.17

Chương 9: Viết plugin nhập và xem điểm

59


9.1. Cấu trúc cơ bản của 1 plugin wordpress

<?php /* Plugin Name: Hello-World Plugin URI: http://baomat-athena.tk/ Description: A simple hello world wordpress plugin Version: 1.0 Author: Nguyen Minh Tri Author URI: http://baomat-athena.tk/ License: GPL */ add_action('init', 'hello_world'); function hello_world() { echo "Hello World!!!"; } ?>

- Phía trên là plugin đơn giản xuất ra chữ “Hello World!!!”. - Cấu trúc cơ bản gồm:

o Phần thông tin của plugin: Plugin Name: Tên của plugin. Plugin URL: Địa chỉ trang chủ. Description: Chú thích. Version: Phiên bản. Author: Tác giả. Author URI: Trang chủ của tác giả. License: Giấy phép phần mềm.

o Phần code php của plugin. Code php các function ta từ viết. Các hàm API mà wordpress hỗ trợ.


60

9.2. Cấu trúc plugins nhập và xem điểm

9.2.1. Phần thông tin về plugin xem điểm

- Phần này sẽ cung cấp các thông tin cho wordpress lúc hiển thị trong trang plugins.

/* Plugin Name: Xem Diem Plugin URI: http://baomat-athena.tk Description: Xem diem sinh vien Version: 1.0 Author: Nguyen Minh Tri Author URI: Author Email: [email protected] */

Hình 9.1

9.2.2. Hàm khởi tạo Database lúc vừa active

- Hàm này sẽ thực hiện lúc plugin được active. - Nó sẽ tạo 1 Table “bang_diem” trong Database của Wordpress và

thêm 3 dòng vào table đó.

global $mssv_db_version; $mssv_db_version = "1.0"; function xemdiem_install() { global $wpdb; global $mssv_db_version; $table_name = $wpdb->prefix . "bang_diem"; $sql = "CREATE TABLE $table_name ( id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, mssv VARCHAR(4) NOT NULL, name tinytext NOT NULL, toan INT, ly INT, hoa INT );";


61

require_once( ABSPATH . 'wp-admin/includes/upgrade.php' ); dbDelta( $sql ); add_option( "mssv_db_version", $mssv_db_version ); } function xemdiem_install_data() { global $wpdb; $welcome_mssv = "0101"; $welcome_name = "Nguyen Minh Tri"; $welcome_toan = "8"; $welcome_ly = "8"; $welcome_hoa = "8"; $table_name = $wpdb->prefix . "bang_diem"; $rows_affected = $wpdb->insert( $table_name, array( 'mssv' => $welcome_mssv, 'name' => $welcome_name, 'toan' => $welcome_toan, 'ly' => $welcome_ly, 'hoa' => $welcome_hoa) ); $welcome_mssv = "0102"; $welcome_name = "Nguyen Thi A"; $welcome_toan = "8"; $welcome_ly = "9"; $welcome_hoa = "10"; $rows_affected = $wpdb->insert( $table_name, array( 'mssv' => $welcome_mssv, 'name' => $welcome_name, 'toan' => $welcome_toan, 'ly' => $welcome_ly, 'hoa' => $welcome_hoa) ); $welcome_mssv = "0103"; $welcome_name = "Nguyen Thi B"; $welcome_toan = "5"; $welcome_ly = "6"; $welcome_hoa = "5"; $rows_affected = $wpdb->insert( $table_name, array( 'mssv' => $welcome_mssv, 'name' => $welcome_name, 'toan' => $welcome_toan, 'ly' => $welcome_ly, 'hoa' => $welcome_hoa) ); } register_activation_hook( __FILE__, 'xemdiem_install' ); register_activation_hook( __FILE__, 'xemdiem_install_data' );

Hình 9.2

9.2.3. Hàm kiểm tra phân quyền

- Hàm này kiểm tra xem người dùng có là Admin hay Editor không. Nếu đúng trả về 1, ngược lại trả về 0.


62

function is_ad_ed() { global $current_user; $user = new WP_User($current_user->ID);//$current_user->ID $quyen = ''; if ( !empty( $user->roles ) && is_array( $user->roles ) ) { foreach ( $user->roles as $role ) $quyen = $role; } if ($quyen == 'administrator' || $quyen == 'editor') { return 1; } return 0; }

9.2.4. Hàm nhập và xem điểm

- Nếu người dùng là Administrator hoặc Editor sẽ hiển thị thêm cả

nút “Nhập điểm” (hình 9.1), ngược lại sẽ chỉ hiển thị nút ”Xem

điểm” (hình 9.2).

- Phần tra điểm sẽ tra theo MSSV (hình 9.3).

- Phần nhập điểm (hình 9.4) phải nhập tất cả các trường, không được

nhập MSSV đã có trong CSDL, điểm không được lớn hơn 10.

Hình 9.3


63

Hình 9.4

Hình 9.5

Hình 9.6


64

function xemdiem() { $mssv = ''; if (is_ad_ed()) { $mssv_form = ' <script> function show_nhap_diem() { document.getElementById("id_nhap_diem").removeAttribute("style"); } </script> <div class="mssv_class"> <form action="" method="post"> <input type="text" size="20" name="mssv_text"> <input type="submit" name="mssv_xem_diem" value="Xem điểm"> <input type="button" name="mssv_show_nhap_diem" onclick="show_nhap_diem()" value="Nhập điểm"> </form> <div id="id_nhap_diem" style="display:none;"><br /> <form action="" method="post"> <label style="display: inline-block; width: 60px; text-align: right; margin:5px;">MSSV: </label> <input type="text" size="20" name="in_mssv" value=""><br /> <label style="display: inline-block; width: 60px; text-align: right; margin:5px;">Họ tên: </label> <input type="text" size="30" name="in_name" value=""><br /> <label style="display: inline-block; width: 60px; text-align: right; margin:5px;">Toán: </label> <input type="text" size="30" name="in_toan" value=""><br /> <label style="display: inline-block; width: 60px; text-align: right; margin:5px;">Lý: </label> <input type="text" size="30" name="in_ly" value=""><br /> <label style="display: inline-block; width: 60px; text-align: right; margin:5px;">Hóa: </label> <input type="text" size="30" name="in_hoa" value=""><br /> <label style="display: inline-block; width: 60px; text-align: right; margin:5px;"></label><input type="submit" name="mssv_nhap_diem" value="Hoàn tất"> </form> </div> </div> '; } else { $mssv_form = ' <div class="mssv_class"> <form action="" method="post"> <input type="text" size="20" name="mssv_text"> <input type="submit" name="mssv_xem_diem" value="Xem điểm"> </form> </div> '; } if (isset($_POST['mssv_xem_diem'])==true) { $mssv = $_POST['mssv_text']; if ($mssv != '' && is_numeric($mssv)) { global $wpdb, $ketqua, $trungbinh, $current_user;


65

$table_name = $wpdb->prefix . "bang_diem"; $ketqua = $wpdb->get_row("SELECT * FROM " . $table_name . " WHERE mssv=" . $mssv . ";"); if (!is_null($kiemtra->mssv)) { $trungbinh = round(($ketqua->toan + $ketqua->ly + $ketqua->hoa)/3, 2); $ketqua_html = ' <div> MSSV: '.$ketqua->mssv .'<br /> Họ tên: '.$ketqua->name .'<br /> Toán: '.$ketqua->toan .'<br /> Lý: '.$ketqua->ly .'<br /> Hóa: '.$ketqua->hoa .'<br /> Trung bình: '. $trungbinh .' </div> '; return $mssv_form . '<br />' . $ketqua_html; } else { return $mssv_form . '<br /> MSSV Không tồn tại'; } } else { $mssv = ''; return "<strong>Có lỗi.</strong>".$mssv_form; } } if (isset($_POST['mssv_nhap_diem'])==true) { global $wpdb; $wel_mssv = $_POST['in_mssv']; $wel_name = $_POST['in_name']; $wel_toan = $_POST['in_toan']; $wel_ly = $_POST['in_ly']; $wel_hoa = $_POST['in_hoa']; $table_name = $wpdb->prefix . "bang_diem"; if ( $wel_mssv != '' && is_numeric($wel_mssv) && $wel_name != '' && !is_numeric($wel_name) && $wel_toan != '' && is_numeric($wel_toan) && $wel_toan <= 10 && $wel_ly != '' && is_numeric($wel_ly) && $wel_ly <= 10 && $wel_hoa != '' && is_numeric($wel_hoa) && $wel_hoa <= 10 && is_ad_ed() ) { $kiemtra = $wpdb->get_row("SELECT * FROM " . $table_name . " WHERE mssv=" . $wel_mssv . ";"); if (is_null($kiemtra->mssv)) { $rows_affected = $wpdb->insert( $table_name, array( 'mssv' => $wel_mssv, 'name' => $wel_name, 'toan' => $wel_toan, 'ly' => $wel_ly, 'hoa' => $wel_hoa) ); return $mssv_form . '<br />' . "Hoàn tất"; } else { return "<strong>MSSV đã có trong Database.</strong>".$mssv_form; } } else { return "<strong>Có lỗi.</strong>".$mssv_form;


66

} } return $mssv_form; } add_shortcode('xemdiemsv', 'xemdiem');

Chương 10: Triển khai trang web lên VPS

67


10.1. Đăng ký tên miền .tk

Hình 10.1

Hình 10.2


68

10.2. Cài đặt và cấu hình DNS cho VPS

10.2.1. Cài đặt dịch vụ DNS

Hình 10.3

Hình 10.4


69

10.2.2. Cấu hình dịch vụ DNS

Hình 10.5


70

Hình 10.6

Hình 10.7


71

Hình 10.8

Hình 10.9


72

Hình 10.10

Hình 10.11


73

Hình 10.12

Hình 10.13


74

Hình 10.14

Hình 10.15

Hình 10.16


75

Hình 10.17

Hình 10.18


76

10.3. Cài đặt và cấu hình XAMPP

10.3.1. Cài đặt XAMPP

- Ta tiến hành cài đặt bình thường như trên localhost. - Download và giải nén file ” xampp-win32-1.7.4-VC6.7z” vào ổ C. - Sau đó chạy ”Xampp-control”.

Hình 10.19

10.3.2. Cấu hình XAMPP

- Ở VPS ta sẽ cấu hình XAMPP chạy như 1 dịch vụ của windows và sẽ chạy sau khi windows logon.

Hình 10.20


77

10.3.3. Cấu hình bảo mật đơn giản cho XAMPP

- Phần cấu hình bảo mật này ta sẽ đặt password cho XAMPP và MySQL, chỉnh chế độ bảo vệ cho file passoword.

Hình 10.21

Hình 10.22


78

Hình 10.23

Hình 10.24

10.4. Chuyển Wordpress từ localhost lên VPS

10.4.1. Sau lưu phục hồi file cài đặt wordpress

- Copy các file từ localhost lên server VPS. - Sau đó ta chỉnh lại thông số kết nối Database MySQL mà ta vừa tạo

ở trên.


79

Hình 10.25

Hình 10.26


80

Hình 10.27

10.4.2. Sao lưu và phục hồi Wordpress Database

- Truy cập vào Phpmyadmin của localhost tiến hành sao lưu Database như hình 10.28.

- Sau đó ta chỉnh dường dẫn ”http://localhost/athena” thành đường dẫn của tên miền mà ta vừa đăng ký ở trên là ”http://baomat-athena.tk”.

- Kế đến là bước tạo Database ”athena” trên PhpMyAdmin của VPS, rồi tiến hành import Database vừa chỉnh sửa vào.

- Xong các bước này là ta đã hoàn tất phần sao lưu và phục hồi trang web từ localhost lên VPS.

Hình 10.28


81

Hình 10.29

Hình 10.30


82

Hình 10.31

Chương 11: Tối ưu hóa tìm kiếm (SEO) cho trang web

83

Chương 11: Tối ưu hóa tìm kiếm (SEO) cho trang

web

11.1. Cài đặt plugin để tạo sitemap cho trang web - Cài đặt plugin như bình thường với từ khóa ”Google XML

Sitemaps”. - Plugin này sẽ giúp tạo sitemap động cho trang web.

Hình 11.1

11.2. Đăng ký và gửi sitemap cho google webmaster - Chọn thêm trang web, rồi điền trang web vào. - Sau đó thực hiện xác nhập theo yêu cầu của google. - Điền đường dẫn đến sitemap.xml như hình 11.2

Hình 11.2

Chương 11: Tối ưu hóa tìm kiếm (SEO) cho trang web

84

Hình 11.3

11.3. Tối ưu hóa bài viết với plugin “Google SEO” - Khi viết bài post ta sẽ kết hợp với plugin SEO để tối ưu hóa nội

dung cho bài viết. - Chú ý: từ khóa phải được dặt vào title, meta description, URL.

Hình 11.4

Chương 12: Kết luận và hướng phát triển

85

Chương 12: Kết luận và hướng phát triển

12.1. Kết luận

- Qua khoảng thời gian thực tập tạo Athena, em đã học hỏi được rất

nhiều thứ về cách thức làm 1 trang web dựa trên framework

Wordpress, các dùng VPS để triển khai trang web, các thủ thuật

SEO mới và nhiều nhiều điều khác từ các bạn thực tập chung khóa.

- Bên cạnh, em cũng tự nhận thấy bản thân cần phải nỗ lực học tập

nhiều hơn nữa thì mới đủ đáp ứng với xu thế công nghệ đang phát

triển rất nhanh hiện nay.

12.2. Hướng phát triển

- Sắp tới, em sẽ tiếp tục đi sâu vào nghiên cứu cách viết những plug-

in cao cấp hơn, để nắm rõ hơn về API của Wordpress. Ngoài ra, em

cũng sẽ nghiên cứu tự viết mới 1 theme wordpress từ những

framework có sẵn.

Tài liệu tham khảo

86

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-plugin-

database-info/

- Google (2014). Google [Internet]. [trích dẫn ngày 03/03/2014]. Lấy

từ: URL: https://google.com/

http://www.izwebz.com/wordpress/plug-in/wordpress-plugin-database-info/

http://www.izwebz.com/wordpress/plug-in/wordpress-plugin-database-info/

[nguyen minh tri] báo cáo cuối kỳ athena - nghiÊn cỨu vÀ xÂy dỰng web bẰng wordpress

Education