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

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

TRƯỜNG ĐẠ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

HẢI PHÒNG 2013

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

TRƯỜNG ĐẠ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

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY

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

HẢI PHÒNG - 2013

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

TRƯỜNG ĐẠ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

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY

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

Giáo viên hướng dẫn:

Sinh viên thực hiện:

Mã số sinh viên:

ThS Đỗ Văn Chiểu

Nguyễn Văn Thịnh

1351010029

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

CỘNG HÒA XÃ HỘI CHỦNGHĨA VIỆT NAM

Độc lập - Tựdo - Hạnh phúc

-------o0o-------

TRƯỜNG ĐẠI HỌC DÂN LẬP HẢI PHÒNG

NHIỆM VỤ THIẾT KẾ TỐT NGHIỆP

Sinh viên: Nguyễn Văn Thịnh

Lớp: CT1301

Mã SV: 1351010029

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

Tên đề 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ện có,đặc biệt

là tìm hiểu kĩ về 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ảo có liên quan đến nội dung khóa luận.

- Thực hiện cài đặt,cấu hình và chạy đượ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ết để xây dựng

- Web Server: Xampp

- Bộ

mã

nguồn

NukeViet.

CÁN BỘ HƢỚNG DẪN ĐỀ TÀI TỐT NGHIỆP

Ngƣời hƣớng dẫn thứ nhất:

Họ và tên: Đỗ Văn Chiểu

Học hàm, học vị: Thạc Sĩ

Cơ quan công tác: Trường Đại Học Dân Lập Hải Phòng

Nội dung hướng dẫn: …………………………………………………………..

………………………………………………………………………………………

…………………………………………………………………

Ngƣời hƣớng dẫn thứ hai:

Họ và tên: …………………………………………………………………….

Học hàm, học vị: …………………………………………………………….

Cơ quan công tác: ……………………………………………………………

Nội dung hướng dẫn: …………………………………………………………..

………………………………………………………………………………………

…………………………………………………………………

Đề tài tốt nghiệp được giao

Yêu cầu phải hoàn thành trước

Đã nhận nhiệm vụ: Đ.T.T.N

Sinh viên

ngày tháng năm 2013

Đã nhận nhiệm vụ: Đ.T.T.N

Cán bộ hướng dẫn Đ.T.T.N

ThS Đỗ Văn Chiểu

Hải Phòng, ngày ............tháng.........năm 20...

HIỆU TRƯỞNG

GS.TS.NGƯT Trần Hữu Nghị

PHẦN NHẬN XÉT TÓM TẮT CỦA CÁN BỘ HƢỚNG DẪN

1. Tinh thần thái độ của sinh viên trong quá trình làm đề tài tốt nghiệp:

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

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

2. Đánh giá chất lượng của đề tài tốt nghiệp (so với nội dung yêu cầu đã đề ra

trong nhiệm vụ đề tài tốt nghiệp)

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

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

3. Cho điểm của cán bộ hướng dẫn:

( Điểm ghi bằng số và chữ )

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

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

Ngày.......tháng.........năm 20...

Cán bộ hƣớng dẫn chính

(

Ký, ghi rõ họ tên

)

PHẦN NHẬN XÉT ĐÁNH GIÁ CỦA CÁN BỘ CHẤM PHẢN BIỆN

ĐỀ TÀI TỐT NGHIỆP

1. Đánh giá chất lƣợng đề tài tốt nghiệp (về các mặt nhƣ cơ sở lý luận, thuyết

minh chƣơng trình, giá trị thực tế, ...)

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

2. Cho điểm của cán bộ phản biện

( Điểm ghi bằng số và chữ )

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

Ngày.......tháng.........năm 20...

Cán bộ chấm phản biện

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

Đồ án tốt nghiệp

Trường ĐH Dân Lập Hải Phòng

LỜI CẢM ƠN

Trước tiên, em xin gửi lời cảm ơn tới Khoa Công nghệ Thông tin – Trường

Đại học Dân lập Hải Phòng đã tạo điều kiện và cho em cơ hội thực hiện đồ án tốt

nghiệp này.

Qua bài báo cáo này, em xin chân thành cảm ơn:

Em xin cảm ơn Trường Đại học Dân lập Hải Phòng, Ban giám hiệu nhà

trường, các phòng ban nhà trường đã tạo điề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ầy Đỗ Văn chiểu, người trực tiếp hưỡng dẫn em trong thời gian thực hiện

báo cáo đồ án tốt nghiệp. Cảm ơn thầy đã tạo điều kiện thuận lợi để em hoành thành

tốt bài báo cáo. Cảm ơn thầy đã tận tình chỉ bảo, hưỡng dẫn và giải đáp các vướng

mắc trong quá trình nghiên cứu đề tài...

Các thầy cô trong ban thư kí khoa Công nghệ Thông tin đã tạo điều kiện cho

em được hoàn thành tốt bài đồ án của mình trong thời gian qua

