XÂY DỰNG và THIẾT kế WEBSITE

MỤC LỤC
MỤC LỤC......................................................................................................1
PHẦN MỞ ĐẦU..............................................................................................1
1. Lý do, mục đích chọn đề tài.....................................................................1
2. Giới thiệu tổng quan về Joomla................................................................2
3. Mục tiêu của Website:...............................................................................4
PHẦN CÀI ĐẶT, HIỂN THỊ WEBSITE.........................................................4
1. Cài đặt Appserv 2.5.9 để tạo localhost:....................................................4
3. Sử dụng quyền quản trị để đăng nhập quản trị website:.........................18
4. Thêm/Xóa/Hạn chế thành viên:..............................................................19
XÂY DỰNG VÀ THIẾT KẾ WEBSITE.......................................................20
1. Xây dựng website...................................................................................20
2. Thiết kế website:.....................................................................................22
2.1 Tạo Catelogy, Section, Article..........................................................22
2.2 Tạo các Menu...................................................................................23
2.3. Tạo/Xóa/ Sửa Article (bài viết)........................................................26
2.4. Tạo liên kết bài viết và menu...........................................................27
2.5. Module đăng nhập, đăng ký, quên mật khẩu...................................28
2.6. Module footer show copyright website...........................................28
2.7. Module showslide ảnh giới thiệu ở Trang chủ................................29
2.8. Module show banner Hình ảnh hoạt động.................................31
2.9. Module show vị trí đang truy cập....................................................33
2.10. Module show thành viên lãnh đạo.................................................33
2.11. Tạo menu Contact (Liên hệ) cho website......................................34
2.12. Tạo Mod_banner quảng bá wedsite...............................................37
2.13. Module bình chọn và thăm dị ý kiến............................................39
2.14. Module tin cũ và tin mới đọc:.......................................................40
PHẦN KẾT LUẬN.........................................................................................42
CÁC WEBSITE THAM KHẢO.....................................................................42

GVHD: ths. Nguyễn Quang Ninh

1


PHẦN MỞ ĐẦU
1. Lý do, mục đích chọn đề tài
Trong thế kỷ mà công nghệ liên tục phát triển, các doanh nghiệp
cần những chiến lược và những phương pháp điều hành có hiệu quả.
Vấn đề cơ bản nhất được đặt ra là: thị trường thế giới đang ở một thời
kỳ chuyển biến sôi động và hội nhập quốc tế và Internet đã trở thành
công cụ hỗ trợ có hiệu quả kinh doanh trực tuyến.
Các doanh nghiệp cần có website để tạo dựng được uy tín của
mình khơng chỉ trong đời sống thực tế mà tận dụng nhiều cơ hội tốt
phục vụ những khách hàng tiềm năng trên thị trường trong và ngoài
nước. Tuy nhiên, bên cạnh đó, với các doanh nghiệp có quy mơ nhỏ, thì
việc nên xây dựng một website hay không đang là một vấn đề cần quan
tâm. Tuy vậy nếu xây dựng một Website ngày nay không cịn khó khăn
và tốn nhiều kinh phí nhưng nó mang lại cho Doanh nghiệp nhiều lợi
ích:
Tiếp cận được thị trường thế giới:
- Cung cấp được đầy đủ thông tin cho khách hàng một cách nhanh
chóng, tiện lợi.
- Giải đáp thắc mắc, yêu cầu của khách hàng một cách nhanh chóng,
hiệu quả.
- Cung cấp được dịch vụ tiện lợi cho khách hàng chọn hàng, đặt hàng
mọi lúc mọi nơi.
- Kinh doanh mà không bị giới hạn phạm vi địa lý.
- Truyền tải được nhiều thông tin, thời lượng.
- Dễ dàng theo dõi hiệu quả và nhận phản hồi của khách hàng.
- Tiết kiệm chi phí marketing truyền thống: in ấn, phone, fax, nhân viên

tiếp thị...
- Tạo dựng và tăng lợi thế cạnh tranh.
- Tăng cường hội nhập quốc tế

