Xây dựng website tin tức bằng cách tạo theme dựa trên nền tảng wordpress

TRƢỜNG ĐẠI HỌC VINH

VI N

THU T V C NG NGH
--------------------------

BÁO CÁO
ĐỒ ÁN TỐT NGHI P ĐẠI HỌC
Tên đồ án:

Xây dựng website tin tức bằng cách tạo theme dựa trên
n n tảng Wordpress

Nghệ An, tháng 05 năm 2017


Đồ án tốt nghiệp đại học

LỜI CÁM ƠN

Ngành công nghệ thông tin là một ngành khoa học đang trên đà phát triển
mạnh và ứng dụng rộng rãi trên nhiều lĩnh vực. Cùng với xu hướng phát triển
của các phương tiện truyền thơng như Báo, Radio… thì việc sử dụng Internet
ngày càng phổ biến. Truy cập Internet, chúng ta có được một kho thông tin
khổng lồ phục vụ mọi nhu cầu, mục đích của chúng ta chỉ bằng một cái nhấp
chuột.
Nhận thức được nhu cầu tìm hiểu thơng tin, giải trí của xã hội, là sự ra đời của
hàng loạt website cho các mục đích thương mại, giải trí, tin tức…Để đáp ứng
với việc cập nhật thơng tin hàng ngày, tình hình xã hội, chính trị, thời sự, và sức
khỏe… thì website tin tức ra đời là một nhu cầu tất yếu.

Do đó, em đã vận dụng ngơn ngữ HTML, PHP, và phần mềm nguồn mở
WordPress để xây dựng ứng dụng Website Tin tức.
Hồn thành xong đề tài, em vơ cùng biết ơn thầy, cơ đã nhiệt tình giảng dạy, hướng
dẫn và đặc biệt là thầy giáo Th.S Lê Văn Thành, người trực tiếp hướng dẫn nhiệt
tình cho em trong suốt quá trình học hỏi và thực hiện đề tài này.

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 1


Đồ án tốt nghiệp đại học

M CL C
LỜI CÁM ƠN.................................................................................................................... 1
M C L C .......................................................................................................................... 2
CHƢƠNG 1. TỔNG QUAN ........................................................................................... 4
1.1.

Giới thiệu đề tài website tin tức ..................................................................4

1.1.1. Phân tích những tiêu chí hình thành Tin Tức ..............................................5
1.1.2 u cầu Website ............................................................................................6
1.2.

Giới thiệu tổng quát về CMS WORDPRESS .............................................7

1.2.1. Nền tảng website ......................................................................................7

1.2.2. Những thành tựu của wordpress ..............................................................8
1.2.3. Những lý do chọn wordpress ...................................................................8
1.2.4. Những hiểu lầm về wordpress ...............................................................10
1.2.5. Lời kết ....................................................................................................10
1.3.

Những kiến thức cần trang bị ....................................................................11

1.3.1. HTML .....................................................................................................11
1.3.3. Javascipt ................................................................................................ 13
1.3.4. PHP ........................................................................................................13

CHƢƠNG 2: PHÂN TÍCH CẤU TRÚC TRANG WEB........................................ 14
2.1.

Cấu trúc cơ bản của trang web ..................................................................14

CHƢƠNG 3. C I ĐẶT WORDPRESS ..................................................................... 19
3.1. Cài đặt wordpress trên localhost .....................................................................19

CHƢƠNG 4: XÂY DỰNG WEBSITE TIN TỨC .................................................... 22
4.1 Quá trình xây dựng giao diện: .........................................................................22
4.1.1 Code HTML ..................................................................................................22
4.1.2 Code CSS ......................................................................................................23
4.2. Thực hiện đẩy dữ liệu lên Wordpress .............................................................25
4.3 Cài đặt giao diện trên Wordpress.....................................................................26
4.4 Thực hiện đổ dữ liệu ........................................................................................26
4.5 Giao diện một số trang ....................................................................................35

KẾT LU N ...................................................................................................................... 37

1.Kết quả đạt được của đề tài: ...........................................................................37
2. Hướng phát triển ................................................................................................ 37
NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 2


Đồ án tốt nghiệp đại học
T I LI U THAM HẢO............................................................................................. 38

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 3


Đồ án tốt nghiệp đại học
CHƢƠNG 1. TỔNG QUAN
1.1.

