XÂY DỰNG WEBSITE CÔNG NGHỆ THÔNG TIN

Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

BỘ CÔNG THƯƠNG
TRƯỜNG CAO ĐẲNG CÔNG THƯƠNG TP.HCM
KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN TỐT NGHIỆP

ĐỀ TÀI: XÂY DỰNG WEBSITE CÔNG
NGHỆ THÔNG TIN
Giảng viên hướng dẫn:

HỒ DIÊN LỢI

Trang 1


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................

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

Trang 2


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

PHỤ LỤC
Contents
ĐỒ ÁN TỐT NGHIỆP......................................................................................................................1
TP. Hồ Chí Minh – Tháng 05/2014...................................................................................................1
LỜI NÓI ĐẦU..................................................................................................................................3

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN............................................................................4
TP. Hồ Chí Minh, ngày 29 tháng 05 năm 2014.................................................................................4
PHỤ LỤC..........................................................................................................................................5
Chương 1 - TỔNG QUAN................................................................................................................6
1.1

Lý do chọn đề tài:...............................................................................................................6

1.2

Đối tượng nghiên cứu:........................................................................................................6

1.3

Mục tiêu đề tài:...................................................................................................................7

1.4

Phạm vi giới hạn nghiên cứu thiết kế:................................................................................7

1.5

Ý nghĩa đề tài:.....................................................................................................................7

Chương 2 – TÌM HIỂU VỀ JOOMLA..............................................................................................7
2.1

Giới thiệu sơ lược về joomla:.............................................................................................7

2.2

Cấu trúc của joomla:...........................................................................................................7

2.2.1

Quản Lý component:..................................................................................................8

2.2.2

Quản lý Module:..........................................................................................................8

2.2.3

Quản lý Template:.......................................................................................................9

2.2.4

Cách đưa module,template vào joomla.....................................................................11

2.3

Sử dụng WampSever chạy joomla:...................................................................................13

2.4

Cài đặt joomla:..................................................................................................................17

Chương 3 – THIẾT KẾ CÁC THÀNH PHẦN CHÍNH CỦA WEBSITE:.....................................21
3.1

Cài đặt template:...............................................................................................................21

3.1.1

Thiết kế template:......................................................................................................21

3.1.2

Vẽ cấu trúc khung :...................................................................................................25

3.1.3

Cài đặt template mình vừa tạo :................................................................................26

3.1.4

Tạo menu và đặt vị trí cho trang web :......................................................................26

3.1.5

Cài đặt những module cần thiết cho trang web:........................................................28

3.2

Viết bài:.............................................................................................................................28

KẾT THÚC....................................................................................................................................31

Trang 3

Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

Chương 1 - TỔNG QUAN
1.1 Lý do chọn đề tài:
Với sự phát triển nhảy vọt của công nghệ thông tin hiện nay, Internet ngày càng giữ
vai trò quan trọng trong các lĩnh vực khoa học kĩ thuật và đời sống. Dĩ nhiên các bạn đã
được nghe nói nhiều về Internet, nói một cách đơn giản, Internet là một tập hợp máy tính
nối kết với nhau, là một mạng máy tính toàn cầu mà bất kì ai cũng có thể kết nối bằng
máy PC của họ. Với mạng Internet, tin học thật sự tạo nên một cuộc cách mạng trao đổi
thông tin trong mọi lĩnh vực văn hóa,giáo dục, xã hội, chính trị, kinh tế .
Trong công cuộc số hiện nay thì website đóng một vai trò không thể thiếu trong
mạng internet.Website thì rất đa dạng về nội dung và đa dạng về thể loại.
Ví dụ:
 Trong lĩnh vực giáo dục gồm có :website trường cao đẳng công
thương,website trường đại học sư phạm kỹ thuật….
 Trong lĩnh vực văn hóa gồm có:website giới thiệu về danh lam thánh cảnh
việt nam,website giới thiệu về đặc sản,di tích lịch sử việt nam…
 Trong lĩnh vực xã hội-chính trị:website báo công an,báo tuổi trẻ…
 Trong

lĩnh

vực

giải

trí:facebook,webgame…

Qua đó ta thấy được website đóng vai trò không thể thiếu trong lĩnh vực công nghệ
thông tin và để có thể hình thành được một trang web thì ta cần phải qua khâu thiết
kế.Nên việc thiết kế web đóng một vai trò rất lớn trong công nghệ kỹ thuật số.Sau khi
học ở trường cao đẳng công thương em đã nắm bắt được rất nhiều kiến thức về website
qua đó em thấy được website đóng vai trò không thể thiếu trong lĩnh vực giáo dục cũng
như những lĩnh vực khác…qua đó chúng em rất muốn xây dựng một website trong lĩnh
vực giáo dục,nên đồ án tốt nghiệp này chúng em đã chọn đề tài thiết kế website trang
Khoa Công Nghệ Hóa Học.