GVHD: ths. Nguyễn Quang Ninh

2


- Việc thanh toán trực tuyến sẽ là một trong những dịch vụ các doanh
nghiệp cần phải hướng tới để giảm chi phí sản xuất, giảm chi phí giao
dịch và tạo tiện lợi lớn cho khách hàng.
“Một doanh nghiệp không có website ắt hẳn không theo kịp thời đại,
không chuyên nghiệp”.
2. Giới thiệu tổng quan về Joomla
Đã có một số các trang web ở Việt Nam được phát triển dựa trên
Joomla. Với lợi thế của hệ thống mở, dễ dàng thay đổi giao diện, cơng
cụ quản trị tốt, có tính phát triển cao và miễn phí giúp tiếp cận rộng rãi,
Joomla sẽ là môi trường tốt cho phát triển các trang Web trong tương
lai.
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 đến cơ sở dữ liệu MySQL, điều này
giúp người dùng dễ dàng xuất bản nội dung của họ lên internet.
Joomla được phát âm theo tiếng Swahili như là Jumla, có nghĩa là
“Đồng tâm hiệp lực”. Joomla! có mã nguồn mở và hồn tồn miễn phí
cho mọi người dùng trên thế giới.
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, bảng biểu, hỗ trợ tìm
kiếm trong site và hỗ trợ đa ngôn ngữ.

Joomla! có nguồn gốc từ Mambo là một công cụ giúp tạo và quản
trị website khá nổi tiếng. Tuy nhiên, khi Mambo Foudation tác động hỗ
trợ cho tập đoàn Miro của Australia muốn ngăn cản Mambo được sử
dụng rộng rãi trong cộng đồng thì bất đồng quan điểm đã xảy ra.
Ngày 17.8.2005, tồn bộ 20 thành viên nịng cốt của nhóm phát
triển đã rời khỏi dự án Mambo khi đang làm việc với phiên bản 4.5.3
và thành lập một nhánh mới lấy tên là Joomla! Nhờ sự trợ giúp của
Trung tâm Luật Tự do Phần mềm (Software Freedom Law Center SFLC), 20 thành viên nòng cốt cũ của Mambo đã thành lập một tổ chức
phi lợi nhuận khác lấy tên là Open Source Matters, để hỗ trợ về mặt tổ
chức, pháp lý và kinh phí cho dự án mã nguồn mở còn chưa được đặt
tên của họ. Cùng lúc đó, nhóm phát triển cũng lập một website lấy tên
OpenSourceMatters để phân phối thông tin tới những người sử dụng,
những người phát triển, những người thiết kế và cộng đồng Joomla nói
chung. Ngày 16.09.2005 phiên bản Joomla 1.0 ra đời.
GVHD: ths. Nguyễn Quang Ninh

3


Hiện nay Joomla được ứng dụng rộng rãi trong các cổng thơng tin
điện tử, thương mại trực tún, báo chí trực tuyến, website của cá nhân
hoặc tổ chức.
Dòng phiên bản 1.0.x: là phiên bản phát hành ổn định và được sử
dụng rộng rãi.Có nhiều thành phần mở rộng(component, module,...).
Phiên bản đầu tiên (1.0.0) ra đời ngày 15.09.2005 Phiên bản tốt nhất
của dòng 1.0.x là 1.0.13 ra đời ngày 21.07.2007
Dòng phiên bản 1.5.x cũng đã phát triển Joomla 1.5 RC1 vào cuối
tháng 7 năm 2007, nhưng hoạt động chưa ổn định nên chủ yếu là chạy
thử nghiệm trên máy đơn
Những địa chỉ cần quan tâm:

Website chính thức của Joomla tại địa chỉ .
Bản demo của Joomla: .
Thành phần mở rộng và hỗ trợ : .
Những thông tin chi tiết về Joomla được viết bằng tiếng Việt có thể đọc
tại .
Cộng đồng những người sử dụng nguồn mở Joomla ở Việt Nam,
theo thống kê mới nhất, với trung bình là 25.000 đăng ký và với
5.000.000 lượt viếng thăm trong mỗi tháng, Joomla là hệ thống quản trị
nội dung mã nguồn mở có các đặc tính: linh hoạt, đơn giản, tính tuỳ
biến cao và cơng cụ mạnh được sử dụng nhiều ở trên toàn thế giới từ
những trang web đơn giản cho đến những ứng dụng phức tạp.
3. Mục tiêu của Website:
Bất kì website nào khi xây dựng thì nó đều có chung một yếu tố
rất quan trọng đó là xây dựng hệ thống thông tin. Theo một quan điểm
trực tuyến: nếu dữ liệu hoặc nội dung của trang web được cấu trúc theo
cách thân thiện cho tìm kiếm thì kết quả đạt được sẽ rất tích cực.
Nội dung trên mỗi trang:
Bố cục nội dung hiển thị trên một vị trí cố định. Hạn chế bị lỗi
khi cập nhật thơng tin thì nó tràn sang phần khác của trang web. Nội
dung bài viết không quá dài hay quá ngắn, bài viết phải chất lượng
nhằm thu hút du khách đến với các trang trên site của chúng ta. Dùng
heading cho mỗi tiêu đề bài viết. Viết nội dung tiếng Việt có dấu hay
không dấu tùy biến. Tùy theo yếu tố quan trọng của mỗi tiêu đề.
Giao diện website:
GVHD: ths. Nguyễn Quang Ninh

4


Bố cục website phải rõ ràng, mỗi website ít nhất thể hiện cấu trúc

của trang web( header, nội dung, footer). Website hoạt động tốt. Xác
định cho người dùng biết mình đang làm gì và ở đâu.

PHẦN CÀI ĐẶT, HIỂN THỊ WEBSITE
1. Cài đặt Appserv 2.5.9 để tạo localhost:
Để xây dựng website Joomla trên localhost, cần phải có một
server ảo trên máy tính. Nhiều phần mềm có chức năng này, trong báo
cáo này, tơi tạm dùng Appserv-win32-2.5.8 do chương trình này hồn
tồn miễn phí, dễ sử dụng và rất nhẹ, phù hợp với các máy cấu hình
trung bình...
Download chương trình tại địa chỉ:
" />%20Project/2.5.8/appserv-win32-2.5.8.exe"
hoặc " />Tiến hành cài đặt:
Bước 1: Chạy tập tin chương trình
Bước 2: Xuất hiện giao diện chương trình:

GVHD: ths. Nguyễn Quang Ninh

5


Nhấn NEXT
Bước 3: Xuất hiện bản License, chọn I argee

Nhấn NEXT
Bước 4: Chọn đường dẫn cài đặt

GVHD: ths. Nguyễn Quang Ninh

6

Mặc định là C:\AppSev
Nhấn NEXT
Bước 5: Chọn các Componens:

GVHD: ths. Nguyễn Quang Ninh

7


Ở Appsever đã tổ hợp cài đặt Apache, MySQL, PHPMyadmin.
Nhấn NEXT
Bước 6: Điền thông tin sever:

Ở báo cáo này tập trung xây dựng website trên localhost nên chọn:
SeverName : localhost
Email: Email quản trị
Apache HTTP Port: 80
Nhấn NEXT
Bước 7: Mật khẩu của MySQL

GVHD: ths. Nguyễn Quang Ninh

8


Nhập password và confirm password
Nhấn NEXT
Bước 8: Chương trình tiến hành cài đặt:

GVHD: ths. Nguyễn Quang Ninh

9


Bước 9: Hoàn tất cài đặt:

Chọn Start Apache và Start MySQL để chương trình khởi động.
Nhấn FINISH.
Với cài đặt mặc định:
C:\AppServ\www là địa chỉ webroot, nơi copy các file php vào đây
C:\AppServ\mysql\data\ chứa CSDL MySQL, mỗi CSDL sẽ là 1 folder,
để sao lưu dữ liệu MySQL, copy folder này thành nhiều bản sao.
Kiểm tra:
Mở trình duyệt web, gõ địa chỉ: "http://localhost/ "(hoặc
"http://127.0.0.1")
Trình duyệt sẽ hiện ra như sau nếu cài đặt thành công:

GVHD: ths. Nguyễn Quang Ninh

10


Để xem đầy đủ thông tin về sever vừa cài đặt, ta có thể truy cập
trang "http://localhost/phpinfo.php"
Truy cập trang "http://localhost/phpmyadmin/" với user root và pass
khi cài đặt appsever, ta có thể truy cập vào database của localhost.
Tạo database cho website:
Để tạo một database, gõ vào trình duyệt "localhost/phpmyadmin"

(hoặc 127.0.0.1/phpmyadmin). Hộp thoại xuất hiện yêu cầu nhập User
Name và Password để vào phpMyAdmin (User Name và Password
nhập khi cài đặt Appsever, mặc định User Name là root).

GVHD: ths. Nguyễn Quang Ninh

11


Trang phpMyAdmin xuất hiện, nhập tên database vào phần
Create new database, sau đó bấm Create để tạo. Sau khi tạo sẽ được
giao diện như sau:

Khi nhấn vào tên Database vừa tạo ta sẽ biết được thông tin về cơ
sỏ dữ liệu của chúng ta:

GVHD: ths. Nguyễn Quang Ninh

12


2. Cài đặt Joomla! version 1.5.14 trên localhost:
Download Joomla! 1.5.14 (dung lượng 6.37 MB) tại địa chỉ:
" />4-Stable-Full_Package.zip"
Tiến hành cài đặt:
Giải nén file zip ra một thư mục (tạm đặt tên thư mục là joomla)
và chép thư mục joomla vào thư mục www của Appsev (mặc định là
C:\Appsev\www).
Mở trình duyệt web, gõ localhost/joomla (nếu thư mục chứa mã
nguồn Joomla! trong thư mục www của Appsev là joomla, như đã nói ở

trên). Trang web Joomla! Web Installer xuất hiện.
Bước 1: Choose Language: chọn ngôn ngữ.

GVHD: ths. Nguyễn Quang Ninh

13


Chọn English (United Kingdom) (thường để default) và nhấn NEXT
Bước 2: Pre-installation Check: Kiểm tra cài đặt

kiểm tra xem hệ thống có thể cài được Joomla không, phần
Recommended Settings gồm 2 cột (bên trái là yêu cầu Recommended,
bên phải là hệ thống của Actual).
Nhấn
Bước 3 License: quy định sử dụng chương trình

GVHD: ths. Nguyễn Quang Ninh

NEXT

14


Nhấn NEXT
Bước 4: Database Configuration: Thiết lập cơ sở dữ liệu

- Database Type: Hiện MySQL hỗ trợ 2 chuẩn là mysql và mysqli ( mới
hơn ), thường chọn mysql

GVHD: ths. Nguyễn Quang Ninh

15


- Host Name: nếu sử dụng MySQL trên chính máy cài Joomla! thì điền
vào là localhost, cịn trong trường hợp khác, nếu sử dụng MySQL và
truy xuất database thông qua 1 máy khác, thì chúng ta điền tên host đó
hoặc IP của host đó tại đây.
- Username: tài khoản MySQL khi cài AppSever, nếu dùng trên
localhost thì tài khoản này nên đặt là root ( tài khoản có mức ưu tiên
cao nhất ), trong trường hợp dùng các host shared thì tài khoản này chỉ
có tác dụng trong host và bị giới hạn 1 vài tính năng.
- Password: mật khẩu tài khoản MySQL, Khi cài AppSever.
- Database name: Chọn tên cho database.
- Advanced Settings: Các thiết lập nâng cao, ở đây mục prefix nghĩa là
tiền tố, nó sẽ đứng trước tên của các table trong CSDL và dùng để phân
biệt với các table khác.
Nhấn NEXT
Bước 5: FTP Configuration: thiết lập FTP, có thể mở hoặc không.