Giới thi u

tài website tin tức

“Tin tức tích lũy trong mỗi chúng ta ƣợc gọi là kiến thức, tài sản quý giá
nhất của con ngƣời ”
Với sự bùng nổ thông tin trên internet, vai trị của các trang thơng tin điện tử

trực tuyến càng trở nên quan trọng. Khác với báo chí truyền thơng có giới hạn thời
gian cập nhật tin tức, các tờ báo trực tuyến đã cung cấp được sự tiện lợi trong việc cập
nhật và phát hành thông tin. Về phía người dùng, họ có thể xem thơng tin mọi lúc mọi
nơi. Về phía những người cung cấp thơng tin, các nhà báo, họ có thể dễ dàng cập nhật
những tin tức mới nhất, thời sự nhất. Do đó việc sử dụng các trang thông tin trực tuyến
luôn là điều cần thiết hiện nay nhằm đáp ứng nhu cầu cập nhật thông tin của mỗi
người.
Tin tức là những việc đã xảy ra dù tốt dù xấu, để giúp con người biết những
chuyện xung quanh và trên thế giới. Ngày nay nhờ thông tin truyền thông nhanh, cho
nên bất cứ chuyện gì vừa xãy ra ở đâu trên thế giới thì ta đều có thể biết ngay, nhờ đó
mà có thể học được nhiều cái hay cũng như tránh được những chuyện xấu xảy ra, như
các trận sóng Thần, bão táp, núi lửa sắp đến, các chất độc hại trong thức ăn.... giúp con
người biết trước mà tránh khỏi các nguy hiểm sắp đến.
Tin tức vơ cùng quan trọng nó cho người ta tri thức và là cơ sở để người ta tiến
hành mọi việc lớn nhỏ. Khi có Internet, tin tức càng quan trọng vì tốc độ lan truyền
nhanh ảnh hưởng ngay tức thì trên diện rộng.

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 4


Đồ án tốt nghiệp đại học

1.1.1. Phân tích những tiêu chí hình thành Tin Tức
Tiêu chí dùng để xác định tin tức có thể được tóm gọn lại như sau: Có liên
quan, hữu ích, gây được sự quan tâm. Những tiêu chí đó được áp dụng rộng rãi nhưng
mỗi nhà báo hay mỗi cơ quan báo chí đều sử dụng chúng theo một bối cảnh đặc thù để

nhấn mạnh ý nghĩa theo cách riêng. Cái bối cảnh ấy do chính công chúng tạo ra.
Bạn đang đọc một bài báo đăng trên báo in. Trên truyền hình, một bài viết như thế sẽ
có ít chi tiết hơn, nhưng bạn sẽ nhìn thấy đoạn băng quay cảnh những nhân vật chính
đang tranh luận. Còn ở báo trực tuyến, một bài báo như thế sẽ bao gồm cả chi tiết và
đoạn phim – cộng thêm sự kết nối dễ dàng đến những bài báo liên quan và những tư
liệu đằng sau vụ việc. Cách trình bày sẽ khác nhau ở mỗi loại hình, nhưng những giá
trị của tin tức đã làm cho nó trở nên quan trọng và kỹ năng tường thuật sự việc cũng
như những yêu cầu kể lại câu chuyện sẽ có sự giống nhau.
Sự liên quan, hữu ích và gây được quan tâm là những định hướng khái quát để
thẩm định giá trị thông tin của bất kỳ sự kiện, vấn đề hay nhân vật nào. Cùng với
những tiêu chí rõ ràng đó, những yếu tố đặc trưng hơn tiềm tàng trong mỗi câu
chuyện. Quan trọng nhất là những yếu tố sau:
• Tác ộng: Đây là một cách khác để đo mức độ liên quan và hữu ích. Có bao
nhiêu người bị ảnh hưởng bởi một sự kiện hay một ý tưởng? Nó ảnh hưởng đến
họ nghiêm trọng như thế nào?
• Xung ột: Đây là một đề tài mn thuở trong mọi câu chuyện, dù được thuật
lại bởi báo chí, văn chương hay kịch nghệ. Những cuộc đấu tranh giữa người
với người, giữa các quốc gia hay với sức mạnh thiên nhiên đều lơi cuốn người
ta đọc. Xung đột chính là một yếu tố cơ bản của đời sống, các nhà báo phải tỉnh
táo trước cám dỗ muốn làm cho câu chuyện tăng thêm kịch tính hoặc đơn giản
hóa thái quá.
• Mới lạ: Đây là một yếu tố khác phổ biến cả trong báo chí lẫn các loại hình
khác. Con người hay sự kiện có thể gây được hấp dẫn và do đó có giá trị thơng
tin chỉ vì yếu tố đặc biệt hay kỳ quái.
• Danh tiếng: Tên tuổi tạo nên tin tức. Tên tuổi càng lớn chừng nào thì bài báo
càng quan trọng chừng đó. Những người dân thường ln bị kích thích tị mị
bởi việc làm của những người giàu có và nổi tiếng.

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 5


