Thiết kế và chỉnh sửa giao diện cho website sử dụng hệ quản trị nội dung NukeViet (Đồ án tốt nghiệp)

B

GIÁO D

O

I H C DÂN L P H I PHÒNG
-------o0o-------

ÁN T T NGHI P
NGÀNH CÔNG NGH THÔNG TIN



I H C DÂN L P H I PHÒNG
-------o0o-------

THI T K VÀ CH NH S A GIAO DI N CHO
WEBSITE S D NG H QU N TR N I DUNG
NUKEVIET

CHÍNH QUY

H I PHÒNG - 2013



I H C DÂN L P H I PHÒNG
-------o0o-------

THI T K VÀ CH NH S A GIAO DI N CHO

WEBSITE S D NG H QU N TR N I DUNG
NUKEVIET

ng d n:

u

Sinh viên th c hi n:

Nguy

Mã s sinh viên:

1351010029

nh



NHI M V THI T K T T NGHI P

Sinh viên: Nguy

nh

Mã SV: 1351010029

L p: CT1301

Ngành: Công ngh Thông tin

tài: Thi t k và ch nh s a giao di n cho website s d ng h qu n tr n i
dung NukeViet



NHI M V

TÀI

N i dung và các yêu c u c n gi i quy t trong nhi m v

tài t t nghi p

1. N i dung
-

Bi t

c mã ngu n m là gì,tìm hi u các mã ngu n m hi

là tìm hi

c bi t

mã ngu n m NukeViet.

-

Phân tích c u trúc giao di n c a NukeViet 3.4

-

T ng h p các tài li u tham kh

-

Th c hi

t,c u hình và ch

n n i dung khóa lu n.
c giao di n trên mã ngu n m

NukeViet.
2. Các yêu c u c n gi i quy t
Các ph n m m c n thi

xây d ng

-

Web Server: Xampp

-

B

mã

ngu n

NukeViet.



CÁN B

NG D

TÀI T T NGHI P

ng d n th nh t:
H

u

H c hàm, h c v : Th
i H c Dân L p H i Phòng
N

ng d

ng d n th hai:
H
H c hàm, h c v

N

ng d

tài t t nghi

c giao

Yêu c u ph

c
n nhi m v

n nhi m v

Sinh viên

Cán b

ng d

ThS

H
HI

NG

n H u Ngh

u

PH N NH N XÉT TÓM T T C A CÁN B

Tinh th

c

NG D N

tài t t nghi p:

......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
..................................................
ng c
trong nhi m v

tài t t nghi p (so v i n i dung yêu c

ra

tài t t nghi p)

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

......................................................................................................................................
......................................................................................................................................
.........................................................
3.

m c a cán b

ng d n:

m ghi b ng s và ch )
......................................................................................................................................
................................................................................................................
N

Cán b
(

ng d n chính
Ký,

ghi

rõ

h

tên

)

PH N NH

A CÁN B

CH M PH N BI N

TÀI T T NGHI P
1.
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................

(

)

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

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


án t t nghi p

p H i Phòng

c tiên, em xin g i l i c
i h c Dân l p H

i Khoa Công ngh Thông tin
u ki
i th c hi

ng
án t t

nghi p này.
Qua bài báo cáo này, em xin chân thành c
Em xin c

i h c Dân l p H i Phòng, Ban giám hi u nhà
u ki n t t nh t trong su t th i gian h c

t p và làm t t nghi p.
Th

i tr c ti

ng d n em trong th i gian th c hi n
u ki n thu n l
em hoành thành

án t t nghi p. C
t t bài báo cáo. C
m c trong quá trình nghiên c
Các th
c hoàn thành t

n tình ch b
tài...

ng d n và gi

ông ngh Thông tin
án c a mình trong th i gian qua

Các thành viên di
trong quá trình nghiên c u.

, nukeviet

ng

u ki n cho

em r t nhi u

Cu i cùng em xin g i t i cha m , cô chú em l i c
nh t. C
om
u thu n l i nh t giúp con hoàn thành t t
vi c h c c a minh.
M
c nh