1.2 Đối tượng nghiên cứu:
Sau khi bàn bạc và thống nhất nhóm chúng em đã chọn đối tượng để thiết kế một
trang web là joomla.Vì những lý do sau:
 Việc thiết kế bằng joomla sẽ giúp rút ngắn thời gian,tiền bạc.
 Giúp cho việc bảo mật an toàn hơn.
Trang 4


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

 Dễ dàng cho những bạn mới,tiếp cận nhanh hơn…

1.3 Mục tiêu đề tài:
Nghiên cứu joomla để thiết kế trang khoa công nghệ hóa học,nhằm giúp cho học
sinh,sinh viên thuận tiện hơn trong việc tìm kiếm thông tin,xem điểm,đăng kí môn học
cũng như nắm bắt thông tin kịp thời …

1.4 Phạm vi giới hạn nghiên cứu thiết kế:

 Phạm vi:Khoa công nghệ hóa học
 Giới hạn:do phạm vi thời gian có hạn,nên trang web khoa chỉ mang tính chất
thử nghiệm,chưa thể đi vào thực tế được

1.5 Ý nghĩa đề tài:
Ngày nay trong công cuộc công nghiệp hóa,hiện đại hóa đất nước thì công nghệ
hóa học đóng vai trò không thể thiếu.ở nước ta công nghệ hóa học còn yếu kém so với
những nước khác,nên ta cần tuyên truyền cho mọi người biết được vai trò thật sự của công
nghệ này và lợi ích của nó mang lại.Ví dụ như:nghiên cứu công nghệ hóa học để tìm ra
nguồn năng lượng mới cung cấp thay cho khí đốt,điện…

Chương 2 – TÌM HIỂU VỀ JOOMLA
2.1Giới thiệu sơ lược về joomla:
Joomla! là một hệ quản trị nội dung mã nguồn mở. Joomla! được viết bằng ngôn
ngữ PHP và kết nối tới cơ sở dữ liệuMySQL, cho phép người sử dụng có thể dễ dàng xuất
bản các nội dung của họ lên Internet hoặc Intranet.
Joomla! có các đặc tính cơ bản là: bộ đệm trang (page caching) để tăng tốc độ hiển
thị, lập chỉ mục, đọc tin RSS (RSS feeds), trang dùng để in, bản tin nhanh, blog, diễn đàn,
bình chọn, lịch biểu, tìm kiếm trong site và hỗ trợ đa ngôn ngữ.
Joomla! được phát âm theo tiếng Swahili như là jumla nghĩa là "đồng tâm hiệp
lực".
Joomla! được sử dụng ở khắp mọi nơi trên thế giới, từ những website cá nhân cho
tới những hệ thống website doanh nghiệp có tính phức tạp cao, cung cấp nhiều dịch vụ và
ứng dụng. Joomla! có thể dễ dàng cài đặt, dễ dàng quản lý và có độ tin cậy cao.
Joomla! có mã nguồn mở do đó việc sử dụng Joomla! là hoàn toàn miễn phí cho tất
cả mọi người trên thế giới.
Trang 5


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

2.2Cấu trúc của joomla:

Joomla gồm có 3 tầng hệ thống. Tầng dưới cùng là mức nền tảng, chứa các thư
viện và các plugin (còn được biết với tên gọi mambot). Tầng thứ hai là mức ứng dụng và
chứa lớp JApplication. Hiện tại tầng này gồm 3 lớp con: JInstallation, JAdministrator và
JSite. Tầng thứ ba là mức mở rộng. Tại tầng này có các thành phần (component), mô đun
(module) và giao diện (template) được thực thi và thể hiện.

2.2.1 Quản Lý component:

Các component là những thành phần nội dung đặc biệt hay những ứng dụng.
Joomla bao gồm một số nhân component và hỗ trợ khả năng tự tăng cường tính năng với
component của các
hãng thư ba. Những component được gắn sẵn, cai bao gồm trong Joomla, là một phần của
tính năng nhân. Bạn sẽ tìm thấy những compnent của hãng thứ ba tại Joomla Forge cũng
như tại rất
nhiều nhà phát triển thứ ba vầ những site cộng đồng.
Cấu hình và trợ giúp thêm thường được cung cấp với kèm với chính component.
Những component là mô phỏng tự nhiên, điềunày làm nó có khả năng tăng cường các
chức năng của Joomla trong bất kì hoàn cảnh nào.
Một component đặc trưng giống như Menu item. Những visitor và/hay những user có thể
thấy content của component bằng cách click vào liên kết của Menu item này. Nó thường
được hiển thị trong vùng nội dung chính của site.
Những component được bao gồm với Joomla là :
ƒ Banners – ô quảng cáo
ƒ Contacts – Liên hệ
ƒ Newsfeeds – điểm tin