Đồ án tốt nghiệp đại học
• Gần gũi: Thơng thường, người ta thích thú và quan tâm đến những gì diễn ra
gần nơi họ ở. Khi họ đọc hay nghe một tin trong nước hay tin thế giới, họ
thường muốn biết nó có liên quan gì đến cộng đồng của chính họ.
• Cấp thời: Tin địi hỏi phải mới. Nếu tin thích đáng và hữu ích, nó hẳn phải
đúng lúc. Ví dụ như khi viết về một vấn đề mà hội đồng thành phố phải đối mặt
trước khi nó được quyết định thì sẽ có ích hơn là sau đấy. Những bài báo kịp
thời cho người ta cơ hội được tham dự vào các vụ việc chung hơn là chỉ làm
một khán giả.
Lƣu ý : những yếu tố trên gợi ra hai điều quan trọng về tin:
• Thứ nhất, khơng phải mọi tin tức đều nghiêm túc, đều là chuyện sống chết.
Nghề báo được miêu tả như “cuộc đối thoại của văn hóa với chính nó”. Cuộc
đối thoại đó gắn kết thành nền văn hóa từ những chuyện kể về tội ác, chính trị
cho tới các sự kiện trên thế giới, tất nhiên rồi; nhưng nó cũng bao gồm những
câu chuyện của đời sống hằng ngày. Nó bao gồm cả những chuyện khôi hài và
chuyện tầm phào. Tất cả những điều đó đều có thể là tin tức.
• Thứ hai, tin tức khơng chỉ là việc góp nhặt lại sự kiện. Thuật lại một tin
thường cũng có nghĩa là kể lại một câu chuyện. Tính tường thuật, tính nhân
văn, kịch tính của câu chuyện là nghệ thuật của báo chí. Để tập hợp những sự
kiện trong bài viết của mình, nhà báo sử dụng nhiều kỹ thuật giống như những
kỹ thuật mà nhà xã hội học, nhà khoa học chính trị và nhà sử học sử dụng. Để
viết bài báo cho ai cũng hiểu được sự kiện trong đó, nhà báo thường sử dụng kỹ
thuật của những người cầm bút khác như nhà văn hay nhà biên kịch.
1.1.2. Yêu cầu Website
• u cầu bạn đọc:

Giao diện thân thiện.
Dễ tìm kiếm thơng tin.
Tin tức website được cập nhật thường xun.
• u cầu thành viên:
Cung cấp các chức năng có thể cập nhật tin tức dễ dàng.
• Yêu cầu Admin:
Thuận lợi trong việc quản lý thông tin thành viên, tin tức, dữ liệu của
website.
NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 6


Đồ án tốt nghiệp đại học

1.2.

Giới thi u t ng quát v CMS WORDPRESS

1.2.1. Nền tảng website
 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 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, th xe, đăng dự án bất động sản,…. 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,…rất nhiều không thể
kể hết được.

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 7


Đồ án tốt nghiệp đại học

1.2.2. Những thành tựu của wordpress
Khi tìm hiểu về WordPress, bạn sẽ thật tự hào khi biết rằng mã nguồn mà các
bạn đang tìm hiểu ngay sau đây có những thành tựu rất vượt bậc và là một mã nguồn
CMS mở phổ biến nhất hành tinh. Để kiểm chứng điều đó, các bạn cần biết là:
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. 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. Bạn thấy
đó, WordPress thật tuyệt vời phải không nào?
1.2.3. Những lý do chọn wordpress
1.2.3.1.

Dễ sử dụng