ts cc g
hoàn thi n báo cáo t t nghi p song do kh
n ch nên khóa lu n v n còn nhi u thi u sót. Vì v y em r t mong nh n
a các th y cô và b n bè.

M t l n n a em xin chân thành c
H
Sinh viên
Nguy

Nguy

nh

CT1301

1


L IC

.......................................................................................................................1

M C L C ............................................................................................................................2
DANH SÁCH CÁC HÌNH ..................................................................................................4
GI I THI U ........................................................................................................................7
: GI I THI U PH N M M NGU N M .................................................8

1.1 Khái ni m ph n m m ngu n m ......................................................................8
1.2 Phân lo i ph n m m ngu n m ........................................................................9
1.2.1 Application ................................................................................................9
1.2.2 Software framework ..................................................................................9
1.3 L i ích c a ph n m m ngu n m

iv

1.4 M t s lo i ph n m m ngu n m

i s d ng ................................9

ng g p .................................................9

: GI I THI U MÃ NGU N M

NUKEVIET.........................................12

2.1 Gi i thi u chung .............................................................................................12
2.1.1 Gi i thi u NukeViet 3.0...........................................................................12
2.1.2 NukeViet 3.0 là m t h th ng m nh........................................................13
2.1.3 NukeViet 3.0 thích h p cho m

ng .............................................13

2.1.4 Các phiên b n NukeViet..........................................................................14
2.2 L ch s phát tri n NukeViet ...........................................................................19
2.3

ng d ng c a NukeViet.................................................................................21
:

3.1

T, QU N TR N I DUNG NUKEVIET ...................................23

t NukeViet ............................................................................................23

3.1.1 Nh ng yêu c
3.1.2 Ti

t cho NukeViet ......................................................23
t NukeViet .....................................................................24

3.2 Qu n tr n i dung NukeViet ...........................................................................28
3.2.1 Các khái ni m c n bi t.............................................................................28
3.2.2 C u trúc t p tin
3.3 Mô t chi ti

c......................................................................31
..................................................................35

2


án t t nghi p

p H i Phòng

3.3.1

a NukeViet ..........................................................35

3.3.2

c tích h p s n trong NukeViet 3 ................40

3.3.3

n tr c a NukeViet.......................................................45
:XÂY D NG GIAO DI N CHO NUKEVIET ..........................................58

4.1 Gi i thi u theme c a NukeViet......................................................................58
4.2 C u trúc theme c a NukeViet ........................................................................58
4.2.1 Theme là gì? ............................................................................................58
4.2.2 NukeViet s d

th hi n trang web? ................58

4.2.3 C u trúc file c a m t theme trong NukeViet?.........................................59
4.2.4

c tên theme...................................................................................59

4.2.5

i c u trúc theme c a h th

c không? ..............66

4.3 Xây d ng theme .............................................................................................66
4.3.1 T ng quan thi t k theme cho NukeViet .................................................66
4.3.2 Xây d ng giao di

n ......................................................................67

4.3.3 Xây d ng giao di n nâng cao ..................................................................68
4.3.4 Xây d ng theme.......................................................................................69
K T LU N.........................................................................................................................75
CÁC TÀI LI U THAM KH O .......................................................................................76

Nguy

nh

CT1301

3


DANH SÁCH CÁC HÌNH
Hình 1. Mô hình ki n trúc h th ng NukeViet 3.0 .........................................18

Hình 3.1.2.1 Giao di n Xampp ......................................................................24
Hình 3.1.2.2 Giao di n phpMyAdmin ............................................................24
Hình 3.1.2.3 Giao di n Database ..................................................................24
Hình 3.1.2.4 Ch n ngôn ng
Hình 3.1.2.5 Ki

t..............................................................25

u ki

t .........................................................25

Hình 3.1.2.6 B n quy n NukeViet ..................................................................26
Hình 3.1.2.7 Ki m tra thông tin máy ch .......................................................27
Hình 3.1.2.8 C

d li u ..............................................................27

Hình 3.1.2.9 Thông tin Website và qu n tr Website .....................................27
Hình 3.1.2.10

t thành công ................................................28