Trang 6


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

ƒ Polls – thăm dò
ƒ Web Links – liên kết web

2.2.2 Quản lý Module:
Modules thường được dùng để hiển thị những thông tin khác nhau và/hoặc
những tính năng tương tác trong toàn bộ site Joomla của bạn.
Một Module có thể chứa hầu như bất kì thứ gì từ những văn bản đơn giản,đến HTML,
đến những ứng dụng hoàn toàn độc lập của các hãng thứ ba. Những Module cũng có thể
hiển thị nội dung tương tác, như các poll (thăm dò ý kiến), những tagboard, tin mới nhất,
tin khẩn và nhiều nữa. Các Site Module khác với các Administrator Module bởi vì
chúng hiển thị những nội dung trong Front-end của site trong khi nhưng Admini Module
liên quan đến các tác vụ và/hoặc những tính năng khác nhau của Administrative (hoặc
Back-end).
Các Module có thể được tạo bởi bạn (costom/user module) hay được tải về và cài đặt.
Quản lý cac module luôn luôn làm trong Administrator (Admin Seciton). Vào Modules
Module Manager trên thanh Menu. Ở đó bạn có thể cài đặt/tháo bỏ một module và
chỉnh sửa nhứng cấy hình phổ biến như là: tên, những trang nó xuất hiện, vùng đặt nó,
và cấp độ truy cập. Từ danh sách chọn module bạn muốn cấu hình.
Module Manager là bộ đầu tiên thiết đặt hiển thị số lượng chính xác module. Tận cuối
danh sách ban có thể thấy một chức năng tổ chức trang, nơi cho phép bạn điều hướng
đến bộ cài đặt kế tiếp của các module trong danh sách. Bạn cũng có thể cài đặt số
module được hiển thị trên một trang băng các chọn số trên hộp chọn đổ xuống trên góc
trên phải màn hình.

Ở đây bạn có thể tìm thấy một danh sách của tất cả bộ thiết lập mặc đinh site module
khi cài đặt Joomla. Mỗi cái quy chiếu đến một loại module cụ thể được định từ trước.
Dưới những tiêu đề danh sách cụ thể được hiển thị những trạng thái của nhưng Module
được cài đặt trên hệ thống.
Những Module được xác đinh bằng môt kểu (ví dụ mod_mainmenu). Nhiều thể
hiện của cùng một module có thẻ được tạo ra bằng cách chép môt loại module cụ thể, cho
nó một tiêu đề khác và các thông số khác theo nhu cầu của bạn

2.2.3 Quản lý Template:
Cung cấp một nơi làm việc để cài đặt và điều khiển các template. Các
Administrator và Manager với quyền cấp phép đặc biệt cho Template Manager có thể
chỉnh sửa template. Cái nhìn đầu tiên cung cấp cho bạn một danh sách các template đã cài

Trang 7


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

đặt. Một dấu kiểm xanh hiện lên ngay bên tên của template được xuất bản hiện tại. Vài
thông tin về mỗi template cũng được hiện lên.
Các template cũng có thể được gán cho những phần khác nhau của site, giống như các
module. Nếu bạn có nhiều template được cài đặt trên hệ thống Joomla, bạn có thể điểu
khiển ngay chúng một cách thuận lợi. Bạn có thể gán một template cho một (hay nhiều)
trang đặc biệt từ than công cụ.
Khi bạn chọn một template để gán, bạn sẽ được thấy một danh sách các trang dể chọn.
Bạn có thể chọn nhiều trang từ menu và gán chúng cho một template. Khi gán song,
template sẽ hiện khi người dùng click vào những trang này. Nó sẽ đè lên template mặc
định.

Nếu bạn muốn xóa một template đã được gán từ một (hay nhiều) trang, chọn lai template
đã được gán (bằng nút radio), rồi click biểu tượng “Assign” trên thanh công cụ. Bây giờ
bạn có thể chọn những item bạn không muốn gán cho template này hay khác, hoặc click
“None” để xóa hoàn toàn việc gán cho template này.
Template Manager cũng cho phép bạn chuyển đổi qua lại template mặc định (dùng nút
Default)
sẽ xuất hiện trên tất cả các trang mà không có gán đặc biệt nào.
CHÚ Ý : Cả template gán và template mặc định sẽ bị gạt qua một bên bằng Template
Selector module, nếu có dùng.
Để biết cách cài đặt và tháo bỏ cả những Site Template và những Administrator Template,
click vào liên kết Help Screen này