WordPress được phát triển nhằm phục vụ đối tượng người dùng phổ thơng,
khơng có nhiều kiến thức về lập trình website nâng cao. Các thao tác trong WordPress
rất đơn giản, giao diện quản trị trực quan giúp bạn có thể nắm rõ cơ cấu quản lý một
website WordPress trong thời gian ngắn. Về cách cài đặt lại càng dễ hơn, bạn có thể tự
cài đặt một website WordPress trên host (máy chủ) riêng của mình và tự vận hành nó
sau vài cú click.
1.2.3.2.
Cộng đồng hỗ trợ đơng đảo
Là một mã nguồn CMS mở phổ biến nhất thế giới, điều này cũng có nghĩa là bạn
sẽ được cộng đồng người sử dụng WordPress hỗ trợ bạn các khó khăn gặp phải trong
q trình sử dụng. Nếu bạn có khả năng tiếng Anh tốt, bạn có thể dễ dàng tìm câu trả
lời cho vấn đề bạn đang gặp phải trên Google chỉ với vài từ khóa tìm kiếm.
Hiện nay có những cộng đồng wordpress nổi tiếng trên Việt Nam và thế giới :
+ />+

+ www.wpbeginner.com
NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 8


Đồ án tốt nghiệp đại học

....
1.2.3.3. Nhiều gói giao diện có sẵn
Trong khi sử dụng WordPress, khái niệm giao diện cho website WordPress
thường được gọi là theme. Hiện nay WordPress có rất nhiều theme miễn phí khác
nhau để bạn có thể dễ dàng thay đổi “da thịt” của website mình chỉ với vài cú click mà
không cần bận tâm việc làm sao để thiết kế một theme cho riêng mình. Còn nếu bạn
muốn website đẹp và chuyên nghiệp hơn, bạn có thể mua các theme trả phí với giá bán
dao động từ $30 đến $65.
Nhưng nếu bạn là người mới tập làm quen với WordPress, hãy tạm quên việc
dùng theme trả phí vì cách cài đặt nó có thể khơng mấy dễ dàng cho người mới bắt
đầu.
1.2.3.4.

Nhiều plugin hỗ trợ

Plugin nghĩa là một trình cắm thêm vào website để bổ sung các chức năng mà
bạn cần. Ví dụ mặc định sau khi cài website WordPress, bạn khơng có chức năng hiển
thị các bài viết liên quan ở dưới mỗi bài viết, nhưng với nhiều plugin miễn phí hỗ trợ
thì bạn có thể dễ dàng cài thêm một plugin miễn phí để website mình có chức năng đó.
Tương tự với theme, cũng có rất nhiều plugin trả phí mang những tính năng rất độc

đáo và có ích vào website và nó sẽ có giá khoảng từ $10 đến $80 tùy theo độ phức tạp.
1.2.3.5. Dễ phát triển cho lập trình viên
Nếu bạn là một người có am hiểu về việc làm website như thành thạo HTML,
CSS, PHP thì có thể dễ dàng mở rộng website WordPress của bạn ra với rất nhiều tính
năng vơ cùng có ích. Cách phát triển cũng rất đơn giản vì WordPress là một mã nguồn
mở nên bạn có thể dễ dàng hiểu được cách hoạt động của nó và phát triển thêm các
tính năng.
Với hàng nghìn hàm (function) có sẵn của nó, bạn có thể thoải mái sử dụng, bạn
cũng có thể thay đổi cấu trúc của một hàm với filter hook và hầu như quy trình làm
việc của một lập trình viên chun nghiệp có thể ứng dụng dễ dàng vào WordPress.
1.2.3.6. Hỗ trợ nhiều ngơn ngữ
Mã nguồn WordPress hiện tại có rất nhiều gói ngôn ngữ đi kèm, bao gồm tiếng
Việt. Mặc dù trong mỗi giao diện hay plugin đều có ngơn ngữ riêng nhưng bạn có thể
dễ dàng tự dịch lại nó với các phần mềm hỗ trợ.
1.2.3.7.

Có thể làm nhiều loại website

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 9


Đồ án tốt nghiệp đại học
Dùng WordPress khơng có nghĩa là bạn chỉ có thể làm blog cá nhân, mà bạn có
thể biến website mình thành một trang bán hàng, một website giới thiệu cơng ty, một
tờ tạp chí online bằng việc sử dụng kết hợp các theme và plugin với nhau. Tuy nhiên
để làm được, bạn nên chắc chắn là đã hiểu được WordPress chứ đừng vội một bước