Các thành viên diễn đàn sinhvienit, zwebz, nukeviet đã giúp đỡ em rất nhiều

trong quá trình nghiên cứu.

Cuối cùng em xin gửi tới cha mẹ, cô chú em lời cảm ơn, biết ơn chân thành

nhất. Cảm ơn cha mẹ, cô chú đã tạo mọi điề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 dù đã hết sức cố gắng để hoàn thiện báo cáo tốt nghiệp song do khả

năng còn hạ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

được những đóng góp chân tình của các thầy cô và bạn bè.

Một lần nữa em xin chân thành cảm ơn!

Hải Phòng, Ngày....tháng.... năm 2013.

Sinh viên

Nguyễn Văn Thị

Nguyễn Văn Thịnh – CT1301

1

MỤC LỤC

L Ờ I C ẢM ƠN .......................................................................................................................1

M Ụ C L Ụ C ............................................................................................................................2

DANH SÁCH CÁC HÌNH ..................................................................................................4

GI Ớ I THI Ệ U ........................................................................................................................7

CHƢƠNG 1 : 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 framewor k ..................................................................................9

1.3 L ợ i ích c ủ a ph ầ n m ề m ngu ồ n m ở đố i v ới ngườ i s ử d ụ ng ................................9

1.4 M ộ t s ố lo ạ i ph ầ n m ề m ngu ồ n m ở thườ ng g ặ p .................................................9

CHƢƠNG 2 : GI Ớ I THI Ệ U MÃ NGU Ồ N M Ở NUKEVIET.........................................12

2.1 Gi ớ i thi ệ u chun g .............................................................................................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 ọi đối tượ n g .............................................13

2.1.4 Các phiên b ả n NukeViet..........................................................................14

2.2 L ị ch s ử phát tri ể n NukeVie t ...........................................................................19

2.3 Ứ ng d ụ ng c ủ a NukeViet.................................................................................21

CHƢƠNG 3 : CÀI ĐẶ T, QU Ả N TR Ị N Ộ I DUNG NUKEVIET ...................................23

3.1 Cài đặ t NukeVie t ............................................................................................23

3.1.1 Nh ữ ng yêu c ầu cài đặ t cho NukeVie t ......................................................23

3.1.2 Ti ến trình cài đặ t NukeViet .....................................................................24

3.2 Qu ả n tr ị n ộ i dung NukeVie t ...........................................................................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 và thư mụ c......................................................................31

3.3 Mô t ả chi ti ết tính năng NukeViet ..................................................................35

2

Đồ án tốt nghiệp

Trường ĐH Dân Lập Hải Phòng

3.3.1 Các tính năng chính củ a NukeVie t ..........................................................35

3.3.2 Các module người dùng đượ c tích h ợ p s ẵ n trong NukeViet 3 ................40

3.3.3 Các tính năng quả n tr ị c ủ a NukeViet.......................................................45

CHƢƠNG 4 :XÂY D Ự NG GIAO DI Ệ N CHO NUKEVIE T ..........................................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 ụng theme như thế nào để 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 Quy ướ c tên theme...................................................................................59

4.2.5 Thay đổ i c ấ u trúc theme c ủ a h ệ th ống NukeViet đượ c không? ..............66

4.3 Xây d ự ng theme .............................................................................................66

4.3.1 T ổ ng quan thi ế t k ế theme cho NukeVie t .................................................66

4.3.2 Xây d ự ng giao di ện cơ bả 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ễn Văn Thị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 ữ cài đặ t..............................................................25

Hình 3.1.2.5 Ki ểm tra điề u ki ện cài đặ t .........................................................25

Hình 3.1.2.6 B ả n quy ề n NukeVie t ..................................................................26

Hình 3.1.2.7 Ki ể m tra thông tin máy ch ủ .......................................................27

Hình 3.1.2.8 C ấu hình cơ sở 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 Thông báo cài đặ 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 ộ n g ......................................................................46

Hình 3.3.3.5 Giao di ệ n các bi ến môi trườ ng .................................................46

Hình 3.3.3.6 Giao di ệ n các bi ế n ti ền đị 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ý CSD L ........................................................48

Hình 3.3.3.12 giao di ệ n data backu p .............................................................48

Hình 3.3.3.13 Giao di ệ n qu ả n lý c ấ u hình CSD L ..........................................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 chun g .......................................................49

Hình 3.3.16 Giao di ệ n ti ế n trình t ự độ ng.......................................................49

4

Đồ án tốt nghiệp

Trường ĐH Dân Lậ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 ố n g ....................................................51

Hình 3.3.3.23 Giao di ệ n chu ẩn đoán site ......................................................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 ữ them e ......................................................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 ện cài đặt và đóng gói tự độ 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 bloc k ........................................................56

Hình 3.3.3.40 Giao di ện cài đặ 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

Hình 4.1 Thư mụ c ch ứ a code theme ..............................................................58

Nguyễn Văn Thịnh – CT1301

5