Hình 3.3.3.1 Giao di n c u hình site .............................................................45
Hình 3.3.3.2 Giao di n c u hình php.............................................................45
Hình 3.3.3.4. Ti n ích m r ng ......................................................................46
Hình 3.3.3.5 Giao di n các bi
Hình 3.3.3.6 Giao di n các bi n ti

ng .................................................46

nh .....................................................46

Hình 3.3.3.7 Giao di n nh t ký h th ng .......................................................47
Hình 3.3.3.8 Giao di n qu n tr .....................................................................47
Hình 3.3.3.9 Giao di n thêm qu n tr ............................................................47
Hình 3.3.3.10 Giao di n c u hình qu n tr ....................................................48
Hình 3.3.3.11 Giao di n qu n lý CSDL ........................................................48
Hình 3.3.3.12 giao di n data backup .............................................................48
Hình 3.3.3.13 Giao di n qu n lý c u hình CSDL ..........................................48
Hình 3.3.3.14 Giao di n c u hình theo ngôn ng ..........................................49
Hình 3.3.3.15 Giao di n c u hình chung .......................................................49
Hình 3.3.16 Giao di n ti n trình t

ng.......................................................49

4


án t t nghi p

p H i Phòng

Hình 3.3.3.17 Giao di n c u hình SMTP.......................................................50
Hình 3.3.3.18 Giao di n c u hình FTP..........................................................50
Hình 3.3.3.19 Giao di n máy ch tìm ki m....................................................50
Hình 3.3.3.20 Giao di n qu n lý IP c m .......................................................51
Hình 3.3.3.21 Giao di n c u hình upload......................................................51
Hình 3.3.3.22 Giao di n d n d p h th ng ....................................................51
Hình 3.3.3.23 Giao di n chu

......................................................51

Hình 3.3.3.24 Gao di n h ng site theo t khóa .............................................52
Hình 3.3.3.25 Giao di n sitemap ping ...........................................................52
Hình 3.3.3.26 Giao di n ki m tra phiên b n..................................................52
Hình 3.3.3.27 Giao di n c u hình ki m tra phiên b n...................................53
Hình 3.3.3.28 Giao di n ngôn ng data ........................................................53
Hình 3.3.3.29 Giao di n ngôn ng theme ......................................................53
Hình 3.3.3.30 Giao di n t o ngôn ng giao di n. .........................................53
Hình 3.3.3.31 Giao di n ki m tra ngôn ng ..................................................54
Hình 3.3.3.32 Giao di n c u hình ngôn ng ..................................................54
Hình 3.3.3.33 Giao di n thi t l p module......................................................54
Hình 3.3.3.34 Giao di n thêm module o. .....................................................55
Hình 3.3.3.35 Giao di

ng ...................................55

Hình 3.3.3.36 Giao di n qu n lý theme .........................................................55
Hình 3.3.3.37 Giao di n thi t l p layout .......................................................55
Hinh 3.3.3.38 Giao di n qu n lý block ..........................................................56
Hình 3.3.3.39 Giao di n sao chép block ........................................................56
Hình 3.3.3.40 Giao di

t theme. .........................................................56

Hình 3.3.3.41 Giao di n upload.....................................................................57
Hình 3.3.3.42 Giao di n qu n lý upload........................................................57
c ch a code theme ..............................................................58

Nguy

nh

CT1301

5


Hình 4.2.4.1

c ch a block ..................................................................60

Hình 4.2.4.2

c ch a css......................................................................61
c ch a images ...............................................................61

Hình 4.2.4.4

c ch a js ........................................................................61
c ch a layout.................................................................62

Hình 4.2.4.6

c ch a layout..................................................................62

Hình 4.2.4.7

c system .........................................................................62

Hình 4.2.4.8 nh demo cho theme .................................................................64
Hình 4.2.4.9 Icon c a theme ..........................................................................64
Hình 4.2.4.10 Code trong file theme.php.......................................................64
c và file c

c thi t k ......................................68

Hình 4.3.2 code file theme.php ......................................................................69
Hình 4.3.4.1 Giao di n ch

Split trong Dreamweaver .............................71