lên mây để nhận các cảm giác thất vọng vì độ phức tạp của nó.
1.2.4. Những hiểu lầm về wordpress
1.2.4.1. Wordpress chỉ là một phần mềm
Đúng vậy, WordPress chỉ là một phần mềm nguồn mở được viết bằng PHP &
MySQL để giúp bạn tạo được website nhanh hơn. Nhưng đó khơng có nghĩa là nó sẽ
giúp bạn tạo được một website bất kỳ chỉ với các thao tác đơn giản.
Mặc dù thư viện các giao diện có sẵn (Theme) và Plugin rất nhiều nhưng để tuỳ
biến website sử dụng WordPress tốt hơn, bạn cần phải có kiến thức về PHP, HTML,
CSS, Javascript,…tất cả các kỹ thuật liên quan tới website.
1.2.4.2. Wordpress chỉ dành cho người khơng biết code
Hồn tồn sai lầm, nếu bạn đã nghe ai đó nói với bạn rằng WordPress chỉ dành
cho những người khơng chun lập trình sử dụng thì điều này hồn tồn khơng chính
xác.Dĩ nhiên những người khơng biết lập trình sẽ dùng WordPress bằng cách sử dụng
các tính năng có sẵn, thư viện giao diện phong phú và các plugin hỗ trợ cũng đã đủ để
làm được website. Nhưng nếu bạn biết code thì càng tốt vì WordPress có phần lõi mã
nguồn rất mạnh để bạn áp dụng kỹ năng không giới hạn, nếu bạn cho rằng WordPress
chỉ dành cho người khơng biết lập trình thì hãy xem qua WordPress Nâng Cao.
1.2.5. Lời kết
Trong thời đại cơng nghệ ngày này để có được 1 website thương mại điện tử đầy
đủ các chức năng cần thiết nhưng cũng không quá rắc rối , phức tạp khi sử dụng và mở
rộng thì Wordpress đã làm tốt vai trị của mình trong lĩnh vực này .

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 10


Đồ án tốt nghiệp đại học

1.3.

Những kiến thức cần trang b

