Báo cáo nghiên cứu và xây dưng website bằng WORDPRESS full

TRƯỜNG ĐẠI HỌC CNTT GIA ĐỊNH KHOA CÔNG NGHỆ THÔNG TINBÁ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

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í

- Youtube:

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

- Slideshare: bao-cao-cuoi-ky-athena

http://www.slideshare.net/huntersoft/nguyen-minh-tri-Trang web được triển khai trên VPS có địa chỉ là:

- http://baomat-athena.tk

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

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

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

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

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

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ọctậ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ọingườ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úpnhữ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

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âmhuyế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ạochuyên sâu quản trị mạng, an ninh mạng, thương mại điện tử theocá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àngcủa các đơn vị như Bộ Quốc Phòng, Bộ Công An , ngân hàng, doanhnghiệ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âmATHENA đã là chuyên gia đảm nhận công tác quản lý hệ thốngmạ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ềnThô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ềuchương trình hợp tác và trao đổi công nghệ với nhiều đại học lớnnhư Đại học Bách Khoa Thành Phố Hồ Chí Minh, Học Viện AnNinh Nhân Dân( Thủ Đức), Học Viện Bưu Chính Viễn Thông, Hiệphộ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áctrường đại học hàng đầu trong nước Tất cả giảng viênATHENA đề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

 Bên cạnh đó,các giảng viên ATHENA thường đi tu nghiệp và cậpnhậ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ácchươ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 NinhMạ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 kinhnghiệ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

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 đượcphá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àiviế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ữngbướ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ínhtương tác hoàn toàn đơn giản để có thể gần gũi với người sử dụng khôngchuyên Vì vậy lúc đó WordPress đã bắt đầu trở thành một mã nguồn mở đượcnhiề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ăngCustom Field thần thánh mà mãi tận bây giờ nó vẫn nằm trong top các tínhnă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ảivề

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àngkim của WordPress Đặc biệt là khi WordPress ra mắt phiên bản 2.8, có nhiềuthay đổi và tính năng nâng cao được cập nhật làm cho WordPress càng trở nênmạnh mẽ hơn, và nó trở thành một CMS chính hiệu lúc nào không hay

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ênthế giới Trong khi đó Joomla chỉ có 3% Và website không sử dụngCMS 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ư:

 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ý

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

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

Hình 3.1

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

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

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)

- 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

Hình 3.9

Hình 3.10

Hình 3.11

Hình 3.12

Hình 3.13

Hình 3.14

Hình 3.15

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

4.1 Giao diện trang chủ

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

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

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

4.4.1 Trang chủ

Hình 4.10

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

Hình 4.11

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

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

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

Hình 5.4

Hình 5.5

Hình 5.6

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

Hình 5.9

Hình 5.10

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 &amp; AN NINH MẠNG QUỐC TẾ ATHENA</span>

<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&#160;</a>

-&#160; <script type ="text/javascript">

&lt;! var prefix = &#39;&amp;#109;a&#39; + &#39;i&amp;#108;&#39;

+ &#39;&amp;#116;o&#39;;

var path = &#39;hr&#39; + &#39;ef&#39; + &#39;=&#39;;

var addy15483 = &#39;t&amp;#117;v&amp;#97 ;n&#39; +

&#39;&amp;#64;&#39;;

addy15483 = addy15483 + &#39;&amp;#97;th&amp;#101;n&amp;#97;&#39; + &#39;&amp;#46;&#39; + &#39;&amp;#101;d&amp;#117;&#39; +

&#39;&amp;#46;&#39; + &#39;vn&#39;;

document.write(&#39;&lt;a &#39; + path + &#39;\&#39;&#39; + prefix + &#39;:&#39; + addy15483 + &#39;\

&#39;&gt;&#39;); document.write(addy15483);

document.write(&#39;&lt;\/a&gt;&#39;); // &gt;\n

</script>

<a href ="mailto:tuvan@athena.edu.vn">tuvan@athena.edu.vn</a>

<script type ="text/javascript">

&lt;! document.write(&#39;&lt;span style=\

&#39;display: none;\&#39;&gt;&#39;);

// &gt;

</script>

<span style ="display: none;">This email address is being

protected from spambots You need JavaScript enabled to view

it <script type ="text/javascript">

&lt;! document.write(&#39;&lt;/&#39;);

document.write(&#39;span&gt;&#39;);

Hình 5.11

Hình 5.12

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

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= online-athena.gif" border="0" alt=""

"http://athena.edu.vn/images/hoc-style="display: block; margin-left: auto;

margin-right: auto;">

</a>

Hình 6.1

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

<span style ="color: #ff0000;">

<strong>Tư Vấn ATHENA 1