Hình 4.3.4.2 Code và logo website. ...............................................................72
Hình 4.3.4.3 Giao di n ph n header..............................................................72
Hình 4.3.4.4 Giao di n ph n footer ...............................................................72
Hình 4.3.4.5 Giao di n sitelink ......................................................................73
Hình 4.3.4.6 Demo websie hpu ......................................................................74

6


án t t nghi p

p H i Phòng

Ph n m m ngu n m là ph n m m v i mã ngu
m t gi y phép ngu n m . Gi y phép này cho phép b t c
ho

c công b và s d ng

nghiên c u,

i, c i ti n ph n m m, sao chép và phân ph i ph n m m
i mà không ph i tr ti n b n quy
il
Ph n m m ngu n m

d

i
c.

i mã ngu n m

i

tr
t nhi u d ng m
m:
ph n c ng, ph n m m ngu n m , tài li u m ... Mã ngu n m ngày nay phát tri n
v it

khá cao, cho th y nó có nhi

Vi t Nam mã ngu n m gi
phát tri n mã ngu n m
m

ng l
il

nr

c s d ng và
c quan tâm, nó giúp

gi m thi u ngu n tài chính khi chi tr b n quy n... Nh ng mã ngu n m thông d ng
Vi
CMS, Magento, phpBB,
vBulletin, myBB... Ph
n NukeViet, NukeViet là s n ph m mã ngu n m
c
i Vi t. Hi
ng và áp d ng h u h t các
tin t
n t , các website cá nhân cho t i h th ng website doanh
nghi p.

Nguy

nh

CT1301

7


:G
1.1
Ph n m m ngu n m hay còn g i là ph n m m mã ngu n m (Open source
software) là nh ng ph n m

c vi t và cung c p m t cách t do.
i dùng
không nh
c dùng ph n m
ch nh s a, nâng c p, c i ti

c t i mã ngu n c a ph n m
n c a mã ngu n và m

r ng cho nhu c u công vi c c a mình.
Ti n ích mà ph n m m mã ngu n m mang l i chính là t
nghiên c
c u công vi c, phân ph i l i cho c
vì m
ng.
M t

u ki

do s

d ng

nh s a theo nhu

ng, t do c i ti

p

c áp d ng nh t là GPL: GNU General Public Licence

c a t ch c Free Software Foundation.
m phân bi
Tác gi g c gi b n quy n v ph n m
hi u, phát tri n, công b
khai thác

i quy n tìm
i s n ph m...

Tác gi s d ng lu t b n quy
b
m các quy
b vi ph m
iv it tc m
i, trên m i ph n m m có s d ng mã ngu n m c a mình.
m th
c g i là hi u ng virut (virus effect) vì nó bi n
t t c các ph n m m có dùng mã ngu
n thành ph n n: c u hình các c ng thanh toán n u có
s d ng 1 ho c nhi u c ng thanh toán tr c tuy n: nganluong.vn,
baokim.vn, paypal.com
+ C u hình module: thi t l p các thông s cho h th ng bán hàng
+ Qu
con,...)

s n ph m: thêm s

s n ph m (cái, chi c,

+ Qu n lý danh m c lo i s n ph m: thêm, s a, xóa danh m c lo i s n
ph m...
+ Qu n lý nhóm s n ph m (theo tiêu chí): thêm, s a, xóa các nhóm s n
ph m.

44


án t t nghi p

p H i Phòng

+ Qu n lý các block (nhóm s n ph m).
+ Qu n lý danh sách hãng s n xuát.
+ Qu n lý danh sách các s n ph m: thêm, s a, xóa, tìm ki m s n ph m
+ Qu
3.3.3
Thông tin h th ng
+ C u hình site

Hình 3.3.3.1 Giao di n c u hình site
+ C u hình PHP

Hình 3.3.3.2 Giao di n c u hình php
+ Ti n ích m r ng

Nguy

nh

CT1301

45


Hình 3.3.3.4. Ti n ích m r ng
+ Các bi

ng

Hình 3.3.3.5 Giao di n các bi
+ Các bi n ti

ng

nh

Hình 3.3.3.6 Giao di n các bi n ti

nh

+ Nh t ký h th ng

46