Những ngơn ngữ lập trình cần biết
1.3.1. HTML
HTML là chữ viết tắt của cụm từ HyperText Markup Language(Xem thêm
tại (dịch là Ngôn ngữ đánh dấu siêu văn bản)
được sử dụng để tạo một trang web, trên một website có thể sẽ chứa nhiều trang và
mỗi trang được quy ra là một tài liệu HTML. Cha đẻ của HTML là Tim Berners-Lee,
cũng là người khai sinh ra World Wide Web và chủ tịch của World Wide Web
Consortium (W3C – tổ chức thiết lập ra các chuẩn trên môi trường Internet).
Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements)
được quy định bằng các cặp thẻ (tag), các cặp thẻ này được bao bọc bởi một dấu ngoặc
ngọn (ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở
và thẻ đóng (ví dụ<strong> </strong> ). Các văn bản muốn được đánh dấu bằng
HTML sẽ được khai báo bên trong cặp thẻ (ví dụ <strong>Đây là chữ in
đậm</strong>). Nhưng một số thẻ đặc biệt lại khơng có thẻ đóng và dữ liệu được
khai báo sẽ nằm trong các thuộc tính (ví dụ như thẻ <img>).
Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi
mở rộng là .html hoặc .htm.
1.3.2. CSS
CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngơn ngữ được sử dụng
để tìm và nh dạng lại các phần tử được tạo ra bởi các ngơn ngữ đánh dấu (ví dụ như
HTML). Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trị định dạng các phần tử
trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp
chúng ta có thể thêm một chút “phong cách” vào các phần tử HTML đó như đổi màu
sắc trang, đổi màu chữ, thay đổi cấu trúc,…rất nhiều.

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 11


Đồ án tốt nghiệp đại học

Hình 1: website sau khi CSS
CSS có vai trị trang trí thêm cho văn bản được viết bằng HTML.
Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể
là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ áp dụng
các thuộc tính cần thay đổi lên vùng chọn đó.
Cấu trúc một đoạn CSS

Hình 2: Cấu trúc CSS

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 12


Đồ án tốt nghiệp đại học

1.3.3. Javascipt
Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có
sẵn hoặc tự định nghĩa ra, javascript được sử dụng rộng rãi trong các ứng dụng

Website. Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox,
Chrome, ... thậm chí các trình duyệt trên thiết bị di động cũng có hỗ trợ.
Nếu bạn đã biết qua về HTML5 thì bạn thấy có các khái niệm như sessionStore
hay localStore, đây là hai đối tượng được tạo nên từ Javascript nên rõ ràng trong
HTML5 cũng có sử dụng nó. Với những ứng dụng đó thì bạn thấy javascript khơng thể
chết trong các ứng dụng website được.
Hay thậm chí có những ứng dụng Webgame người ta sử dụng javascript để xử
lý các thao tác trên Client, nếu khơng có nó thì thơng thường chọn Flash để xây dựng
nhưng lại gặp vấn đề load chậm nên có một số người chọn Javascript để làm.
1.3.4. PHP
PHP là viết tắt của chữ "Hypertext Preprocessor", đây là một ngơn ngữ lập
trình được sử dụng để viết ở phía máy chủ (lập trình web). Hiện nay có rất nhiều ngơn
ngữ có thể viết ở máy chủ như C#, Java, Python và PHP chính là một trong những
ngơn ngữ của nhóm này.
PHP có cú pháp đơn giản, tốc độ nhanh và nhỏ gọn, dễ học và thời gian để tiếp
cập PHP ngắn hơn so với các ngơn ngữ lập trình khác nên hiện nay PHP đang chiếm
số lương lập trình viên tương đối lớn, có thể gọi là lớn nhất. Hiện PHP có rất nhiều các
CMS mã nguồn mở như WordPress, OpenCart, NukeViet nên nó rất đa dạng và đáp
ứng hầu hết các website thông thường từ blog cá nhân cho đến website giới thiệu công
ty và bán hàng.
PHP sử dụng cặp thẻ mở <?php và thẻ đóng ?>, phía bên trong chính là nội
dung của mã code PHP.

Hình 3: Cấu trúc của code php

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 13

Đồ án tốt nghiệp đại học
CHƢƠNG 2: PHÂN TÍCH CẤU TRÚC TRANG WEB
2.1.

Cấu trúc cơ bản của trang web

Hình 4: Cấu trúc website
Phần header:- Dùng để định nghĩa khu vực phần đầu của trang
- Thường được dùng cho phần giới thiệu hay chứa các thành phần
chuyển hướng (navigation).
Phần body: - Dùng để định nghĩa khu vực nội dung của trang
- Phần chưa nội dung của trang
NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 14


Đồ án tốt nghiệp đại học
Phần footer: - Dùng để định nghĩa khu vực phần cuối của trang
-Thường chứa các thông tin liên lạc của tác giả, nguồn gốc của bài viết.
Với những phân tích trên, ta thấy những phần như: header, global navigation, body,
content, sidebar(right content), footer đều là những phần nội dung lớn, do đó ta sẽ sử
dụng thẻ <div></div> cho những thành phần này:

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="wrapper">
<header id="header" class="site-header">
<div class="top-header">
<div class="container">
Nội dung header
</div><!-- .container -->
</div>
<nav class="main-menu">
<div class="container">
Nội dung global navigati
</div>
</nav><!-- .main-menu -->
</header><!-- .site-header -->
<main id="main" class="site-main">
<div class="content">
NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 15


Đồ án tốt nghiệp đại học

<div class="container">
Nội dung body
</div><!-- .container -->
</div>
</main><!-- .site-main -->
<footer id="footer" class="site-footer">
<div class="container">
Nội dung footer
</div><!-- .container -->
</footer><!-- site-footer -->
</div><!-- #wrapper -->
</body>
</html>

2.2.

Ví dụ về thiết kế giao diện

VD: phần Header

Hình 5: header của trang
 Phần bên trái:
Bao gồm logo và phần tên trang web:
Ta đặt <div></div> bao ngoài cho logo và sử dụng thẻ <img /> vì logo là
image.
Ta đặt <div></div> bao ngoài cho Text logo và sử dụng thẻ

cho
Tên web
 Phần bên phải :

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 16


Đồ án tốt nghiệp đại học
Ta đặt <div></div> bao ngoài cho image header và sử dụng thẻ <img /> vì
image header là image.
<header id="header" class="site-header">
<div class="top-header">
<div class="container">
<div class="header-logo">
<a href="#"><img src="images/assets/anh1.png" alt="anh1" /></a>
</div>
<div class="header-name">
<span>BỘ THÔNG TIN VÀ TRUYỀN THÔNG </span>

TinVinh

Phiên bản thử nghiệm

</div>
<div class="header-image">
<a href="#"><img src="images/assets/anh44.png" alt="anh3" /></a>
<a class="header-top-image" href="#">alt="anh2" /></a>
</div>
</div><!-- .container -->
</div>
Thực hiện CSS với phần header :

.top-header .header-logo{

float: left;
padding-top: 30px;
padding-right: 20px;
}
.top-header .header-name{
float: left;

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 17


Đồ án tốt nghiệp đại học

color: white;
padding-top: 40px;
}
.top-header .header-name h1{
color: white;
display: block;
font-size: 24px;
font-weight: 600;
}
.top-header .header-image{
float: right;
position: relative;
}
.top-header .header-top-image{

position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
.top-header{
background:#147ce1;
}
Sau khi CSS ta được phần header thể hiện lên giao diện web như sau:

Hình 6: header sau khi hoàn thiện CSS

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 18


Đồ án tốt nghiệp đại học
CHƢƠNG 3. C I ĐẶT WORDPRESS
3.1. Cài ặt wordpress trên localhost
Bƣớc 1: Tải và cài ặt xampp

Bước 2: Tạo database vào http://localhost/phpmyadmin/ và nhấp vào Cơ sở dữ
li u để tạo database. Đặt tên database là db_cucbaochi và chọn định dạng
Utf8_generel_ci

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 19


Đồ án tốt nghiệp đại học
Bước 3:
 Tiến hành tải wordpress ở địa chỉ: /> Giải nén Wordpress vào thư mục htdocs của xampp và đổi tên thành
cucbaochi

Bước 4: Thêm thay thế core giao diện theme3us vào đường dẫn
C:\xampp\htdocs\cucbaochi\wp-content\themes\theme3us để mình tùy tỉnh giao
diện

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 20


Đồ án tốt nghiệp đại học
Mở trình duyệt và gõ vào đường dẫn http://localhost/cucbaochi/ ể cài ặt .
3.2. Cấu hình Wordpress
1. Nhập tên Database đã tạo ở trên: db_cucbaochi
2. Tên đăng nhập: admin
3. Mật khẩu

4. Sau khi cài đặt thành công

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 21


Đồ án tốt nghiệp đại học
CHƢƠNG 4: XÂY DỰNG WEBSITE TIN TỨC
4.1 Quá trình xây dựng giao di n:
4.1.1 Code HTML
 Đặt tên Class và ID cho các thẻ HTML khoa học. Chỉ đặt tên bằng tiếng anh
và có ràng buộc theo phân cấp cha con.
 Chia Website thành các phần Header, Main, Footer, Siderbar để dễ dàng
quản lý. Thêm bớt và tùy biến giao diện.

Hiển thị lên giao diện:

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 22


Đồ án tốt nghiệp đại học

4.1.2 Code CSS
Tùy biến giao diện cho HTML

 Đặt lại bố cục cho từng phần mình đã tạo trên HTML(sử dụng các tẻ thường
dùng Margin,Padding, Position, Float, Height, Width,vv….)
 Chọn Font-style cho trang.
 Chọn Width tùy biến theo chiều rộng của màn hình(Sử dụng Bootrap).
 Style màu sắc phù hợp với ý tưởng ban đầu.
 Khoảng cách dưới giữa các thẻ lớn là 30px, các thẻ nhỏ là 15px.
 Chia Width theo % để tránh trường hợp bị vỡ màn hình khi thu nhỏ về dạng
mobile, ipad, laptop có màn hình nhỏ
 Sử dụng CSS3 để tạo hiệu ứng cho Slider và Mouse Hover.

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 23


Đồ án tốt nghiệp đại học

Sau khi CSS xong ,giao diện hiện lên trình duyệt

NGUYỄN

HẮC ĐẠT – Lớp 53k2 - Khoa CNTT

Page 24