Install/Uninstall a Language or Template

Trang 8


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

Để biết cách chỉnh sửa và xuất bản cả những Site Template và những Administrator
Template, lick vào liên kết Help Screen này.

Template Manager
CHÚ Ý :Những Administrator Template có thể bật tắt được bằng cách nhấn biểu tượng
“Publish”. Chúng không thể gán cho những trang trong Administrator.

2.2.4 Cách đưa module,template vào joomla
 Bước 1:Đưa con trỏ chuột vào extensions sổ xuống,rồi ấn vào extensions

manager để install module hoặc template.

Trang 9


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

 Bước 2:Chọn tệp cần upload



Bước 3:Sau khi chọn xong tập tin cần upload xong thì ấn vào upload &install

Trang 10


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

2.3Sử dụng WampSever chạy joomla:
Để có thể chạy được joomla thì cài đặt và chạy wampsever

Trang 11


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

Trang 12


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

Trang 13


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

Trang 14


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

2.4Cài đặt joomla:
 Localhost là thuật ngữ việc chỉ việc sử dụng chương trình Web Server trên máy tính cá
nhân để làm máy chủ web. (Xem hướng dẫn cách cài đặt chương trình Server với
WAMP và XAMPP).
 Khởi động chương trình Server.
 Do Joomla! có sử dụng cơ sở dữ liệu (Database) nên bạn phải tạo trước Databse và ghi
nhớ các thông tin này. (Xem hướng dẫn Cách tạo Database bằng phpMyAdmin trên

localhost).
 Bạn hãy giải nén toàn bộ thư mục và tập tin trong gói cài đặt Joomla! vào thư mục web
gốc (Web root) thư mục này thường có tên là www hoặc public_html.

Trang 15


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

Các thư mục và tập tin của Joomla!
Cài đặt Joomla! 1.7.x trên localhost
 Mở trình duyệt web và nhập http://localhost vào ô địa chỉ của trình duyệt sau đó
nhấn Go hoặc phím Enter.
Địa chỉ web trên localhost
Chương trình cài đặt Joomla sẽ xuất hiện trong cửa sổ của trình duyệt. Sau đây là các
bước cài đăt Joomla! 1.7 trên Localhost
 Choose language (Chọn ngôn ngữ cài đặt)
Bạn hãy chọn ngôn ngữ cài đặt. Đây chỉ là ngôn ngữ hiển thị trong quá trình cài đặt
sau khi cài đặt xong nếu ngôn ngữ mà bạn chọn đã được tích hợp sẵn trong bộ cài đặt thì
Joomla! sẽ hiển thị luôn ngôn ngữ này, nếu không thì sẽ hiển thị ngôn ngữ mặc định là
tiếng Anh và bạn cần phải tự tay cài đặt thêm gói ngôn ngữ của mình. Sau khi chọn xong
nhấn Next.
Chọn ngôn ngữ cài đặt Joomla!
 Pre-Installation check (Kiểm tra trước khi cài đặt)
Để đảm bảo quá trình cài đặt và sử dụng Joomla! được tốt nhất, chương trình sẽ
kiểm tra trước các thông số của máy chủ web xem có phù hợp với Joomla! hay không.
Đây cũng chính là các thông số cần biết để sau này chọn Host cho các trang web được
thiết kế bằng Joomla!

Tất cả các thông số đều phải có màu xanh như trong hình, nếu có thông số nào màu
đỏ thì chứng tỏ thông số đó không phù hợp với Joomla! bạn cần phải thay đổi lại thông số
này và nhấn vào nút Check Again để kiểm tra lại.
Nếu tất cả thông số đều đúng thì bạn hãy nhấn Next để tiếp tục.

Trang 16


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