Nhấn
NEXT
Bước 6: Main Configuration: thiết lập cho website như tên web, email
và password của admin.

GVHD: ths. Nguyễn Quang Ninh

16

- Site Name: đặt tên website
- Confirm the admin email and password. Password này sẽ là password
của admin sau này đăng nhập vào trang quản trị của website.
- Install default sample data: Cài đặt mặc định dữ liệu cho Joomla!
- Load local Joomla! 1.5 SQL script : Export dữ liệu từ bản 1.5 cũ và
load tại đây.
- Load migration script : dùng để nâng cấp các trang từ phiên bản 1.0.x
lên 1.5
Nhấn NEXT
Bước 7: Finish: Cài đặt hoàn tất.

GVHD: ths. Nguyễn Quang Ninh

17


Để website hoạt động, cần xóa hoặc rename thư mục Installation
trong thư mục Appsev\www\Joomla, nó sẽ không khởi động cài đặt ở
những lần truy cập sau.
Sau đó bấm vào nút Site để xem thử site (địa chỉ truy cập vào site
có dạng "http://localhost/joomla").
Để tránh chế độ tràn bộ nhớ ta mở file configutation ở đường
dẫn Appsev\www\joomla bằng notepad++ (word pad, notepad..v.v) và
thêm đoạn mã ini_set ("memory_limit","30M"); vào sau 3. Sử dụng quyền quản trị để đăng nhập quản trị website:
Mở trình duyệt web, nhập địa chỉ: "http://localhost/administrator"
Xuất hiện trang quản trị, nhập :

GVHD: ths. Nguyễn Quang Ninh

18


Username : admin
Password: là password ở bước 6 khi cài đặt Joomla!
Xuất hiện trang quản trị website:

Các nội dung chính trong báo cáo được thực hiện tại trang quản trị
này.
4. Thêm/Xóa/Hạn chế thành viên:
Tại trang quản trị, sử dụng tab: Site/ User Manager
Thêm thành viên: New User
GVHD: ths. Nguyễn Quang Ninh

19


Name: Tên thành viên
UserName: Tên sử dụng khi đăng nhập website
Email: Email thành viên
New Password: nhập mật khẩu thành viên
Verify Password: nhập lại mật khẩu
Group: Tạo quyền quản trị của thành viên
Public Front-end: Thành viên có quyền đăng nhập website
Public Back-End: Thành viên có quyền đăng nhập quản trị website
Xóa thành viên: Tick vào tên thành viên và nhấn Trash
Hạn chế thành viên: Chọn thành viên, thay đổi group hạn chế phù hợp
Vậy ta đã xây dựng xong về cơ bản một website mã nguồn Joomla! trên
localhost

XÂY DỰNG VÀ THIẾT KẾ WEBSITE
1. Xây dựng website:
a. Cài đặt template:

GVHD: ths. Nguyễn Quang Ninh

20


Ở phần Extensions chọn Install/Uninstall chọn đường dẫn đến
templates và module sau đó nhấn Upload File & Install
Tiếp theo vào Extensions\Template Manager . Di chuyển chuột đến
template

Chọn Template cho website bằng cách tick vào temp vừa cài đặt
chọn Defaut. Nhấn preview sau khi chọn để xem trước toàn bộ.
b. Cài đặt module:

GVHD: ths. Nguyễn Quang Ninh

21


Ở phần Extensions chọn Install/Uninstall chọn đường dẫn đến
module cần cài đặt và module sau đó nhấn Upload File & Install.
Vào Extentions/ Module Manager để thực hiện các thao tác trên
module vừa cài đặt.
c. Việt hóa front-end:
Download tại địa chỉ:

" />Thực hiện cài đặt:
Extensions chọn Install/Uninstall, tìm đường dẫn đến gói cài đặt vừa
tải về, nhất Upload File & Install.
Sau khi cài đặt xong, vào Extensions/ Language Manager, chọn Viet
Nam, Default. Nhấn Preview để kiểm tra.
2. Thiết kế website:
2.1 Tạo Catelogy, Section, Article:
Cấu trúc của một trang website joomla được thể hiện qua cấu trúc sau:
Section 1
------|Category 1a
------|Category 1b
------|Category 1c
------------Article 1c1
------------Article 1c2
------------Article 1c3
Section 2
------|Category 2a
------|Category 2b
------|Category 2c
------------Article 2c1
------------Article 2c2
------------Article 2c3
Trong đó:
GVHD: ths. Nguyễn Quang Ninh

22


-Section: Là các mục, các lĩnh vực,các dịch vụ ... mà website muốn đề
cập tới. Section dùng để phân vùng tin tức.

Ví dụ: Các tổ chức Đảng_đồn thể, Các khoa đào tạo, tin tức và sự
kiện...
-Category: Là các chuyên mục, các lĩnh vực ,các dịch vụ được đề cập
một cách cụ thể, chi tiết hơn. Catelogy dùng để phân loại tin tức.
Ví dụ: Đảng bộ, Cơng đồn, ...thuộc các tổ chức đồn thể; Khoa Cơng
nghệ thơng tin, khoa tốn...thuộc các khoa đào tạo.
-Article: Toàn bộ nội dung bài viết, có hai phần:
Phần tiêu đề bài viết
Phần chi tiết: phần còn lại của bài viết.
a. Tạo Section:
Mở menu Content/ Section Manager/New
Section Title: dùng để hiển thị ở Back-End
Alias: hiển thị ở Front-End
Nhấn Apply và Save để kết thúc.
b. Tạo Catelogy
Mở menu Content/ Catelogy Manager/New
Catelogy Title: dùng để hiển thị ở Back-End
Alias: hiển thị ở Front-End
Select Section: Chọn vùng tin tức đã tạo (Section)
Nhấn Apply và Save để kết thúc.
c. Tạo Article:
Mở menu Content/ Article Manager/ New
Title: tiêu đề bài viết
Select Section: Chọn vùng tin tức đã tạo (Section)
Select Category: Chọn vùng tin tức đã tạo (Category)
Viết nội dung vào text box
Nếu cần chèn thêm hình ảnh vào bài viết thì nhấn Image, chọn ảnh cần
thiết chèn vào. Nếu cần đọc thêm trong bài viết thì đặt con trỏ tại vị trí
cần ngắt trong bài viết, nhấn Pagebreak. Còn nếu muốn sang trang tiếp
theo thì nhấn vào Readmore.

2.2 Tạo các Menu:
GVHD: ths. Nguyễn Quang Ninh

23


a. Tạo Menu:
Mở menu Menus/Main menu/New:
Select Menu Item Type:
- Tạo Section: Chọn Internal Link\Articles\Section/Section Layout

Tittle: tên Section
Display in: Vị trí hiển thị
Parent Item: Cấp độ của Menu ( chọn Top)
Published: Hiển thị trên web (Yes)
Order: Thứ tự Menu
Access Level: Mức độ truy cập
On Click, Open in: Chọn trình duyệt khi click chuột
Parameters:
Section: Chọn vùng tin tức
Description: Phần mô tả
Description Images: Ảnh hiển thị
Nhấn Apply và Save để kết thúc tạo menu.
GVHD: ths. Nguyễn Quang Ninh

24


-Tạo Category: Chọn Internal Link\Articles\Section/Category List
Layout.

Tittle: tên Category
Display in: Vị trí hiển thị
Parent Item: Cấp độ của Menu ( chọn Top)
Published: Hiển thị trên web (Yes)
Order: Thứ tự Menu
Access Level: Mức độ truy cập
On Click, Open in: Chọn trình duyệt khi click chuột
Parameters:
Category: Chọn vị trí Category thuộc Section nào.
Description: Phần mô tả
Description Images: Ảnh hiển thị
Nhấn Apply và Save để kết thúc tạo category.
b.Hiển thị menu lên website:
GVHD: ths. Nguyễn Quang Ninh

25