Kiểm tra trước khi cài đặt Joomla!
Database Type: Chọn loại cơ sở dữ liệu, thông thường là MySQL
1) Host Name: Nhập tên của Host, thông thường là localhost
2) Username: Nhập tên của tài khoản truy cập Database, do cài đặt trên Localhost nên tên
truy cập này thường mặc định thường là root
3) Password: Nhập mật khẩu truy cập Database, do cài đặt trên Localhost nên mật khẩu
truy cập này để trống (không có mật khẩu).
4) Database Name: Nhập tên của Database, đây là tên được bạn đặt lúc tạo Database.
5) Table Prefix: Tiền tố của các bảng dữ liệu, sẽ được Joomla! 1.7 tạo một cách ngẫu
nhiên, bạn có thể đặt lại theo ý mình nếu muốn.
6) Backup/Remove: Lựa chọn Sao lưu (Backup) hay Xóa (Remove) các bảng dữ liệu đã
có sẵn nếu sử dụng lại Database cũ.
Nhấn Next để tiếp tục. Nếu các thông tin khai báo đúng thì chương trình cài đặt sẽ
chuyển sang bước kế tiếp, nếu không thì chương trình sẽ yêu cầu bạn nhập đúng các thông
tin mới có thể tiếp tục được.
 FTP Configuration (Thiết lập cấu hình FTP)
Đây là phần thiết lập FTP, một giao thức truyền tập tin trên mạnginternet. Bước cài
đặt này thông thường không cần phải thực hiện trừ khi đối với một số Host có yêu cầu.

Bạn hãy bỏ qua các thông số này và nhấn Next để tiếp tục (Sau này có thể thiết lập lại khi
cần thiết trong phần quản lý Joomla!).

Trang 17


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

Thiết lập cấu hình FTP
 Configuration (Phần cấu hình)
Tại bước này bạn sẽ thiết lập các thông tin cho trang web của mình.

Thiết lập cấu hình cho Joomla!
1) Site Name: Nhập tên cho trang web, đây là tên của trang web chứ không phải tên miền
(Domain Name) tuy nhiên nếu muốn bạn cũng vẫn có thể đặt theo tên miền.
Ngoài ra bạn cũng có thể nhấn vào Advanced Settings - optional để nhập thêm thông tin:
- Meta Description: Nhập phần mô tả ngắn để giới thiệu cho nội dung của trang web.
- Meta Keywords: Nhập các từ khóa có liên quan đến nội dung của trang web, từ khóa này
giúp người sử dụng tìm kiếm được trang web của bạn khi sử dụng các công cụ tìm kiếm
(yahoo, google,...). Bạn có thể nhập nhiều từ khóa, mỗi từ cách nhau bởi dấu phẩy (,).
2) Admin Email: Nhập địa chỉ email của người quản trị trang web, đây cũng chính là địa
chỉ Email dùng để trao đổi thông tin tự động giữa trang web và các thành viên.
3) Admin Username: Đặt tên cho tài khoản dùng để truy cập vào phần quản trị của trang
web, có thể đặt tên tùy ý, đây là tài khoản có quyền hạn cao nhất (Super Admin).
4) Admin Password: Đặt mật khẩu cho tài khoản quản trị của trang web.
5) Confirm Admin Password: Nhập lại một lần nữa để xác nhận mật khẩu này.
Trang 18

Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

6) Install Sample Data (Cài đặt dữ liệu mẫu), nếu đây là lần đầu tiên cài đặt và sử dụng
Joomla! thì bạn hãy nhấn vào nút này để tìm hiểu cách thiết lập cấu hình và sử dụng
thông qua các dữ liệu mẫu. Sau khi nhấn vào nút này thì nó sẽ thông báo dữ liệu mẫu
đã được cài đặt và ẩn đi.
 Finish (Hoàn tất cài đặt)

Hoàn tất cài đặt Joomla!

Chương 3 – THIẾT KẾ CÁC THÀNH PHẦN CHÍNH CỦA WEBSITE:
3.1Cài đặt template:

3.1.1 Thiết kế template:

 Bước 1:Chuẩn bị
Download template mẫu webx
 Bước 2:Thiết kế giao diện
Cấu trúc giao diện

Trang 19


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

Template_demo
-images
-css
-js
-html(sao chép từ template mẫu 2.5)
-favicon.ico
-template_thumbnail.png
-templateDetails.xml
-index.php

Trang 20


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

 Bước 3:Chuyển giao diện sang template joomla

Trang 21


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

Kết quả khung
Index.php để xác định vị trí module

TemplateDetails.xml đặt vị trí module

Trang 22


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

 Bước 3:Cài đặt joomla bình thường:
3.1.2 Vẽ cấu trúc khung :

3.1.3 Cài đặt template mình vừa tạo :

Trang 23


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

Chọn template mình vừa tạo:

Trang 24


Đồ Án Tốt Nghiệp

GVHD:Hồ Diên Lợi

3.1.4 Tạo menu và đặt vị trí cho trang web :

Tạo menu con cho những menu mình vừa tạo:
Trang 25